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 :
Fnac : 2 Funko Pop achetées : le 3ème ...
Voir le deal

    Qeel à onglets fantasy

    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Sam 22 Nov 2014 - 0:07



    Qeel à onglets fantasy



    Voici un petit LS d'un qeel à onglets que j'ai fait pour la demande de The One Pandemonium et que j'ai un peu remanié.

    Pour voir l'aperçu, onglet "nains" actif : cliquez ici.
    Pour voir l'aperçu, onglet "elfes" actif et survol de l'image du groupe : cliquez ici.

    Ce LS est en trois 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.
    • Enfin, nous allons voir comment changer les textes préprogrammés dans le qeel.


    La largeur du Qeel est de 800 pixels et l'image des groupes (celle tout en bas) fait 800x200 pixels.


    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 221 du template.

    Nous allons remplacer tout ce qu'il y a entre ces deux lignes par :
    Code:
    <link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css' />
    <div id="qeel">
     
      <div id="qeel_info_members">
        <span id="totaluser">{TOTAL_USERS}</span>
        <span id="totalpost">{TOTAL_POSTS}</span>
        <span id="newuser">{NEWEST_USER}</span>.
        <span id="totalonline">{TOTAL_USERS_ONLINE}</span>.
        <div id="userlists">
          <div id="loggedlist">{LOGGED_IN_USER_LIST}</div>
          <div  id="totalconn"><table cellspacing="0" cellpadding="0">{L_CONNECTED_MEMBERS}</table></div>
        </div>
        <div id="qeel_title">
          Qui va là?
        </div>
       
        <script type="text/javascript">
          document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/Nous avons/,"Nos");
          document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/membres enregistrés/,"guerriers");
          document.getElementById('totalpost').innerHTML=document.getElementById('totalpost').innerHTML.replace(/Nos membres ont posté un total de/,"ont gagné");
          document.getElementById('totalpost').innerHTML=document.getElementById('totalpost').innerHTML.replace(/messages/,"batailles");
          document.getElementById('totalpost').innerHTML=document.getElementById('totalpost').innerHTML.replace(/message/,"bataille");
          document.getElementById('newuser').innerHTML=document.getElementById('newuser').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"et notre plus nouvelle recrue est");
          document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Il y a en tout/,"Il y a");
          document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/utilisateurs en ligne ::/,"aventuriers qui parcourent nos terres, dont");
          document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/utilisateur en ligne ::/,"aventurier qui parcourt nos terres, dont");
          document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Enregistrés/,"guerriers");
          document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Enregistré/,"guerrier");
          document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Invisibles/,"fantômes");
          document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Invisible/,"fantôme");
          document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Invités /,"inconnus");
          document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Invité /,"inconnu");
          document.getElementById('loggedlist').innerHTML=document.getElementById('loggedlist').innerHTML.replace(/Utilisateurs enregistrés/,"Guerriers présentement sur nos terres");
          document.getElementById('totalconn').innerHTML=document.getElementById('totalconn').innerHTML.replace(/Membres connectés/,"Guerriers ayant été présents");
        </script>
      </div>
     
      <div id="qeel_bottom">
       
        <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>
       
        <span class="qeelonglet_1 qeelonglet" id="qeelonglet_Groupe1" onclick="javascript:change_qeelonglet('Groupe1');">
          <font color="#5e90c4">Groupe 1</font>
        </span>
        <span class="qeelonglet_0 qeelonglet" id="qeelonglet_Groupe2" onclick="javascript:change_qeelonglet('Groupe2');">
          <font color="orange">Groupe 2</font>
        </span>
        <span class="qeelonglet_0 qeelonglet" id="qeelonglet_Groupe3" onclick="javascript:change_qeelonglet('Groupe3');">
          <font color="#4dc740">Groupe 3</font>
        </span>
        <span class="qeelonglet_0 qeelonglet" id="qeelonglet_Groupe4" onclick="javascript:change_qeelonglet('Groupe4');">
          <font color="#6e4819">Groupe 4</font>
        </span>
        <span class="qeelonglet_0 qeelonglet" id="qeelonglet_Groupe5" onclick="javascript:change_qeelonglet('Groupe5');">
          <font color="#c50c0c">Groupe 5</font>
        </span>
       
        <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe1">
          <img 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 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 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 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 src="url_image_groupe_5" alt="Image du groupe 5" />
          <div class="qeel_desc">
            Description du groupe 5
          </div>
        </div>
       
        <script type="text/javascript">
            //<!--
                    var anc_qeelonglet = 'Groupe1';
                    change_qeelonglet(anc_qeelonglet);
            //-->
        </script>
       
      </div>
    </div>

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

    Les noms des groupes ressemblent à ceci :
    Code:
    <span class="qeelonglet_0 qeelonglet" id="qeelonglet_Groupe5" onclick="javascript:change_qeelonglet('Groupe5');">
          <font color="#c50c0c">Groupe 5</font>
        </span>

    Quant aux descriptions des groupes, elles correspondent à ceci :
    Code:
    <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe5">
          <img src="url_image_groupe_5" alt="Image du groupe 5" />
          <div class="qeel_desc">
            Description du groupe 5
          </div>
        </div>




    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 ************************************************************/




    3. Personnaliser les textes (Template Index_Body)



    De base, ForumActif a des phrases déjà formatées pour le qeel.
    Par exemple, il y a "Nous avons X membre enregistré", "Nos membres ont posté un total de X messages" ou encore "L'utilisateur enregistré le plus récent est NOM".

    Dans mon qeel, j'ai modifiés ces phrases pour que cela donne "Nos X guerriers" "ont gagné X batailles" et "et notre plus nouvelle recrue est Admin".


    Mais peut-être que vous n'aimez pas ces phrases ou que vous voulez les adapter autrement. Alors direction le template "Index_body"!

    Vous trouverez à plusieurs endroits des parties de code qui ressemblent à ceci :
    Code:
    <script type="text/javascript">document.getElementById('newuser').innerHTML=document.getElementById('newuser').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"et notre plus nouvelle recrue est");</script>

    Ce sont ces bouts de codes qui viennent modifier les phrases préfabriqués de ForumActif. Donc pour commencer, il faut tout d'abord regarder sur quelle phrase préfabriquée le code agit.

    Pour cela, nous allons regarder le début du code où il y a :
    Code:
    document.getElementById('newuser').innerHTML=document.getElementById('newuser').innerHTML.


    Ce qu'il y a entre parenthèses correspond l'id de la phrase qui est affectée.
    Le "newuser" veut donc dire que cela affecte la phrase :
    "L'utilisateur enregistré le plus récent est NOM".


    Dans ce qeel, chaque phrase préfabriqué à son propre id. Les voici :


    newuser : "L'utilisateur enregistré le plus récent est NOM"

    totalpost : "Nos membres ont posté un total de X messages"

    totaluser : "Nous avons X membre enregistré"

    totalonline : "Il y a en tout X utilisateur en ligne :: X Enregistré, X Invisible et X Invité"

    loggedlist : "Utilisateurs enregistrés : NOM"

    totalconn : "Membres connectés au cours des 24 dernières heures : NOM"


    Maintenant fois qu'on sait qu'elle phrase est affectée, nous allons la modifier.

    Donc, on va à la fin de la ligne de code qu'on parlait tout à l'heure et on trouve le :
    Code:
    replace(/L'utilisateur enregistré le plus récent est/,"La nouvelle recrue est");

    On met la partie qu'on veut remplacer entre les / / par ce qui la remplace entre les " ".

    C'est tout aussi simple que cela! À savoir que s'il y a des phrases au pluriel ET au singulier, il faut s'assurer de bien modifier les deux options.


    C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans "Un problème avec un code" ou dans "Personnalisations" si vous avez de la difficulté à le personnaliser.

    À plus !


    Dernière édition par Onyx le Mar 23 Juin 2020 - 22:32, édité 6 fois



    Anonymous
    Invité

    Sam 22 Nov 2014 - 19:04

    Hey !

    Nickel, comme d'hab' ! Super sympa et très bien expliqué, merci Onyx ! :)

    Je déplace \o/
    Depp
    Depp
    FémininAge : 32Messages : 300

    Sam 22 Nov 2014 - 22:27

    Bon, je serais la première à poster :)
    Je te remercie pour ce nouveau qeel :) il m'a l'air vraiment sympa ! :)



    Qeel à onglets fantasy Tumblr_nenygwIlcz1s4u464o1_500
    Doctor Who
    Doctor Who
    MasculinAge : 30Messages : 160

    Mer 26 Nov 2014 - 16:08

    Merci pour ce Qeel :)





    DOCTOR WHO ☼
    ©️ Yamashita d'épicode
    ~Nodoka~
    ~Nodoka~
    FémininAge : 27Messages : 185

    Mer 26 Nov 2014 - 17:33

    Super sympas depuis le temps que je cherchais une QEEl fantasy!
    avatar
    Valkoor
    MasculinAge : 27Messages : 34

    Jeu 27 Nov 2014 - 2:26

    Merci bcp pour ce très beau QUEEL <3
    avatar
    N3m0
    FémininAge : 31Messages : 303

    Jeu 27 Nov 2014 - 13:53

    Merci =3
    Sachikou
    Sachikou
    FémininAge : 24Messages : 48

    Jeu 27 Nov 2014 - 19:51

    Merci :)



    Qeel à onglets fantasy Signa111
    Célestine
    Célestine
    FémininAge : 26Messages : 51

    Ven 28 Nov 2014 - 3:53

    Merci beaucoup !
    Lilith Aube
    Lilith Aube
    FémininAge : 37Messages : 498

    Ven 28 Nov 2014 - 17:44

    Merci *^*
    P'tit loup
    P'tit loup
    MasculinAge : 41Messages : 451

    Sam 29 Nov 2014 - 15:01

    Magnifique, merci pour le partage ^^



    Qeel à onglets fantasy 30xivrd
    Madras
    Madras
    FémininAge : 39Messages : 285

    Lun 1 Déc 2014 - 13:51

    Merci du partage
    Féhéla
    Féhéla
    FémininAge : 50Messages : 238

    Mar 2 Déc 2014 - 22:17

    Merci du partage !!!
    Reishi
    Reishi
    MasculinAge : 30Messages : 148

    Jeu 4 Déc 2014 - 20:30

    hey, merci !
    AwenWolf
    AwenWolf
    FémininAge : 35Messages : 76

    Ven 5 Déc 2014 - 13:50

    Superbe *_*
    Iguolta
    Iguolta
    MasculinAge : 24Messages : 206

    Ven 5 Déc 2014 - 18:34

    Merci *^*
    Kahlan
    Kahlan
    FémininAge : 37Messages : 371

    Sam 6 Déc 2014 - 16:11

    Merci beaucoup pour ce beau codage !
    0smose
    0smose
    FémininAge : 28Messages : 167

    Dim 7 Déc 2014 - 15:31

    C'est de loin mon Qeel préféré ! BRAVO !



    Qeel à onglets fantasy 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.
    BloodyMoony
    BloodyMoony
    FémininAge : 31Messages : 76

    Dim 7 Déc 2014 - 17:31

    Je trouve ton codage incroyable !!
    Merci de nous le partager !
    Meylah
    Meylah
    FémininAge : 22Messages : 60

    Dim 7 Déc 2014 - 18:29

    Merci
    Dydy
    Dydy
    FémininAge : 33Messages : 493

    Mar 9 Déc 2014 - 20:29

    merci pour le partage ^^



    Qeel à onglets fantasy 27978_signature_never_utopia_dydy_2
    RozenBreizh
    RozenBreizh
    FémininAge : 32Messages : 1411

    Mar 9 Déc 2014 - 20:33

    Codage fort intéressent! J'aimerais bien voir ce qu'il donne en live Very Happy Merci pour le travail fourni Onyx <3
    Callisto
    Callisto
    FémininAge : 27Messages : 45

    Dim 14 Déc 2014 - 3:42

    Je crois bien que c'est mon QEEL préféré ! Merci pour ce tutoriel !
    Anonymous
    Invité

    Lun 15 Déc 2014 - 0:40

    Merci Very Happy
    DixieM.
    DixieM.
    FémininAge : 32Messages : 49

    Mer 17 Déc 2014 - 15:19

    J'adore ce queel *.* merci du partage
    Contenu sponsorisé


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