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 à ne pas rater :
Nike : Jusqu’à 50% sur les articles de fin de saison
Voir le deal

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

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

    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)

    S'il y a des problèmes, 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:08, édité 1 fois



    sign
    ShiShi_Chan
    ShiShi_Chan
    MasculinAge : 34Messages : 51

    Sam 15 Déc 2012 - 9:49

    Merki !
    Nade
    Nade
    FémininAge : 27Messages : 31

    Dim 16 Déc 2012 - 4:04

    Merci beaucoup pour les codes :3
    Daisukai
    Daisukai
    FémininAge : 28Messages : 44

    Dim 16 Déc 2012 - 14:07

    Merciii!
    GWOO
    GWOO
    MasculinAge : 28Messages : 31

    Dim 16 Déc 2012 - 14:37

    merci
    cosmos-chann
    cosmos-chann
    FémininAge : 26Messages : 115

    Dim 16 Déc 2012 - 14:48

    Merci :)
    o~°Passion HELL
    o~°Passion HELL
    FémininAge : 35Messages : 215

    Dim 16 Déc 2012 - 15:22

    Merci !!



    ....
    Hyen0w
    Hyen0w
    MasculinAge : 30Messages : 42

    Mar 18 Déc 2012 - 11:58

    Merci n^n
    Lolloe
    Lolloe
    FémininAge : 22Messages : 26

    Mer 19 Déc 2012 - 10:25

    Mishiiiiiiiiiiiiiiii
    milloo
    milloo
    FémininAge : 31Messages : 21

    Mer 19 Déc 2012 - 22:27

    Ca change, merci o/
    Kripterya
    Kripterya
    FémininAge : 37Messages : 98

    Sam 22 Déc 2012 - 6:32

    i like this one better
    erika02
    erika02
    FémininAge : 27Messages : 278

    Sam 22 Déc 2012 - 15:14

    Merci du partage



    QEEL onglets latéraux contenu apparaissant "onClic" (focus - CSS) - Page 2 45054210
    Kasshad
    Kasshad
    MasculinAge : 34Messages : 319

    Sam 22 Déc 2012 - 21:46

    J'veux bien voir moi Very Happy



    QEEL onglets latéraux contenu apparaissant "onClic" (focus - CSS) - Page 2 Prateb
    Fares
    Fares
    MasculinAge : 31Messages : 51

    Dim 23 Déc 2012 - 20:21

    LeFimoteur a écrit:Merci :)
    ♕ William
    ♕ William
    MasculinAge : 26Messages : 72

    Dim 23 Déc 2012 - 22:43

    Thank you



    QEEL onglets latéraux contenu apparaissant "onClic" (focus - CSS) - Page 2 Right_10
    William
    Alenn
    Alenn
    FémininAge : 32Messages : 192

    Lun 24 Déc 2012 - 3:38

    Merci du tutoriel !



    Rien de nouveau.
    Blue-J
    Blue-J
    FémininAge : 31Messages : 185

    Mer 26 Déc 2012 - 20:05


    ça a l'air très prometteur ! =)
    Margii
    Margii
    FémininAge : 26Messages : 84

    Mer 26 Déc 2012 - 22:34

    Je check ! Merci du partage :)
    Tweety
    Tweety
    FémininAge : 30Messages : 48

    Jeu 27 Déc 2012 - 15:21

    Merci Very Happy
    Choubakawa
    Choubakawa
    MasculinAge : 30Messages : 87

    Dim 30 Déc 2012 - 17:28

    Merci :)



    QEEL onglets latéraux contenu apparaissant "onClic" (focus - CSS) - Page 2 Witche13
    Suzu-nee
    Suzu-nee
    FémininAge : 29Messages : 27

    Lun 31 Déc 2012 - 2:53

    Merci beaucoup pour le tuto~



    signature supprimée car les liens externes sont interdits dans cette dernière, merci.
    RadioEuphoria
    RadioEuphoria
    FémininAge : 27Messages : 14

    Mar 1 Jan 2013 - 1:51

    Merci beaucoup ! :)
    pika-cerise
    pika-cerise
    FémininAge : 32Messages : 92

    Mar 1 Jan 2013 - 14:19

    super merci
    Planete_Stargate
    Planete_Stargate
    FémininAge : 41Messages : 62

    Mar 1 Jan 2013 - 16:03

    C'est très joli tout ça, félicitation



    QEEL onglets latéraux contenu apparaissant "onClic" (focus - CSS) - Page 2 SKYDOLL003-ff
    [W]endy
    [W]endy
    FémininAge : 33Messages : 117

    Mar 1 Jan 2013 - 17:07

      C'est joli comme tout, merci (:
    Planete_Stargate
    Planete_Stargate
    FémininAge : 41Messages : 62

    Mar 1 Jan 2013 - 20:17

    J'ai une question :o
    C'est normal d'avoir les contenant 1/2/3 qui soient pas sur le 4? Car quand je veux l'utiliser, ça déconne, c'est complétement décalé...



    QEEL onglets latéraux contenu apparaissant "onClic" (focus - CSS) - Page 2 SKYDOLL003-ff
    Contenu sponsorisé


      La date/heure actuelle est Ven 29 Mar 2024 - 0:56