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.

-46%
Le deal à ne pas rater :
Oceanic OCEAB120W Batteur électrique – Blanc
7.51 € 13.91 €
Voir le deal

    QEEL onglets latéraux contenu coulissant en hover (CSS)

    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Sam 24 Nov 2012 - 17:26

    Rappel du premier message :

    Hello !

    Dans le même esprit que son équivalent en page d'accueil, voici un QEEL avec onglets sur le côtés et le contenu qui se déplie sur survol de chaque bouton.

    Voici l'aperçu directement sur forum :

    Lien Forum Test

    Il s'agit du second QEEL aux couleurs oranges/rouges. Comme vous pouvez le voir le contenu du QEEL est déjà en place, vous pouvez l'installer tel quel sur votre forum, vous n'aurez qu'à changer les couleurs et les images du titre et des boutons pour que ce soit fonctionnel. Le seul contenu à adapter sera pour les groupes x).




    Installation HTML

    Puisque nous modifions le "Qui est en ligne" de notre forum, il faut aller dans le template "Page d'accueil", ou "index_body".
    Repérez le bloc contenu entre les lignes 175 et 223 : il est délimité par les marqueurs suivants :

    Code:
    <!-- BEGIN disable_viewonline -->
    <!-- END disable_viewonline -->

    Ils indiquent le début et la fin de l'ensemble du "Qui est en ligne". C'est tout ce qui se trouve entre ces deux marqueurs que nous allons remplacer par cela :

    Code:
    <span class="qeelnu31_titre"></span>
    <div id="qeelnu31">
      <div id="qeelnu31_content">
        <div id="qeelnu31_links">
         
          <div class="qeelnu31_link1">
          <div class="qeelnu31_contenu2">
            <span class="qeelnu31_contenu">
              <table>{L_CONNECTED_MEMBERS}</table>
            </span>
          </div>
          </div>
         
          <div class="qeelnu31_link2">
          <div class="qeelnu31_contenu3">
            <span class="qeelnu31_contenu">
              <table><tr>
                <td style="vertical-align: top;">
                  <a href="#" class="gr1">Groupe 1</a>
                  <span class="gr_description"> - Ibi victu recreati et quiete, postquam abierat timor, vicos opulentos adorti equestrium adventu cohortium, quae casu propinquabant, nec resistere planitie porrecta conati digressi sunt retroque concedentes omne iuventutis robur relictum in sedibus acciverunt.</span>
                  <br />
                  <a href="#" class="gr3">Groupe 3</a>
                  <span class="gr_description"> - Description du groupe.</span>
                  <br />
                  <a href="#" class="gr5">Groupe 5</a>
                  <span class="gr_description"> - Description du groupe.</span>
                </td>
                <td style="vertical-align: top;">
                  <a href="#" class="gr2">Groupe 2</a>
                  <span class="gr_description"> - Ibi victu recreati et quiete, postquam abierat timor, vicos opulentos adorti equestrium adventu cohortium, quae casu propinquabant, nec resistere planitie porrecta conati digressi sunt retroque concedentes omne iuventutis robur relictum in sedibus acciverunt.</span>
                  <br />
                  <a href="#" class="gr4">Groupe 4</a>
                  <span class="gr_description"> - Description du groupe.</span>
                </td>
              </tr></table>
            </span>
            </div>
          </div>
         
          <div class="qeelnu31_link3">
          <div class="qeelnu31_contenu4">
            <span class="qeelnu31_contenu">
              <table>{L_WHOSBIRTHDAY_TODAY}
            {L_WHOSBIRTHDAY_WEEK}</table>
            </span>
          </div>
          </div>
         
        </div>
        <div class="qeelnu31_contenu1">
          <span class="qeelnu31_contenu">
            <span class="qeelnu31_stats">{TOTAL_USERS}.<br />{TOTAL_POSTS}.</span>
            <br /><br />
            <span class="qeelnu31_norm">{NEWEST_USER}<br />
              {RECORD_USERS}</span>
            <br /><br />
            <span class="usernu31_online">{TOTAL_USERS_ONLINE}</span><br />
            <span class="usernu31_list">{LOGGED_IN_USER_LIST}</span>
          </span>
        </div>
      </div>
    </div>

    N'oubliez pas d'enregistrer puis de valider votre template !


    Installation CSS

    Allez ensuite dans la feuille CSS de votre forum pour y ajouter le code suivant :

    Code:
    /* QEEL ONGLETS LATERAUX HOVER */

    .qeelnu31_titre
    {
      display: block;
      width: 800px;
      height: 100px;
      background: url(http://img15.hostingpics.net/pics/579333qeeltitre.png);
      margin: auto;
    }
    #qeelnu31
    {
      width: 950px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 10px;
      margin-bottom: 5px;
      height: 200px;
      padding: 10px;
      background: #b9a085;
      border: 1px solid #ccbdad;
      border-radius: 10px;
      -moz-border-radius: 10px;
      -o-border-radius: 10px;
      -htm-border-radius: 10px;
      -webkit-border-radius: 10px;
      box-shadow: 0px 0px 5px #7b6751;
      -moz-box-shadow: 0px 0px 5px #7b6751;
      -o-box-shadow: 0px 0px 5px #7b6751;
      -htm-box-shadow: 0px 0px 5px #7b6751;
      -webkit-box-shadow: 0px 0px 5px #7b6751;
    }
    #qeelnu31_content
    {
      width: 950px;
      height: 200px;
      overflow: hidden;
    }
    #qeelnu31_links
    {
      float: left;
    }
    .qeelnu31_link1, .qeelnu31_link2, .qeelnu31_link3
    {
      width: 150px;
      height: 48px;
      margin-bottom: 2px;
      opacity: 0.6;
      -moz-opacity: 0.6;
      -khtml-opacity: 0.6;
      filter: alpha(opacity=60);
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
    }
    .qeelnu31_link1
    {
      background: url(http://img15.hostingpics.net/pics/272286bouton1.jpg);
    }
    .qeelnu31_link2
    {
      background: url(http://img15.hostingpics.net/pics/437826bouton2.jpg);
    }
    .qeelnu31_link3
    {
      background: url(http://img15.hostingpics.net/pics/474878bouton3.jpg);
    }
    .qeelnu31_link1:hover, .qeelnu31_link2:hover, .qeelnu31_link3:hover

      opacity: 1;
      -moz-opacity: 1;
      -khtml-opacity: 1;
      filter: alpha(opacity=100);
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
     
    }
    .qeelnu31_contenu1
    {
      width: 800px;
      height: 200px;
      margin-left: 150px;
      background: #e3d9cf;
      border: 1px solid #f2eee9;
      box-shadow: 0px 0px 3px #c1b1a0;
      -moz-box-shadow: 0px 0px 3px #c1b1a0;
      -o-box-shadow: 0px 0px 3px #c1b1a0;
      -webkit-box-shadow: 0px 0px 3px #c1b1a0;
      -htm-box-shadow: 0px 0px 3px #c1b1a0;
      color: #776047;
    }
    .qeelnu31_contenu2
    {
      position: absolute;
      width: 0px;
      height: 200px;
      margin-left: 150px;
      overflow: hidden;
      background: #e3d9cf;
      border: 1px solid #f2eee9;
      box-shadow: 0px 0px 3px #c1b1a0;
      -moz-box-shadow: 0px 0px 3px #c1b1a0;
      -o-box-shadow: 0px 0px 3px #c1b1a0;
      -webkit-box-shadow: 0px 0px 3px #c1b1a0;
      -htm-box-shadow: 0px 0px 3px #c1b1a0;
      color: #776047;
      opacity: 0;
      -moz-opacity: 0;
      -khtml-opacity: 0;
      filter: alpha(opacity=0);
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
    }
    .qeelnu31_contenu3
    {
      position: absolute;
      width: 0px;
      height: 200px;
      margin-left: 150px;
      margin-top: -50px;
      overflow: hidden;
      background: #e3d9cf;
      border: 1px solid #f2eee9;
      box-shadow: 0px 0px 3px #c1b1a0;
      -moz-box-shadow: 0px 0px 3px #c1b1a0;
      -o-box-shadow: 0px 0px 3px #c1b1a0;
      -webkit-box-shadow: 0px 0px 3px #c1b1a0;
      -htm-box-shadow: 0px 0px 3px #c1b1a0;
      color: #776047;
      opacity: 0;
      -moz-opacity: 0;
      -khtml-opacity: 0;
      filter: alpha(opacity=0);
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
    }
    .qeelnu31_contenu4
    {
      position: absolute;
      width: 0px;
      height: 200px;
      margin-left: 150px;
      margin-top: -100px;
      overflow: hidden;
      background: #e3d9cf;
      border: 1px solid #f2eee9;
      box-shadow: 0px 0px 3px #c1b1a0;
      -moz-box-shadow: 0px 0px 3px #c1b1a0;
      -o-box-shadow: 0px 0px 3px #c1b1a0;
      -webkit-box-shadow: 0px 0px 3px #c1b1a0;
      -htm-box-shadow: 0px 0px 3px #c1b1a0;
      color: #776047;
      opacity: 0;
      -moz-opacity: 0;
      -khtml-opacity: 0;
      filter: alpha(opacity=0);
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
    }
    .qeelnu31_link1:hover .qeelnu31_contenu2, .qeelnu31_link2:hover .qeelnu31_contenu3,
    .qeelnu31_link3:hover .qeelnu31_contenu4
    {
      width: 800px;
      height: 200px;
      overflow: auto;
      opacity: 1;
      -moz-opacity: 1;
      -khtml-opacity: 1;
      filter: alpha(opacity=100);
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
    }
    .qeelnu31_contenu
    {
      display: block;
      padding: 5px;
      color: #776047;
      font-size: 10px;
      text-align: justify;
    }

    .qeelnu31_stats
    {
      font-size: 12px;
      text-shadow: -1px -1px 0px #e8e1d9;
      letter-spacing: 2px;
      font-weight: bold;
    }
    .usernu31_online
    {
      display: block;
      font-size: 12px;
      text-shadow: -1px -1px 0px #e8e1d9;
      letter-spacing: 2px;
      font-weight: bold;
      text-align: center;
    }
    .gr1, .gr2, .gr3, .gr4, .gr5, .gr6, .gr7, .gr8, .gr9, .gr10, .gr11
    {
      font-size: 18px;
      font-weight: bold;
      text-shadow: -1px -1px 0px #e8e1d9;
      text-transform: uppercase;
    }
    a.gr1
    {
      color: #494949 !important;
    }
    .gr2
    {
      color: #787878 !important;
    }
    .gr3
    {
      color: #b2b2b2 !important;
    }
    .gr4
    {
      color: #e12727 !important;
    }
    .gr5
    {
      color: #e3bb41 !important;
    }
    .gr_description
    {
      font-size: 10px;
      line-height: 9px;
      text-align: justify;
      color: #aa9a89;
      text-shadow: 1px 1px 0px #e8e1d9;
    }


    Personnalisation

    J'ai crée une image en guise de titre, vous pouvez faire de même en la personnalisant pour qu'elle soit accordée à votre forum. N'oubliez pas que cette image est placée dans le CSS, en temps que fond (.qeelnu31_titre) et donc qu'il faudra que vous mettiez la taille de l'image en width et height de ce bloc, dans le css.
    Pour le reste il s'agit essentiellement de couleurs à changer, ainsi que les boutons de navigation. Je vous conseille de garder la même taille de bouton, ainsi vous n'aurez pas besoin de réajuster les tailles et les marges. Créez donc vos propres images en 150*48.
    Concernant les groupes, vous pouvez en rajouter autant que vous le souhaitez (un scroll se placera automatiquement qu'il y'en a beaucoup et que cela sort du cadre). Ils sont positionnés en tableau, donc repérez-vous avec ceux présents, dites vous par exemple que les groupes impairs sont à gauche et les pairs à droite, pour que la lecture soit plus facile.
    Je vous rappelle pour vous aider que dans un tableau "tr" signifie "ligne", et "td" signifie "case".

    En cas d'utilisation de ces codes merci de mettre un crédit à Never-Utopia sur votre forum, même si vous personnalisez le code, la base a été écrite ici. Un petit crédit, ce n'est pas grand chose, et nous ne demandons que ça pour le partage de notre petit savoir x)
    Si vous avez des problèmes avec ce LS, venez poster ici.
    Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^


    Dernière édition par Sparrow-style le Jeu 28 Mar 2013 - 16:09, édité 1 fois



    sign
    BlueGhost
    BlueGhost
    MasculinAge : 22Messages : 138

    Ven 8 Aoû 2014 - 23:49

    Hello,
    Merci de ce QEEL Very Happy
    Merci



    QEEL onglets latéraux contenu coulissant en hover (CSS) - Page 15 1476882517-signa

    ~ Upupupu... je ne suis pas une peluche, je suis Monokuma ! ~
    Danganronpaaa ♥
    Reims
    Reims
    MasculinAge : 34Messages : 11

    Jeu 14 Aoû 2014 - 20:41

    Mercii
    AlyssYui
    AlyssYui
    FémininAge : 27Messages : 25

    Mar 19 Aoû 2014 - 0:40

    Joli code. J'emprunte. Merci du partage.
    Poké_Eievui
    Poké_Eievui
    MasculinAge : 23Messages : 34

    Ven 29 Aoû 2014 - 11:29

    Very Happy Very Happy Very Happy Very Happy Very Happy Very Happy Very Happy Merci
    Pokebip
    Pokebip
    MasculinAge : 26Messages : 69

    Jeu 4 Sep 2014 - 17:02

    trops magnifique je kiff!
    Meuh Pffeuh
    Meuh Pffeuh
    FémininAge : 24Messages : 37

    Sam 6 Sep 2014 - 12:09

    merci !
    0smose
    0smose
    FémininAge : 28Messages : 167

    Sam 20 Sep 2014 - 17:03

    Merci !



    QEEL onglets latéraux contenu coulissant en hover (CSS) - Page 15 Bannie10

    But I'm only human
    And I bleed when I fall down... I'm only human and I crash and I break down. Your words in my head,
    knives in my heart. You build me up and then I fall apart.
    'Cause I'm only human.
    Insolence
    Insolence
    FémininAge : 31Messages : 23

    Jeu 25 Sep 2014 - 19:37

    Merci beaucoup pour ce code (:
    Gerrard
    Gerrard
    MasculinAge : 33Messages : 12

    Mer 1 Oct 2014 - 3:18

    Merci.
    Kahlane
    Kahlane
    FémininAge : 38Messages : 12

    Mer 1 Oct 2014 - 18:57

    Merci!
    Nemelise
    Nemelise
    FémininAge : 22Messages : 50

    Ven 3 Oct 2014 - 20:09

    Merci ♥ !
    Anonymous
    Invité

    Sam 11 Oct 2014 - 14:34

    Très beau travail, merci beaucoup !!
    Ratatouille
    Ratatouille
    FémininAge : 30Messages : 26

    Dim 19 Oct 2014 - 2:26

    merci
    Asmareth
    Asmareth
    FémininAge : 36Messages : 123

    Dim 26 Oct 2014 - 17:05

    merci !
    Hagel
    Hagel
    FémininAge : 37Messages : 79

    Dim 9 Nov 2014 - 19:23

    magnifique, merci!
    Alekk
    Alekk
    MasculinAge : 33Messages : 24

    Lun 8 Déc 2014 - 16:06

    Roh ça roxxe merci cheers





    Aeronauths' crew member


    Alyssa.B50
    Alyssa.B50
    FémininAge : 29Messages : 42

    Jeu 1 Jan 2015 - 23:21

    Très beau ^^
    Maya Seiko
    Maya Seiko
    FémininAge : 30Messages : 129

    Dim 4 Jan 2015 - 17:37

    Merci beaucoup ^^
    Anonymous
    Invité

    Ven 16 Jan 2015 - 14:53

    Intéressant!

    Petite suggestion: insérer un lien vers les tutoriels à chaque création ou un screenshot ici, car on ne sait pas trop laquelle correspond. Wink
    Irissia87
    Irissia87
    FémininAge : 36Messages : 124

    Jeu 19 Mar 2015 - 8:00

    merci bien!
    Niortais
    Niortais
    MasculinAge : 39Messages : 27

    Jeu 26 Mar 2015 - 11:03

    Merci
    Shelly.R
    Shelly.R
    FémininAge : 30Messages : 14

    Ven 27 Mar 2015 - 23:17

    Merci beaucoup pour ce code !
    Amacky
    Amacky
    FémininAge : 31Messages : 135

    Mar 21 Avr 2015 - 13:28

    Merci
    LaCrapul
    LaCrapul
    MasculinAge : 30Messages : 24

    Lun 27 Avr 2015 - 1:09

    Gracias
    Hylia
    Hylia
    FémininAge : 23Messages : 100

    Ven 19 Juin 2015 - 16:09

    Tancks



    QEEL onglets latéraux contenu coulissant en hover (CSS) - Page 15 _hylia10
    Contenu sponsorisé


      La date/heure actuelle est Mar 19 Mar 2024 - 6:39