AccueilFAQRechercherMembresGroupesS'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.


    QEEL onglets latéraux contenu apparaissant "onClic" (focus - CSS)

    Partagez
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Sam 24 Nov 2012 - 18:03

    Rappel du premier message :

    Bonjour, bonsoir,

    Dans l'idée de la PA équivalente, voici le même principe de focus appliqué à un QEEL, lui aussi déjà rempli, vous n'avez plus qu'à installer et personnaliser son apparence, et en particulier les images qui l'encadrent.
    Un petit aperçu tout d'abord :

    Lien Forum Test

    Il s'agit du premier QEEL du forum, au fond marron et avec la femme manga allongée au dessus.

    Information importante : j'ai voulu ici utiliser le "focus" en alternative au "target" pour créer un effet au clic, et non au survol. Que ça vous parle ou non peu importe, sachez juste qu'il y a un "défaut" avec l'utilisation du focus, c'est que lorsqu'on clique aille ça l'enlève. Du coup, lorsque vous êtes sur le contenu de l'un des onglets et que vous cliquez sur la page, que ce soit à l'intérieur ou à l'extérieur, vous revenez sur le contenu par défaut. Je vous rassure cependant si vous comptez mettre des liens dans vos contenus, même si le fait de cliquer ramène au contenu par défaut le lien fonctionnera quand même.
    Sachez le cependant avant de l'utiliser.


    Le contenu n'est pas sous balide hide (explications), mais n'hésitez pas à remercier son auteur.


    Installation HTML

    Ouvrez le template "Page d'accueil", également nommé "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:
    <div id="qeel_bloc">
     
    <div id="qeel_head"></div>
    <div id="qeel_body">

    <div id="qeel">
      <div class="qeel_onglet1" tabindex="0">Derniers connectés
        <div class="qeel_contenu1"><div class="qeel_contenu"><table>{L_CONNECTED_MEMBERS}</table></div></div>
      </div>
      <div class="qeel_onglet2" tabindex="0">Anniversaires
        <div class="qeel_contenu2"><div class="qeel_contenu"><table>{L_WHOSBIRTHDAY_TODAY}
          {L_WHOSBIRTHDAY_WEEK}</table></div></div>
      </div>
      <div class="qeel_onglet3" tabindex="0">Groupes
        <div class="qeel_contenu3"><div class="qeel_contenu">{GROUP_LEGEND}</div></div>
      </div>
      <div class="qeel_contenu4"><div class="qeel_contenu">{TOTAL_POSTS} ▬ {TOTAL_USERS} ▬ {NEWEST_USER}<br />
        {RECORD_USERS}<br /><br />
        {TOTAL_USERS_ONLINE}<br />{LOGGED_IN_USER_LIST}</div></div>
      </div></div>

    <div id="qeel_foot"></div>
     
      </div>


    Installation CSS

    Pour la mettre en forme, allez dans votre feuille CSS pour y mettre le css ci-dessous :

    Code:
    /* QEEL ONGLETS LATERAUX ONCLIC FOCUS */

    #qeel_bloc
    {
      height: 400px;
    }
    #qeel_head
    {
      width: 980px;
      margin: auto;
      height: 151px;
      background: url(#);
    }
    #qeel_body
    {
      width: 980px;
      height: 150px;
      margin: auto;
      background: url(#) repeat-y;
    }
    #qeel_foot
    {
      width: 980px;
      margin: auto;
      height: 118px;
      background: url(#);
    }
    #qeel
    {
      padding-top: 20px;
      padding-bottom: 20px;
    }
    .qeel_onglet1
    {
      width: 150px;
      height: 20px;
      padding: 4px;
      margin-left: 0;
      margin-bottom: 10px;
      background: #d39b69;
      border: 1px solid #cf6f1d;
      box-shadow: 0px 0px 4px #493b32;
      -moz-box-shadow: 0px 0px 4px #493b32;
      -o-box-shadow: 0px 0px 4px #493b32;
      -htm-box-shadow: 0px 0px 4px #493b32;
      -webkit-box-shadow: 0px 0px 4px #493b32;
      font-weight: bold;
      color: #473d36;
      text-shadow: 1px 1px 0px #f0b27e;
      text-align: center;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
    }
    .qeel_onglet2
    {
      width: 150px;
      height: 20px;
      padding: 4px;
      margin-left: 0;
      margin-bottom: 10px;
      background: #f1f0eb;
      border: 1px solid #d0d0cc;
      box-shadow: 0px 0px 4px #605750;
      -moz-box-shadow: 0px 0px 4px #605750;
      -o-box-shadow: 0px 0px 4px #605750;
      -htm-box-shadow: 0px 0px 4px #605750;
      -webkit-box-shadow: 0px 0px 4px #605750;
      font-weight: bold;
      color: #ba7b42;
      text-shadow: 1px 1px 0px #d4d3cf;
      text-align: center;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
    }
    .qeel_onglet3
    {
      width: 150px;
      height: 20px;
      padding: 4px;
      margin-left: 0;
      background: #625c51;
      border: 1px solid #423328;
      box-shadow: 0px 0px 4px #3a372d;
      -moz-box-shadow: 0px 0px 4px #3a372d;
      -o-box-shadow: 0px 0px 4px #3a372d;
      -htm-box-shadow: 0px 0px 4px #3a372d;
      -webkit-box-shadow: 0px 0px 4px #3a372d;
      font-weight: bold;
      color: #d1d1cc;
      text-shadow: 1px 1px 0px #736f68;
      text-align: center;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
    }
    .qeel_onglet1:hover, .qeel_onglet2:hover, .qeel_onglet3:hover
    {
      margin-left: 20px;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
    }
    .qeel_contenu1
    {
      position: absolute;
      z-index: 1;
      width: 700px;
      height: 150px;
      overflow: auto;
      margin-left: 200px;
      margin-top: -40px;
      background: #e6e6e6;
      border: 1px  solid #f5f4ee;
      box-shadow: 0px 0px 4px #38342d;
      -moz-box-shadow: 0px 0px 4px #38342d;
      -o-box-shadow: 0px 0px 4px #38342d;
      -htm-box-shadow: 0px 0px 4px #38342d;
      -webkit-box-shadow: 0px 0px 4px #38342d;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      opacity: 0;
      -moz-opacity: 0;
      -khtml-opacity: 0;
      filter: alpha(opacity=0);
    }
    .qeel_contenu2
    {
      position: absolute;
      z-index: 2;
      width: 700px;
      height: 150px;
      overflow: auto;
      margin-left: 200px;
      margin-top: -80px;
      background: #e6e6e6;
      border: 1px  solid #f5f4ee;
      box-shadow: 0px 0px 4px #38342d;
      -moz-box-shadow: 0px 0px 4px #38342d;
      -o-box-shadow: 0px 0px 4px #38342d;
      -htm-box-shadow: 0px 0px 4px #38342d;
      -webkit-box-shadow: 0px 0px 4px #38342d;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      opacity: 0;
      -moz-opacity: 0;
      -khtml-opacity: 0;
      filter: alpha(opacity=0);
    }
    .qeel_contenu3
    {
      position: absolute;
      z-index: 3;
      width: 700px;
      height: 150px;
      overflow: auto;
      margin-left: 200px;
      margin-top: -120px;
      background: #e6e6e6;
      border: 1px  solid #f5f4ee;
      box-shadow: 0px 0px 4px #38342d;
      -moz-box-shadow: 0px 0px 4px #38342d;
      -o-box-shadow: 0px 0px 4px #38342d;
      -htm-box-shadow: 0px 0px 4px #38342d;
      -webkit-box-shadow: 0px 0px 4px #38342d;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      opacity: 0;
      -moz-opacity: 0;
      -khtml-opacity: 0;
      filter: alpha(opacity=0);
    }
    .qeel_contenu4
    {
      position: absolute;
      z-index: 4;
      width: 700px;
      height: 150px;
      overflow: auto;
      margin-left: 204px;
      margin-top: -129px;
      background: #e6e6e6;
      border: 1px  solid #f5f4ee;
      box-shadow: 0px 0px 4px #38342d;
      -moz-box-shadow: 0px 0px 4px #38342d;
      -o-box-shadow: 0px 0px 4px #38342d;
      -htm-box-shadow: 0px 0px 4px #38342d;
      -webkit-box-shadow: 0px 0px 4px #38342d;
    }
    .qeel_contenu
    {
      padding: 4px;
      color: #74685d;
      font-size: 11px;
      text-shadow: 1px 1px 0px #f7f6f0;
      text-align: justify;
      font-weight: normal;
    }
    .qeel_onglet1:hover .qeel_contenu1, .qeel_onglet2:hover .qeel_contenu2, .qeel_onglet3:hover .qeel_contenu3
    {
      margin-left: 180px;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
    }
    .qeel_onglet1:focus .qeel_contenu1, .qeel_onglet2:focus .qeel_contenu2, .qeel_onglet3:focus .qeel_contenu3
    {
      z-index: 10;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      opacity: 1;
      -moz-opacity: 1;
      -khtml-opacity: 1;
      filter: alpha(opacity=100);
    }


    Personnalisation

    Pensez surtout à changer les images d'en-tête, de corps et de pieds du QEEL ! Celles-ci étaient pour le commande d'un forum, donc je les ai retirées du css afin que vous puissiez mettre les votre. Mettez l'adresse de vos images à la place des # présents dans le css, entre parenthèses.
    - #qeel_head = image d'en-tête
    - #qeel_body = image de corps qui se répète
    - #qeel_foot = image de pieds
    Attention aux tailles ! Vous pouvez voir que les blocs possèdent une largeur et pour certains une hauteur. N'oubliez pas de les modifier si votre image ne possède pas cette taille. La hauteur et la largeur des blocs doivent correspondre aux images.
    Si vous ne voulez pas vous embêter avec trois images pour faire votre bloc, enlevez les blocs #qeel_head et #qeel_foot pour ne garder que le corps (#qeel_body) et mettez-lui une couleur de fond, bordures, ombres etc...
    Pour le reste, il s'agit essentiellement de couleur, y compris pour les petits onglets.

    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)


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



    avatar
    Piratress
    FémininAge : 19Messages : 191

    le Lun 4 Aoû 2014 - 19:13

    Merci du tuto !
    avatar
    skaera22
    MasculinAge : 22Messages : 72

    le Lun 4 Aoû 2014 - 21:05

    thx
    avatar
    Tine
    FémininAge : 18Messages : 37

    le Mar 5 Aoû 2014 - 12:33

    Merci c:
    avatar
    Reims
    MasculinAge : 27Messages : 10

    le Jeu 14 Aoû 2014 - 20:49

    Mercii  Very Happy 
    avatar
    Lunet
    FémininAge : 19Messages : 27

    le Jeu 14 Aoû 2014 - 21:36

    Merci !
    avatar
    Babouine
    FémininAge : 23Messages : 17

    le Sam 16 Aoû 2014 - 13:17

    Merci pour le tuto Very Happy
    avatar
    Orphanine
    FémininAge : 30Messages : 14

    le Ven 22 Aoû 2014 - 10:57

    Sympa, merci !
    avatar
    Bellovy
    FémininAge : 20Messages : 16

    le Jeu 28 Aoû 2014 - 8:01

    Merci ♥Q♥
    avatar
    The_Scream
    FémininAge : 22Messages : 41

    le Mer 3 Sep 2014 - 17:50

    Merci !



    ~That's the hell said no ~


    avatar
    Pokebip
    MasculinAge : 19Messages : 69

    le Jeu 4 Sep 2014 - 17:10

    like Merci
    avatar
    Saphire
    FémininAge : 19Messages : 146

    le Dim 7 Sep 2014 - 13:55

    Merci pour le code
    avatar
    Xyldan
    MasculinAge : 21Messages : 12

    le Sam 13 Sep 2014 - 22:03

    Merci !
    avatar
    Emy Liddell
    FémininAge : 24Messages : 22

    le Mar 16 Sep 2014 - 22:51

    merci pour le tuto : 3



    avatar
    Lihuén
    FémininAge : 27Messages : 544

    le Ven 19 Sep 2014 - 17:50

    Merci ! :)



    avatar
    LHOOQ
    MasculinAge : 24Messages : 20

    le Mar 23 Sep 2014 - 23:57

    Merci :)
    avatar
    Insolence
    FémininAge : 24Messages : 23

    le Jeu 25 Sep 2014 - 19:59

    Merci également pour ce code ^^
    avatar
    Neymar
    MasculinAge : 18Messages : 138

    le Dim 28 Sep 2014 - 17:44

    Merci o/
    avatar
    Nemelise
    FémininAge : 15Messages : 50

    le Ven 3 Oct 2014 - 20:14

    Merci :3
    avatar
    Invité

    le Ven 10 Oct 2014 - 16:27

      Encore une fois tu fais des merveilles. Merci énormément du partage.
    avatar
    SEVAN
    FémininAge : 24Messages : 46

    le Ven 10 Oct 2014 - 20:34

    merci
    avatar
    Miss Tigri
    FémininAge : 23Messages : 80

    le Dim 19 Oct 2014 - 21:31

    Merci !
    avatar
    Cruelly
    FémininAge : 23Messages : 2522

    le Lun 20 Oct 2014 - 8:55

    Magnifique merci :) Je vais tenter sa ^^



    Absente pour le moment. Je reviens bientôt c'est promis :ange:
    avatar
    Matantelie
    FémininAge : 22Messages : 36

    le Jeu 23 Oct 2014 - 2:57

    Meeeeeeeeeerci!
    avatar
    Milou
    FémininAge : 18Messages : 163

    le Jeu 23 Oct 2014 - 16:52

    thanks ^^



    avatar
    Oïa
    FémininAge : 26Messages : 57

    le Mer 5 Nov 2014 - 12:28

    superbe merci beaucoup



    Contenu sponsorisé


      La date/heure actuelle est Lun 24 Avr 2017 - 13:16