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 : -50%
Trottinette électrique OCEAN DRIVE A9 avec ...
Voir le deal
299.99 €

    Qeel paysan

    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Sam 20 Sep 2014 - 3:45

    Rappel du premier message :

    Qeel Paysan



    Voici un petit LS d'un QEEL que j'ai fait pour la demande de Petitfermier, que j'ai un peu remanié. La description des groupes apparaît là où il est inscrit "Vous pouvez survoler les groupes afin de voir leur description ~" quand on survole lesdits groupes.

    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.

    Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.


    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=Pacifico|Handlee|Open+Sans' rel='stylesheet' type='text/css' />
    <div align="center">
    <table class="qeel_box" width="100%" border="0" cellpadding="0" cellspacing="10">
      <tr>
        <td colspan="3">
          <span class="qeel_title"><a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></span>
        </td>
      </tr>
      <tr>
        <td colspan="3" class="qeel_box_td qeel_box2">
          <div id="loggedlist"><table>{LOGGED_IN_USER_LIST}</table></div>
          <div class="qeel_line"></div>
          <div id="totalconn"><table>{L_CONNECTED_MEMBERS}</table></div>
          <script type="text/javascript">
            document.getElementById('loggedlist').innerHTML=document.getElementById('loggedlist').innerHTML.replace(/Utilisateurs enregistrés/,"Paysans connectés");
            document.getElementById('totalconn').innerHTML=document.getElementById('totalconn').innerHTML.replace(/Membres connectés au cours des 24 dernières heures/,"Paysans connectés récemment");
            document.getElementById('totalconn').innerHTML=document.getElementById('totalconn').innerHTML.replace(/Membres connectés au cours des 48 dernières heures/,"Paysans connectés récemment");
            document.getElementById('totalconn').innerHTML=document.getElementById('totalconn').innerHTML.replace(/Membres connectés au cours des 99 dernières heures/,"Paysans connectés récemment");
          </script>
        </td>
      </tr>
      <tr>
        <td class="qeel_box_td qeel_box3" width="50%">
          <div id="birthtoday"><table>{L_WHOSBIRTHDAY_TODAY}</table></div>
          <div class="qeel_line"></div>
          <div id="birthweek"><table>{L_WHOSBIRTHDAY_WEEK}</table></div>
          <script type="text/javascript">
            document.getElementById('birthtoday').innerHTML=document.getElementById('birthtoday').innerHTML.replace(/membre/,"paysan");
            document.getElementById('birthtoday').innerHTML=document.getElementById('birthtoday').innerHTML.replace(/membres/,"paysans");
            document.getElementById('birthweek').innerHTML=document.getElementById('birthweek').innerHTML.replace(/membre/,"paysans");
            document.getElementById('birthweek').innerHTML=document.getElementById('birthtweek').innerHTML.replace(/membres/,"paysan");
          </script>
        </td>
        <td class="qeel_box4">
          <img src="http://jeremysquires.smugmug.com/Aquarium-Journal-2009-Updates/i-32MqCBS/2/S/galaxy_rasbora_v2_666%20x%20800-S.jpg" alt=" " />
        </td>
        <td class="qeel_box_td qeel_box5" valign="top" align="center" width="50%">
          <div id="groupe1" class="groupes">
            <a href="#">Groupe 1</a>
          </div>
          <div id="groupe2" class="groupes">
            <a href="#">Groupe 2</a>
          </div>
          <div id="groupe3" class="groupes">
            <a href="#">Groupe 3</a>
          </div>
          <div id="groupe4" class="groupes">
            <a href="#">Groupe 4</a>
          </div>
            <div class="qeel_infobulles">
              Vous pouvez survoler les groupes afin de voir leur description ~
            </div>
            <div class="qeel_infobulles" id="qeel_infobulle1">
              Description du groupe 1
            </div>
            <div class="qeel_infobulles" id="qeel_infobulle2">
              Description du groupe 2
            </div>
            <div class="qeel_infobulles" id="qeel_infobulle3">
              Description du groupe 3
            </div>
            <div class="qeel_infobulles" id="qeel_infobulle4">
              Description du groupe 4
            </div>
        </td>
      </tr>
      <tr>
        <td colspan="3" class="qeel_box_td">
          <span id="recorduser">{RECORD_USERS}</span>.
          <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="chatters_stats">
            <span id="totalchatter">{TOTAL_CHATTERS_ONLINE}</span>
            <span id="chatterlist">{CHATTERS_LIST}</span>
          </div>
          <script type="text/javascript">
            document.getElementById('recorduser').innerHTML=document.getElementById('recorduser').innerHTML.replace(/d'utilisateurs en ligne est/,"de paysans en ligne a été");
            document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/Nous avons/,"Nous avons un total de");
            document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/membre enregistré/,"paysan inscrit");
            document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/membres enregistrés/,"paysans inscrits");
            document.getElementById('totalpost').innerHTML=document.getElementById('totalpost').innerHTML.replace(/Nos membres ont posté un total de/," qui ont posté");
            document.getElementById('newuser').innerHTML=document.getElementById('newuser').innerHTML.replace(/L'utilisateur enregistré le plus récent est/," Le dernier paysan qui nous a rejoint 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 ::/,"paysans en ligne, soit");
            document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/utilisateur en ligne ::/,"paysan en ligne, dont");
            document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Enregistrés/,"Inscrits");
            document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Enregistré/,"Inscrit");
            document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Invités /,"Invités.");
            document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Invité /,"Invité.");
            document.getElementById('totalchatter').innerHTML=document.getElementById('totalchatter').innerHTML.replace(/utilisateur/,"paysan");
            document.getElementById('totalchatter').innerHTML=document.getElementById('totalchatter').innerHTML.replace(/ChatBox/,"ChatBox : ");
          </script>
        </td>
      </tr>
    </table>
    </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:
            <div id="groupe1" class="groupes">
            <a href="#">Groupe 1</a>
          </div>

    Quant aux descriptions des groupes, elles correspondent à ceci :
    Code:
            <div class="qeel_infobulles" id="qeel_infobulle1">
              Description du groupe 1
            </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 {
      margin-top: 20px;
      background: #ac8b60;
      border: 1px solid #3f2600;
      box-shadow: 0px 0px 10px #3f2600;
      border-radius: 25px;
      text-align: left;
    }
    /*Cellules du qeel*/
    .qeel_box_td {
      background: #83871f;
      border: solid 1px #3f4511;
      border-radius: 15px;
      padding: 10px;
      font-size: 13px;
      font-family: Open Sans;
      color: #0b1906;
      text-align: left;
    }
    /*Ligne pointillée dans les membres connectés et les anniversaires*/
    .qeel_line {
      border-top: 1px #3f4511 dashed;
      height: 0px;
      margin-top: 5px;
      margin-bottom: 5px;
    }

    /*Titre du qeel*/
    .qeel_title a {
      display: inline-block;
      margin-left: 10px;
      font-size: 32px;
      font-family: Pacifico;
      color: #291900;
      letter-spacing: 0px;
      transition: 0.5s;
      -webkit-transition: 0.5s;
    }
    /*Titre du qeel au survol*/
    .qeel_title a:hover {
      text-decoration: none!important;
      letter-spacing: 5px;
    }

    /*Bloc des membres connectés*/
    .qeel_box2 {
      padding: 5px;
    }
    /*Bloc des membres connectés actuellement*/
    #loggedlist {
      padding-right: 5px;
      max-height: 5em;
      overflow: auto;
      text-align: justify;
    }
    /*Les membres connectés récemment*/
    #totalconn {
      padding-right: 5px;
      max-height: 5em;
      overflow: auto;
      text-align: justify;
    }

    /*Les anniversaires aujourdhui*/
    #birthtoday {
      height: 133px;
      padding-right: 5px;
      overflow: auto;
      text-align: center;
    }
    /*Les anniversaires au cours des 7 prochains jours*/
    #birthweek {
      height: 134px;
      padding-right: 5px;
      overflow: auto;
      text-align: center;
    }

    /*Image du milieu*/
    .qeel_box4 img {
      width: 250px;
      height: 300px;
      border: solid 1px #3f4511;
      border-radius: 15px;
    }

    /*Bloc des groupes*/
    .qeel_box5 {
      text-align: center;
    }
    /*Groupes*/
    .groupes {
      height: 35px;
      text-align: center;
      text-shadow: 1px 1px 1px #3f4511;
    }
    /*Couleur du groupe 1*/
    #groupe1 a, #groupe1 a:hover {
      color: #6c0000;
    }
    /*Couleur du groupe 2*/
    #groupe2 a, #groupe2 a:hover {
      color: #0ba7b5;
    }
    /*Couleur du groupe 3*/
    #groupe3 a, #groupe3 a:hover {
      color: #fc79f3;
    }
    /*Couleur du groupe 4*/
    #groupe4 a, #groupe4 a:hover {
      color: #c7c0a3;
    }
    /*Description des groupes*/
    .qeel_infobulles {
      height: 130px;
      overflow: auto;
      background: #9a9e33;
      border-radius: 10px;
      text-shadow: none;
      color: #0b1906;
      padding: 5px;
      transition: 0.5s;
      -webkit-transition: 0.5s;
    }
    /*Description des groupes sans survol*/
    #qeel_infobulle1, #qeel_infobulle2, #qeel_infobulle3, #qeel_infobulle4 {
      position: relative;
      z-index: 1;
      margin-top: -140px;
      opacity: 0;
      filter: alpha(opacity=0);
      transform: rotate(-180deg);
      -ms-transform: rotate(-180deg);
      -webkit-transform: rotate(-180deg);
    }
    /*Apparition de la description des groupes*/
    #groupe1:hover ~ #qeel_infobulle1, #groupe2:hover ~ #qeel_infobulle2, #groupe3:hover ~ #qeel_infobulle3, #groupe4:hover ~ #qeel_infobulle4 {
      opacity: 1;
      filter: alpha(opacity=100);
      transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
    }

    /*Liste des membres sur la CB*/
    #chatters_stats {
      padding-right: 3px;
      max-height: 5em;
      overflow: auto;
      text-align: justify;
    }

    /*Écriture des aniversaires et des membres connectés récemment*/
    #totalconn td.row1, #birthtoday td.row1 {
      background: transparent;
      padding: 0px;
      display: inline;
    }
    #totalconn td.row1 span.gensmall, #birthtoday td.row1 span.gensmall {
      font-size: 13px;
      padding: 0px;
      font-family: Open Sans;
      color: #0b1906;
    }
    /************************************************** 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 "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 "Nous avons un total de X paysan", "qui ont posté X messages" et "Le dernier paysan qui nous a rejoint est NOM".


    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/," Le dernier paysan qui nous a rejoint 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é"

    • recorduser : "Le record du nombre d'utilisateurs en ligne est de X le DATE"

    • loggedlist : "Utilisateurs enregistrés : NOM"

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

    • totalchatter : "Il y a actuellement X utilisateur(s) sur la ChatBox"


    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/," Le dernier paysan qui nous a rejoint 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.

    Si vous avez des problèmes avec ce LS, venez poster ici.


    À plus !


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



    Lamire
    Lamire
    FémininAge : 30Messages : 96

    Lun 19 Jan 2015 - 23:52

    ^^ Merci~
    Pastiche
    Pastiche
    FémininAge : 29Messages : 78

    Mer 21 Jan 2015 - 12:07

    Merci beaucoup ! ♥
    Professeur Felyne
    Professeur Felyne
    MasculinAge : 38Messages : 85

    Mer 21 Jan 2015 - 18:19

    Merci ^^



    .
    Neilia
    Neilia
    FémininAge : 32Messages : 101

    Mer 21 Jan 2015 - 22:19

    Merciiiiiiiiiiiiiiii <3
    Aelita
    Aelita
    FémininAge : 31Messages : 278

    Sam 24 Jan 2015 - 21:45

    merci
    Kiwy Cat
    Kiwy Cat
    FémininAge : 31Messages : 19

    Ven 13 Fév 2015 - 14:57

    J'aime beaucoup ! Merci ♥
    Eshon
    Eshon
    FémininAge : 43Messages : 197

    Dim 15 Fév 2015 - 2:29

    Merci !
    Kamui Kyuuji
    Kamui Kyuuji
    MasculinAge : 31Messages : 30

    Mer 18 Mar 2015 - 20:00

    Merci beaucoup.
    Elektra Kloo
    Elektra Kloo
    FémininAge : 35Messages : 156

    Jeu 19 Mar 2015 - 11:49

    Pas mal du tout
    Klemmeria
    Klemmeria
    FémininAge : 24Messages : 147

    Ven 20 Mar 2015 - 22:56

    THANKS



    Qeel paysan - Page 2 Btqy
    Kortyx
    Kortyx
    MasculinAge : 33Messages : 81

    Sam 21 Mar 2015 - 15:56

    Merci ^^
    Satyrix
    Satyrix
    MasculinAge : 26Messages : 18

    Dim 22 Mar 2015 - 19:31

    Madras a écrit:Merci
    Niortais
    Niortais
    MasculinAge : 39Messages : 27

    Mer 25 Mar 2015 - 8:50

    Merci
    G U E R L A I N
    G U E R L A I N
    FémininAge : 33Messages : 192

    Mer 25 Mar 2015 - 9:13

    merci du partage



    Qeel paysan - Page 2 191114colorfulwallandsexygirlfacebookcovero1
    Celuna
    Celuna
    FémininAge : 33Messages : 133

    Sam 4 Avr 2015 - 20:05

    C'est un très beau qeel nature.. Magnifique
    Zélya
    Zélya
    FémininAge : 34Messages : 190

    Mer 8 Avr 2015 - 11:57

    merci



    Qeel paysan - Page 2 891727signaNanmoue
    remrem
    remrem
    MasculinAge : 26Messages : 48

    Jeu 9 Avr 2015 - 6:54

    Merci !Very Happy
    Linoa
    Linoa
    FémininAge : 34Messages : 42

    Sam 11 Avr 2015 - 23:55

    Merci beaucoup ! :)



    Qeel paysan - Page 2 Pdsm
    ~ If you come here... You'll find me. I promise ~
    Wavy
    Wavy
    FémininAge : 22Messages : 39

    Dim 12 Avr 2015 - 1:27

    Merci !
    Ab0utxMe
    Ab0utxMe
    FémininAge : 29Messages : 186

    Lun 20 Avr 2015 - 11:39

    Merci :3



    Qeel paysan - Page 2 878302signaturevegeta
    Asuka
    Asuka
    FémininAge : 29Messages : 105

    Mer 22 Avr 2015 - 13:29

    Merci ♥



    Qeel paysan - Page 2 975531MisakiHino3
    Usolia Naviento
    Usolia Naviento
    FémininAge : 31Messages : 25

    Sam 2 Mai 2015 - 13:32

    Merci!

    C'est super mignon comme QEEL ^^ Simple et efficace
    BlueGhost
    BlueGhost
    MasculinAge : 22Messages : 138

    Mar 5 Mai 2015 - 19:40

    Merciiiiii :)



    Qeel paysan - Page 2 1476882517-signa

    ~ Upupupu... je ne suis pas une peluche, je suis Monokuma ! ~
    Danganronpaaa ♥
    Foxe
    Foxe
    FémininAge : 23Messages : 122

    Mer 6 Mai 2015 - 13:24

    Merci *^*



    Qeel paysan - Page 2 Wet_ha10
    Kianda
    Kianda
    MasculinAge : 23Messages : 88

    Ven 8 Mai 2015 - 11:58

    Merci !



    Qeel paysan - Page 2 1416416855-kandiasigna
    Contenu sponsorisé


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