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 Survivor

    Partagez
    avatar
    Onyx
    FémininAge : 24Messages : 3132

    le Dim 7 Sep 2014 - 23:36

    Rappel du premier message :


    Qeel Survivor


    Voici un petit LS d'un qeel que j'ai fait pour la demande de Klemmeria, que j'ai un peu remanié.

    Pour voir l'aperçu : 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.

    Le Qeel est fait pour avoir une image de fond de 800*400
    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=Lovers+Quarrel|Reenie+Beanie|Covered+By+Your+Grace' rel='stylesheet' type='text/css' />
    <div class="qeel_box">
      <script type="text/javascript">
            //<!--
                    function change_ongletony(name)
                    {
                            document.getElementById('ongletony_'+anc_ongletony).className = 'ongletony_0 ongletony';
                            document.getElementById('ongletony_'+name).className = 'ongletony_1 ongletony';
                            document.getElementById('contenu_ongletony_'+anc_ongletony).style.display = 'none';
                            document.getElementById('contenu_ongletony_'+name).style.display = 'block';
                            anc_ongletony = name;
                    }
            //-->
      </script>
      <div class="qeel_box_1">
        <div id="totaluser">{TOTAL_USERS}</div>
        <div id="totalpost">{TOTAL_POSTS}</div>
        <div id="newuser" style="margin-top: 10px;">{NEWEST_USER}</div>
        Merci d'être sympathique avec lui/elle
        <script type="text/javascript">
          document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/Nous avons/,"Il y a en tout");
          document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/membre enregistré/,"survivant");
          document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/membres enregistrés/,"survivants");
        </script>
        <script type="text/javascript">
          document.getElementById('totalpost').innerHTML=document.getElementById('totalpost').innerHTML.replace(/Nos membres ont posté un total de/,"Nos membres ont survécus à");     
          document.getElementById('totalpost').innerHTML=document.getElementById('totalpost').innerHTML.replace(/message/,"épreuve");
          document.getElementById('totalpost').innerHTML=document.getElementById('totalpost').innerHTML.replace(/messages/,"épreuves");
        </script>
        <script type="text/javascript">
          document.getElementById('newuser').innerHTML=document.getElementById('newuser').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"La nouvelle recrue est");
        </script>
      </div>
      <div class="qeel_box_2">
        <div id="totalonline">{TOTAL_USERS_ONLINE}</div>
        <div id="loggedlist">{LOGGED_IN_USER_LIST}</div>
        <script type="text/javascript">
          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(/utilisateur en ligne ::/,"être en ligne :<br />");
          document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/utilisateurs en ligne ::/,"êtres en ligne :<br />");
          document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Enregistré/,"survivant");
          document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Enregistrés/,"survivants");
          document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Invisible/,"spectre");
          document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Invisibles/,"spectres");
          document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Invité/,"invité");
          document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Invités/,"invités");
        </script>
        <script type="text/javascript">
          document.getElementById('loggedlist').innerHTML=document.getElementById('loggedlist').innerHTML.replace(/Utilisateurs enregistrés/,"Survivants connectés");
        </script>
      </div>
      <div class="qeel_box_3">
        <div id="totalconn"><table>{L_CONNECTED_MEMBERS}</table></div>
        <script type="text/javascript">
          document.getElementById('totalconn').innerHTML=document.getElementById('totalconn').innerHTML.replace(/Membres connectés au cours des/,"Survivants connectés ces dernières");
          document.getElementById('totalconn').innerHTML=document.getElementById('totalconn').innerHTML.replace(/dernières heures :/,"heures :");
        </script>
      </div>
      <div class="qeel_box_4">
        Qui est avec nous?
      </div>
      <div class="qeel_box_5">
        <span class="ongletony_1 ongletony" id="ongletony_groupe1" onclick="javascript:change_ongletony('groupe1');">Groupe 1</span>,
        <span class="ongletony_0 ongletony" id="ongletony_groupe2" onclick="javascript:change_ongletony('groupe2');">Groupe 2</span>,
        <span class="ongletony_0 ongletony" id="ongletony_groupe3" onclick="javascript:change_ongletony('groupe3');">Groupe 3</span>,
        <span class="ongletony_0 ongletony" id="ongletony_groupe4" onclick="javascript:change_ongletony('groupe4');">Groupe 4</span>,
        <br /><span class="ongletony_0 ongletony" id="ongletony_groupe5" onclick="javascript:change_ongletony('groupe5');">Groupe 5</span>,
        <span class="ongletony_0 ongletony" id="ongletony_groupe6" onclick="javascript:change_ongletony('groupe6');">Groupe 6</span>,
        <span class="ongletony_0 ongletony" id="ongletony_groupe7" onclick="javascript:change_ongletony('groupe7');">Groupe 7</span>,
        <span class="ongletony_0 ongletony" id="ongletony_groupe8" onclick="javascript:change_ongletony('groupe8');">Groupe 8</span>
      </div>
      <div class="qeel_box_6">
        <div class="contenu_ongletony" id="contenu_ongletony_groupe1">
          Description du groupe 1
        </div>
        <div class="contenu_ongletony" id="contenu_ongletony_groupe2">
          Description du groupe 2
        </div>
        <div class="contenu_ongletony" id="contenu_ongletony_groupe3">
          Description du groupe 3
        </div>
        <div class="contenu_ongletony" id="contenu_ongletony_groupe4">
          Description du groupe 4
        </div>
        <div class="contenu_ongletony" id="contenu_ongletony_groupe5">
          Description du groupe 5
        </div>
        <div class="contenu_ongletony" id="contenu_ongletony_groupe6">
          Description du groupe 6
        </div>
        <div class="contenu_ongletony" id="contenu_ongletony_groupe7">
          Description du groupe 7
        </div>
        <div class="contenu_ongletony" id="contenu_ongletony_groupe8">
          Description du groupe 8
        </div>
      </div>
      <div class="qeel_box_1 qeel_boxes"></div>
      <div class="qeel_box_2 qeel_boxes"></div>
      <div class="qeel_box_3 qeel_boxes"></div>
      <div class="qeel_box_6 qeel_boxes"></div>
    </div>
    <script type="text/javascript">
            //<!--
                    var anc_ongletony = 'groupe1';
                    change_ongletony(anc_ongletony);
            //-->
    </script>

    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="ongletony_0 ongletony" id="ongletony_groupe8" onclick="javascript:change_ongletony('groupe8');">Groupe 8</span>

    Quant aux descriptions des groupes, elles correspondent à ceci :
    Code:
    <div class="contenu_ongletony" id="contenu_ongletony_groupe8">
          Description du groupe 8
        </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:
    /************************************************** QEEL **************************************************/
    /*Fond du qeel*/
    .qeel_box {
      position: relative;
      width: 800px;
      height: 400px;
      background: url('http://img15.hostingpics.net/pics/575502189.png');
      box-shadow: 0px 0px 10px 5px #050505;
      border-radius: 30px;
      font-size: 16px;
      font-family: Covered by your grace;
      color: black;
      text-align: center;
    }

    /*Bloc du nombre total d'utilisateurs, de posts et du dernier utilisateur inscrit*/
    .qeel_box_1 {
      position: absolute;
      top: 10px;
      left: 10px;
      padding: 10px;
      width: 300px;
      height: 105px;
      z-index: 2;
    }

    /*Bloc du nombre d'utilisateurs en ligne et connectés*/
    .qeel_box_2 {
      position: absolute;
      top: 150px;
      left: 10px;
      padding: 10px;
      width: 300px;
      height: 95px;
      z-index: 2;
    }
    /*Bloc du nombre d'utilisateurs connectés*/
    #loggedlist {
      overflow: auto;
      margin-top: 5px;
      height: 50px;
    }

    /*Bloc du nombre de personnes connectés au cours des 24 dernières heures*/
    .qeel_box_3 {
      position: absolute;
      bottom: 10px;
      left: 10px;
      width: 300px;
      height: 90px;
      padding: 10px;
      z-index: 2;
    }
    /*Intérieur du bloc*/
    .qeel_box_3 td.row1 {
      padding: 0px;
      display: block;
      margin-top: -5px;
      width: 300px;
      height: 95px;
      overflow: auto;
      background: transparent;
      text-align: center;
    }
    /*Écriture du bloc*/
    .qeel_box_3 td.row1 span.gensmall {
      display: block;
      font-size: 16px;
      font-family: Covered by your grace;
      color: black;
    }

    /*Bloc du titre QUI EST AVEC NOUS?*/
    .qeel_box_4 {
      position: absolute;
      display: inline-block;
      top: 5px;
      right: 10px;
      height: 54px;
      width: 430px;
      font-family: reenie beanie;
      font-size: 54px;
      color: darkred;
      font-weight: bold;
      font-style: italic;
      text-align: center;
      text-decoration: underline;
      text-shadow: 2px 2px 2px #000000;
      z-index: 2;
    }

    /*Bloc des groupes*/
    .qeel_box_5 {
      position: absolute;
      right: 10px;
      bottom: 240px;
      width: 430px;
      color: white;
      font-family: lovers quarrel;
      font-size: 32px;
      z-index: 2;
    }
    /*Écriture des groupes*/
    .ongletony, .ongletony_0, .ongletony_1 {
      font-weight: bold;
      cursor: default;
      text-shadow: 1px 1px 1px #000000;
      transition: 0.5s;
      -webkit-transition: 0.5s;
    }
    /*Écriture des groupes sélectionnés*/
    .ongletony_1 {
      text-shadow: 1px 1px 1px #ffffff;
    }
    /*Écriture des groupes au survol*/
    .ongletony_0:hover {
      text-shadow: 1px 1px 1px #ffffff;
      cursor: pointer;
    }
    /*Groupe 1*/
    #ongletony_groupe1 {
      color: #990654;
    }
    /*Groupe 2*/
    #ongletony_groupe2 {
      color: #50078F;
    }
    /*Groupe 3*/
    #ongletony_groupe3 {
      color: #0088FF;
    }
    /*Groupe 4*/
    #ongletony_groupe4 {
      color: #0FC27A;
    }
    /*Groupe 5*/
    #ongletony_groupe5 {
      color: #B32B2B;
    }
    /*Groupe 6*/
    #ongletony_groupe6 {
      color: #155A80;
    }
    /*Groupe 7*/
    #ongletony_groupe7 {
      color: #000CF0;
    }
    /*Groupe 8*/
    #ongletony_groupe8 {
      color: #E685B1;
    }

    /*Bloc de description de groupe*/
    .qeel_box_6 {
      position: absolute;
      bottom: 10px;
      right: 10px;
      padding: 10px;
      width: 420px;
      height: 200px;
      z-index: 2;
    }
    /*Contenu de description de groupe*/
    .contenu_ongletony {
      width: 420px;
      height: 200px;
      overflow: auto;
      display: none;
    }

    /*Bulles transparentes sous les blocs.*/
    .qeel_boxes {
      background: white;
      box-shadow: 0px 0px 5px 5px #000000;
      text-align: center;
      border-radius: 30px;
      opacity: 0.3;
      filter: alpha(opacity=30);
      z-index: 1;
    }

    /************************************************** FIN DU 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 "Nos membres ont posté un total de X messages", "L'utilisateur enregistré le plus récent est NOM" ou encore "Nous avons X membre enregistré".

    Dans mon qeel, j'ai modifiés ces phrases pour que cela donne "Nos membres ont survécus à X épreuves", "La nouvelle recrue est NOM" et "Il y a en tout X survivant".


    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/,"La 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')

    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 "Problème avec mon code".

    À plus !


    Dernière édition par Onyx le Sam 5 Mai 2018 - 0:08, édité 2 fois
    avatar
    Shide
    FémininAge : 29Messages : 60

    le Mar 23 Fév 2016 - 16:22

    merciii
    avatar
    Faïryna
    FémininAge : 15Messages : 63

    le Mar 1 Mar 2016 - 13:02

    Merci!
    avatar
    Trimens
    FémininAge : 19Messages : 38

    le Dim 6 Mar 2016 - 19:58

    Merci ! ♥
    avatar
    Océ
    FémininAge : 43Messages : 280

    le Mar 8 Mar 2016 - 11:39

    Merci et jolie



    Bonjours voici les pv's que nous cherchons : [url=http://www.never-utopia.com/t63181-les-postes-vacants-pour-les-chronuque-de-aya#960582 L’annonce est ici[/url]
    avatar
    Kaleessi
    FémininAge : 26Messages : 69

    le Mar 8 Mar 2016 - 16:19

    Merciii!! :)
    avatar
    Alpha Dow
    FémininAge : 15Messages : 23

    le Dim 3 Avr 2016 - 21:17

    Merci
    avatar
    Kazumi
    FémininAge : 17Messages : 45

    le Mar 5 Avr 2016 - 21:51

    Merci !
    Etoile*
    FémininAge : 26Messages : 73

    le Sam 9 Avr 2016 - 15:08

    Merci :)
    avatar
    R.Falsworth
    FémininAge : 21Messages : 92

    le Lun 23 Mai 2016 - 16:32

    merci !
    Darouine Lius
    MasculinAge : 28Messages : 65

    le Mar 24 Mai 2016 - 18:29

    J'adore merci :)
    avatar
    Vani
    FémininAge : 34Messages : 154

    le Mar 19 Juil 2016 - 20:47

    Il est chouette celui là *-* Merci !
    avatar
    Thessia
    FémininAge : 28Messages : 74

    le Mar 2 Aoû 2016 - 21:15

    Merci beaucoup j'adore



    Ce n'est pas parce que tu ne le vois pas que ce n'est pas réel,
    Ce n'est pas par ce que tu n'y arrive pas que ce n'est pas possible.
    avatar
    Calkrys
    FémininAge : 20Messages : 49

    le Mer 3 Aoû 2016 - 2:54

    Merci !
    avatar
    Xona
    FémininAge : 29Messages : 32

    le Jeu 4 Aoû 2016 - 22:55

    Merci beaucoup !
    avatar
    Marion Navi
    FémininAge : 24Messages : 182

    le Jeu 1 Sep 2016 - 21:31

    Merci
    avatar
    KimmyKinder
    FémininAge : 16Messages : 181

    le Lun 3 Oct 2016 - 17:39

    Merciiii
    avatar
    Bryan1997
    MasculinAge : 21Messages : 51

    le Mer 26 Oct 2016 - 16:12

    Merci
    avatar
    xJokerxG
    MasculinAge : 23Messages : 12

    le Mar 20 Déc 2016 - 5:11

    Merci beaucoup ^^
    avatar
    Adou6928
    MasculinAge : 26Messages : 19

    le Lun 26 Déc 2016 - 21:26

    J'aime beaucoup celui-ci. Tu as du talent.
    avatar
    Sakura Sinister
    FémininAge : 31Messages : 35

    le Ven 3 Fév 2017 - 1:12

    merci
    avatar
    Shiba Rikubi
    MasculinAge : 23Messages : 22

    le Ven 17 Mar 2017 - 16:03

    Merci beaucoup pour ce super QEEL! ^^
    avatar
    Alsan
    MasculinAge : 21Messages : 52

    le Ven 21 Avr 2017 - 0:54

    Mershi
    avatar
    Amakhaza
    FémininAge : 15Messages : 52

    le Dim 7 Mai 2017 - 23:16

    c'est superbe merci , j'aimerais tellement savoir coder ^^
    avatar
    Kizuro hoki
    MasculinAge : 22Messages : 45

    le Ven 9 Juin 2017 - 17:02

    Merci !
    avatar
    Araki
    MasculinAge : 28Messages : 124

    le Dim 11 Juin 2017 - 16:51

    Tres beau merci !
    Contenu sponsorisé


      La date/heure actuelle est Ven 22 Juin 2018 - 2:02