AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

Le Deal du moment : -20%
(Adhérents Fnac) Enceinte Bluetooth Marshall ...
Voir le deal
199.99 €

    Qeel Carrousel (4 blocs) - css & html

    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Ven 30 Sep 2016 - 1:16



    Qeel Carrousel



    Salut !

    Voici un petit LS de Qeel que j'ai fait pour la demande de P'tit loup. Le code vient de cette cette PA (page d'accueil) de Okhmhaka qui a été adaptée pour un qeel.

    Pour voir l'aperçu du bloc de devant (bloc 1): cliquez ici.
    Pour voir l'aperçu du bloc de droite (bloc 2) : cliquez ici.
    Pour voir l'aperçu du bloc de droite (bloc 2) au survol d'une image de groupe : cliquez ici.
    Pour voir l'aperçu du bloc de gauche (bloc 3) : cliquez ici.
    Pour voir l'aperçu du bloc de gauche (3) au survol de l'image : cliquez ici.
    Pour voir l'aperçu du bloc de derrière (4) : cliquez ici.

    Ce LS est en deux parties.
    • Tout d'abord, nous allons installer le qeel dans le template et regarder comment ajouter/supprimer/modifier des groupes.
    • Puis, nous allons le mettre en forme à l'aide du CSS.


    La largeur du Qeel est de 850 pixels et la hauteur 450px.
    - La version du forum est PhpBB2.

    Mettre un crédit vers Never-Utopia est obligatoire.
    Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^





    1. Corps du qeel (Template Index_Body)



    Nous allons commencer par aller dans les templates, plus précisément dans le template "Index_body" .

    Pour cela, nous allons aller dans :
    > PANNEAU D'ADMINISTRATION
    > > AFFICHAGE
    > > > TEMPLATES
    > > > > GÉNÉRAL
    > > > > > INDEX_BODY

    Puis, il va nous falloir trouver le "BEGIN disable_viewonline" et le "END disable_viewonline". Normalement, ils sont respectivement aux lignes 173 et 220 du template.

    Nous allons remplacer tout ce qu'il y a entre ces deux lignes par :
    Code:
    <script type="text/javascript">
            //<!--
                    function change_qeelonglet(name)
                    {
                            document.getElementById('qeelonglet_'+anc_qeelonglet).className = 'qeelonglet_0 qeelonglet';
                            document.getElementById('qeelonglet_'+name).className = 'qeelonglet_1 qeelonglet';
                            document.getElementById('contenu_qeelonglet_'+anc_qeelonglet).style.display = 'none';
                            document.getElementById('contenu_qeelonglet_'+name).style.display = 'block';
                            anc_qeelonglet = name;
                    }
            //-->
    </script>
    <link href="https://fonts.googleapis.com/css?family=Covered+By+Your+Grace" rel="stylesheet" />
    <div id="qeeltarget1">
      <div id="qeeltarget2">
        <div id="qeeltarget3">
          <div id="qeeltarget4">
            <div id="qeelespace_top">
              <a href="{U_VIEWONLINE}" rel="nofollow">Qui se cache dans l'ombre ?</a>
            </div>
            <div id="qeelespace_carousel">
             
              <!-- ZONE 1 - DEFAUT -->
              <div id="qeelcarousel_1">
                <a href="#qeeltarget1" class="qeellien1"></a>
                <div class="qeelcarousel_1_content">
                  <div class="qeel_subtitle">Statistiques</div>
                  <div class="qeel_bloc">
                    Bienvenue à<span id="newuser">{NEWEST_USER}</span> !
                    <div id="loggedlist">{LOGGED_IN_USER_LIST}</div>
                    <table id="connlist" cellspacing="0">{L_CONNECTED_MEMBERS}</table>
                  </div>
                </div>
              </div>
             
              <!-- ZONE 2 -->
              <div id="qeelcarousel_2">
                <a href="#qeeltarget2" class="qeellien2"></a>
                <div class="qeelcarousel_2_content">
                  <div class="qeel_subtitle">Groupes</div>
                  <div class="qeel_bloc">
                    <span class="qeelonglet_1 qeelonglet" id="qeelonglet_Groupe1" onmouseover="javascript:change_qeelonglet('Groupe1');">
                      <a href="#">NOM DU GROUPE 1</a>
                    </span>
                    <span class="qeelonglet_0 qeelonglet" id="qeelonglet_Groupe2" onmouseover="javascript:change_qeelonglet('Groupe2');">
                      <a href="#">NOM DU GROUPE 2</a>
                    </span>
                    <span class="qeelonglet_0 qeelonglet" id="qeelonglet_Groupe3" onmouseover="javascript:change_qeelonglet('Groupe3');">
                      <a href="#">NOM DU GROUPE 3</a>
                    </span>
                    <span class="qeelonglet_0 qeelonglet" id="qeelonglet_Groupe4" onmouseover="javascript:change_qeelonglet('Groupe4');">
                      <a href="#">NOM DU GROUPE 4</a>
                    </span>
                    <span class="qeelonglet_0 qeelonglet" id="qeelonglet_Groupe5" onmouseover="javascript:change_qeelonglet('Groupe5');">
                      <a href="#">NOM DU GROUPE 5</a>
                    </span>
                  </div>
                  <div class="qeel_bloc">
                    <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe1">
                      <img class="qeel_img_group" src="URL IMAGE GROUPE 1" alt="Image du groupe 1" />
                      <div class="qeel_desc">
                        DESCRIPTION DU GROUPE 1
                      </div>
                    </div>
                    <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe2">
                      <img class="qeel_img_group" src="URL IMAGE GROUPE 2" alt="Image du groupe 2" />
                      <div class="qeel_desc">
                        DESCRIPTION DU GROUPE 2
                      </div>
                    </div>
                    <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe3">
                      <img class="qeel_img_group" src="URL IMAGE GROUPE 3" alt="Image du groupe 3" />
                      <div class="qeel_desc">
                        DESCRIPTION DU GROUPE 3
                      </div>
                    </div>
                    <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe4">
                      <img class="qeel_img_group" src="URL IMAGE GROUPE 4" alt="Image du groupe 4" />
                      <div class="qeel_desc">
                        DESCRIPTION DU GROUPE 4
                      </div>
                    </div>
                    <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe5">
                      <img class="qeel_img_group" src="URL IMAGE GROUPE 5" alt="Image du groupe 5" />
                      <div class="qeel_desc">
                        DESCRIPTION DU GROUPE 5
                      </div>
                    </div>
                  </div>
                  <div class="clear"></div>
                </div>
              </div>
             
              <!-- ZONE 3 -->
              <div id="qeelcarousel_3">
                <a href="#qeeltarget3" class="qeellien3"></a>
                <div class="qeelcarousel_3_content">
                  <div class="qeel_subtitle">Anniversaires</div>
                  <div class="qeel_bloc">
                    <table id="qeelbirthday" cellspacing="0">
                      {L_WHOSBIRTHDAY_TODAY}
                      {L_WHOSBIRTHDAY_WEEK}
                    </table>
                  </div>
                  <div class="qeel_anniv_bas">
                    <img class="qeel_img_anniv" src="URL IMAGE SOUS LES ANNIVERSAIRES" alt="machin" />
                    <div class="qeel_anniv_texte">
                      Codage du Qeel par Okhmhaka et Onyx de <a href="http://www.never-utopia.com/" target="_blank">Never-Utopia</a>.
                    </div>
                  </div>
                </div>
              </div>
             
              <!-- ZONE 4 -->
              <div id="qeelcarousel_4">
                <a href="#qeeltarget4" class="qeellien4"></a>
                <div class="qeelcarousel_4_content">
                  <div class="qeel_subtitle">Partenaires</div>
                  <div class="qeel_bloc">
                    <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 1" /></a>
                    <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 2" /></a>
                    <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 3" /></a>
                    <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 4" /></a>
                    <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 5" /></a>
                    <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 6" /></a>
                    <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 7" /></a>
                    <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 8" /></a>
                    <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 9" /></a>
                    <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 10" /></a>
                    <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 11" /></a>
                    <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 12" /></a>
                  </div>
                </div>
              </div>
             
            </div>
          </div>
        </div>
      </div>
    </div>
    <script type="text/javascript">
      document.getElementById('newuser').innerHTML=document.getElementById('newuser').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"");
    </script>
        <script type="text/javascript">
            //<!--
                    var anc_qeelonglet = 'Groupe1';
                    change_qeelonglet(anc_qeelonglet);
            //-->
        </script>

    Pour ce qui est rajouter, d'enlever ou de modifier un groupe, cela se fait par trois manipulations. Premièrement, on ajoute/enlève/modifie le nom du groupe. Puis, on enlève/ajoute/modifie la description du groupe. Enfin, on modifie la hauteur des groupes.

    Les noms des groupes ressemblent à ceci :
    Code:
                    <span class="qeelonglet_0 qeelonglet" id="qeelonglet_Groupe5" onmouseover="javascript:change_qeelonglet('Groupe5');">
                      <a href="#">NOM DU GROUPE 5</a>
                    </span>

    Quant aux descriptions des groupes, elles correspondent à ceci :
    Code:
                    <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe5">
                      <img class="qeel_img_group" src="URL IMAGE GROUPE 5" alt="Image du groupe 5" />
                      <div class="qeel_desc">
                        DESCRIPTION DU GROUPE 5
                      </div>
                    </div>

    Il suffit de changer le 5 à tous les endroits où il y en a un par un nouveau chiffre.

    Pour la hauteur des groupes, il faut se rendre à cet endroit dans le CSS (que nous allons ajouter à la prochaine étape) :
    Code:
    /*Nom des groupes*/
    .qeelonglet {
      display: block;
      font-size: 18px;
      height: 38px;
      padding: 15px 3px 0px 3px;
      margin-bottom: 1px;
      text-align: center;
      background: #E9E8E8;
      font-weight: bold;
      text-transform: uppercase;
    }

    Et vous devez modifier le "height" et le "padding" pour arriver à une hauteur des onglets qui vous convient.




    2. Mise en forme (CSS)



    Si vous regardez votre qeel, vous voyez sans doute que ce n'est pas très esthétique pour le moment. Du coup, nous allons mettre en forme notre qeel à l'aide du CSS.

    Pour cela, nous allons aller dans :
    > PANNEAU D'ADMINISTRATION
    > > AFFICHAGE
    > > > IMAGES ET COULEURS
    > > > > COULEURS
    > > > > > FEUILLE DE STYLE CSS

    Puis, nous allons ajouter le CSS suivant :
    Code:
    /************************************************************ DÉBUT QEEL ************************************************************/

    /*Fond du qeel*/
    #qeel {
      position: relative;
      width: 800px;
      height: 680px;
      margin: auto;
      margin-top: 50px;
      margin-bottom: 50px;
      background: #141313 url('http://img15.hostingpics.net/pics/570241qeel2.png') no-repeat top center;
      border-radius: 20px;
      box-shadow: 0px 0px 10px #000000;
    }


    /*Titre du qeel*/
    #qeel_title {
      color: goldenrod;
      font-size: 44px;
      font-family: 'Great Vibes', cursive;
      text-shadow: 1px 1px 2px #000000;
      padding-left: 15px;
    }


    /*Carré des informations sur les membres*/
    #qeel_info_members {
      position: absolute;
      top: 25px;
      left: 25px;
      width: 320px;
      height: 290px;
      background-color: rgba(20, 19, 19, 0.6);
      border-radius: 10px;
      box-shadow: 0px 0px 3px #141313;
      padding: 10px;
      color: #c9c7be;
      font-size: 13px;
      font-family: arial;
      letter-spacing: 1px;
      text-align: left;
    }


    /*Mise en forme des listes des membres connectés*/
    #userlists {
      margin-top: 5px;
      height: 205px;
      overflow: auto;
    }
    #totalconn {
      margin-top: 5px;
    }
    #totalconn .row1{
      background: transparent;
      vertical-align: top;
    }
    #totalconn .gensmall {
      color: #c9c7be;
      font-size: 13px;
      font-family: arial;
      letter-spacing: 1px;
      text-align: left;
    }


    /*Section des groupes*/
    #qeel_bottom {
      position: absolute;
      top: 418px;
      left: 0px;
      width: 800px;
      text-align: center; 
    }


    /*Nom des groupes*/
    .qeelonglet {
      display: inline-block;
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 2px;
      height: 40px;
      font-size: 38px;
      font-family: 'Great Vibes', cursive;
      letter-spacing: 1px;
      text-shadow: 0px 0px 3px #000000;
      opacity: 0.6;
    }
    /*Groupe au survol*/
    .qeelonglet_0:hover {
      cursor: pointer;
      opacity: 0.8;
    }
    /*Groupe actif*/
    .qeelonglet_1 {
      opacity: 1;
    }


    /*Description des groupes*/
    .contenu_qeelonglet {
      position: relative;
      width: 800px;
      height: 200px;
      margin-top: 20px;
      display: none;
    }
    /*Images des groupes*/
    .contenu_qeelonglet img {
      width: 800px;
      height: 200px;
      border-radius: 0px 0px 20px 20px;
    }
    /*Descriptions des groupes*/
    .qeel_desc {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 780px;
      height: 180px;
      background-color: rgba(20, 19, 19, 0.6);
      border-radius: 0px 0px 20px 20px;
      padding: 10px;
      color: #c9c7be;
      font-size: 13px;
      font-family: arial;
      letter-spacing: 1px;
      text-align: justify;
      overflow: auto;
      transition: 0.5s;
      opacity: 0;
    }
    /*Descriptions des groupes au survol*/
    .contenu_qeelonglet:hover .qeel_desc {
      opacity: 1;
    }

    /************************************************************ FIN QEEL ************************************************************/




    C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous voulez personnaliser le LS et que vous avez besoin d'aide.

    À plus !


    Dernière édition par Onyx le Jeu 25 Juin 2020 - 18:03, édité 1 fois



    Toonsi
    Toonsi
    MasculinAge : 25Messages : 40

    Sam 1 Juil 2017 - 21:13

    merci
    Anonymous
    Invité

    Sam 1 Juil 2017 - 21:41

    Merci pour le partage ! :)
    .Lucifer.
    .Lucifer.
    MasculinAge : 50Messages : 184

    Ven 16 Mar 2018 - 10:07

    Merci pour le partage ! Wink



    Qeel Carrousel (4 blocs) - css & html 978358Divine
    Contenu sponsorisé


      La date/heure actuelle est Mar 19 Mar 2024 - 8:55