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 : -19%
PC portable MSI Gaming Pulse 16” -Ultra7 155H ...
Voir le deal
1299 €

    Qeel Rose Paris (à onglets)

    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mar 17 Fév 2015 - 2:24

    Rappel du premier message :

    Qeel rose à Paris (onglets)



    Voici un petit LS d'un qeel à onglets que j'ai fait pour la demande de Angy38. Il y a 3 onglets (statistiques, en ligne et anniversaires) qui apparaîssent quand on clique dessus et 4 onglets de groupes qui apparaîssent quand on passe notre souris sur le groupe. De base, l'onglet "Stats" est actif.

    Pour voir l'aperçu, onglet "Stats" (Statistiques) actif : cliquez ici.
    Pour voir l'aperçu, onglet "Ligne" (En ligne) actif : cliquez ici.
    Pour voir l'aperçu, onglet "Anniv"(Anniversaires) actif : cliquez ici.

    Ce LS est en trois parties.
    • Tout d'abord, nous allons installer le qeel dans le template.
    • 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 c'est pour PhpBB2.


    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:
    <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>
    <div id="qeel">
      <div class="qeelonglet_1 qeelonglet" id="qeelonglet_Stats" onclick="javascript:change_qeelonglet('Stats');">
      </div>
      <div class="qeelonglet_0 qeelonglet" id="qeelonglet_Ligne" onclick="javascript:change_qeelonglet('Ligne');">
      </div>
      <div class="qeelonglet_0 qeelonglet" id="qeelonglet_Anniv" onclick="javascript:change_qeelonglet('Anniv');">
      </div>
      <div class="qeelonglet_0 qeelonglet" id="qeelonglet_Groupe1" onmouseover="javascript:change_qeelonglet('Groupe1');">
        Groupe 1
      </div>
      <div class="qeelonglet_0 qeelonglet" id="qeelonglet_Groupe2" onmouseover="javascript:change_qeelonglet('Groupe2');">
        Groupe 2
      </div>
      <div class="qeelonglet_0 qeelonglet" id="qeelonglet_Groupe3" onmouseover="javascript:change_qeelonglet('Groupe3');">
        Groupe 3
      </div>
      <div class="qeelonglet_0 qeelonglet" id="qeelonglet_Groupe4" onmouseover="javascript:change_qeelonglet('Groupe4');">
        Groupe 4
      </div>
      <div class="contenu_qeelonglet" id="contenu_qeelonglet_Stats">
        <div class="qeel_inside">
          Sois le bienvenue jeune touriste. 
          Laisse Gossip te guider vers la voie du succès.&nbsp;
          À ce propos, <span id="totalpost">{TOTAL_POSTS}</span> <span id="totaluser">{TOTAL_USERS}</span>. <span id="newuser">{NEWEST_USER}</span>.
        </div>
      </div>
      <div class="contenu_qeelonglet" id="contenu_qeelonglet_Ligne">
        <div class="qeel_inside">
          <div id="loggedlist">{LOGGED_IN_USER_LIST}</div>
          <table id="totalconn">{L_CONNECTED_MEMBERS}</table>
        </div>
      </div>
      <div class="contenu_qeelonglet" id="contenu_qeelonglet_Anniv">
        <div class="qeel_inside">
          <table id="birthtoday">{L_WHOSBIRTHDAY_TODAY}</table>
        </div>
      </div>
      <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe1">
        <div class="qeel_inside">
          Description du groupe 1 et tout le bla bla...
        </div>
      </div>
      <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe2">
        <div class="qeel_inside">
          Description du groupe 2 et tout le bla bla...
        </div>
      </div>
      <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe3">
        <div class="qeel_inside">
          Description du groupe 3 et tout le bla bla...
        </div>
      </div>
      <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe4">
        <div class="qeel_inside">
          Description du groupe 4 et tout le bla bla...
        </div>
      </div>
      <script type="text/javascript">
        document.getElementById('totalpost').innerHTML=document.getElementById('totalpost').innerHTML.replace(/Nos membres ont posté un total de /,"");
        document.getElementById('totalpost').innerHTML=document.getElementById('totalpost').innerHTML.replace(/messages/,"selfies ont été vécues");
        document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/Nous avons/,"par nos");
        document.getElementById('newuser').innerHTML=document.getElementById('newuser').innerHTML.replace(/L'utilisateur enregistré le plus récent est/," Le dernier villageois en date à nous avoir rejoint est");
        document.getElementById('loggedlist').innerHTML=document.getElementById('loggedlist').innerHTML.replace(/Utilisateurs enregistrés/,"Actuellement, derrière tes fenêtres, tu as");
        document.getElementById('birthtoday').innerHTML=document.getElementById('birthtoday').innerHTML.replace(/Aucun membre ne fête son anniversaire aujourd'hui/,"Pas d'anniversaire aujourd'hui, les selfies seront pour plus tard.");
      </script>
      <script type="text/javascript">
        //<!--
          var anc_qeelonglet = 'Stats';
          change_qeelonglet(anc_qeelonglet);
        //-->
      </script>
    </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 ************************************************************/

    /*Bloc du qeel*/
    #qeel {
      position: relative;
      margin: auto;
      width: 800px;
      height: 405px;
      background-image: url('https://2img.net/r/hpimg15/pics/620500qeel1.png');
    }


    /*Positionnement de Stats*/
    #qeelonglet_Stats {
      position: absolute;
      top: 65px;
      left: 100px;
      width: 100px;
      height: 50px;
      transform: rotate(-6deg);
      -webkit-transform: rotate(-6deg);
    }
    /*Positionnement de Ligne*/
    #qeelonglet_Ligne {
      position: absolute;
      top: 100px;
      left: 182px;
      width: 115px;
      height: 50px;
      transform: rotate(5deg);
      -webkit-transform: rotate(5deg);
    }
    /*Positionnement de Anniv*/
    #qeelonglet_Anniv {
      position: absolute;
      top: 140px;
      left: 90px;
      width: 115px;
      height: 50px;
      transform: rotate(-13deg);
      -webkit-transform: rotate(-13deg);
    }
    /*Positionnement de Groupe1*/
    #qeelonglet_Groupe1 {
      position: absolute;
      top: 215px;
      left: 100px;
      width: 90px;
      height: 30px;
      transform: rotate(1deg);
      -webkit-transform: rotate(1deg);
    }
    /*Positionnement de Groupe2*/
    #qeelonglet_Groupe2 {
      position: absolute;
      top: 216px;
      left: 193px;
      width: 90px;
      height: 30px;
      transform: rotate(1deg);
      -webkit-transform: rotate(1deg);
    }
    /*Positionnement de Groupe3*/
    #qeelonglet_Groupe3 {
      position: absolute;
      top: 250px;
      left: 100px;
      width: 90px;
      height: 30px;
      transform: rotate(1deg);
      -webkit-transform: rotate(1deg);
    }
    /*Positionnement de Groupe4*/
    #qeelonglet_Groupe4 {
      position: absolute;
      top: 251px;
      left: 193px;
      width: 90px;
      height: 30px;
      transform: rotate(1deg);
      -webkit-transform: rotate(1deg);
    }

    /*Écriture des groupes*/
    #qeelonglet_Groupe1, #qeelonglet_Groupe2, #qeelonglet_Groupe3, #qeelonglet_Groupe4 {
      color: white;
      font-size: 18px;
      font-fmamily: arial;
      font-variant: small-caps;
      text-align: center;
      line-height: 30px;
      vertical-align: center;
    }


    /*Onglets inactifs survolés*/
    .qeelonglet_0:hover {
      cursor: pointer;
    }
    /*Onglets actifs*/
    .qeelonglet_1 {
      cursor: default;
    }


    /*Contenu des onglets*/
    .contenu_qeelonglet {
      position: absolute;
      top: 90px;
      right: 100px;
      width: 190px;
      height: 160px;
      transform: rotate(-6deg);
      -webkit-transform: rotate(-6deg);
      display: none;
      color: white;
      font-size: 14px;
      font-fmamily: arial;
      font-variant: small-caps;
    }
    /*Met un espace et un overflow automatique dans les contenus*/
    .qeel_inside {
      margin-right: -5px;
      padding-right: 5px;
      overflow: auto;
      height: 160px;
    }

    /*Connectés des dernières heures et Membres connectés*/
    #totalconn, #loggedlist {
      height: 80px;
      overflow: auto;
      margin-right: -5px;
      padding-right: 5px;
    }
    /*Membres connectés*/
    #loggedlist {
      margin-bottom: 5px;
      height: 75px;
    }

    /*Enlève le fond des anniversaires et des connectés des dernières heures*/
    #totalconn .row1, #birthtoday .row1 {
      padding: 0px;
      background-color: transparent;
      display: inline-block;
    }
    /*Écriture des anniversaires et des connectés des dernières heures*/
    #totalconn .gensmall, #birthtoday .gensmall {
      color: white;
      font-size: 14px;
      font-fmamily: arial;
      font-variant: small-caps;
    }

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

    Dans mon qeel, j'ai modifiés ces phrases pour que cela donne "X selfies ont été vécues", "par nos X membres enregistrés" et "Le dernier villageois en date à nous avoir 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 villageois en date à nous avoir 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').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é"

    loggedlist : "Utilisateurs enregistrés : NOM"

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

    birthtoday : "Aucun membre ne fête son anniversaire aujourd'hui"


    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 villageois en date à nous avoir 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.



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

    À plus !


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



    Chocolakato
    Chocolakato
    FémininAge : 34Messages : 837

    Jeu 21 Mai 2015 - 17:15

    Génial !
    Merci !



    Ciàran
    Ciàran
    FémininAge : 34Messages : 187

    Jeu 21 Mai 2015 - 18:57

    merci
    Neymar
    Neymar
    MasculinAge : 26Messages : 139

    Jeu 21 Mai 2015 - 19:50

    Rose Paris, me voilà o/
    Kitty Kat.
    Kitty Kat.
    FémininAge : 30Messages : 86

    Sam 23 Mai 2015 - 20:40

    J'aimerais beaucoup essayer ! Merci du partage ! :)
    Carlotta Besascar
    Carlotta Besascar
    FémininAge : 24Messages : 26

    Dim 24 Mai 2015 - 15:00

    Merci j'adore !
    Lust Caution
    Lust Caution
    FémininAge : 30Messages : 79

    Lun 25 Mai 2015 - 12:00

    Merci.
    Fondaboxpub
    Fondaboxpub
    MasculinAge : 59Messages : 38

    Lun 25 Mai 2015 - 15:35

    Merci



    Natsuhi
    Natsuhi
    FémininAge : 28Messages : 35

    Lun 25 Mai 2015 - 16:35

    Merci ^^
    avatar
    misakii
    FémininAge : 27Messages : 37

    Lun 25 Mai 2015 - 21:16

    WWAAAAW :3 j'aiime
    Myfanwi
    Myfanwi
    FémininAge : 27Messages : 97

    Dim 31 Mai 2015 - 22:04

    Merci Very Happy
    louha
    louha
    FémininAge : 37Messages : 219

    Mar 2 Juin 2015 - 21:29

    merci !!
    Black Moon
    Black Moon
    FémininAge : 29Messages : 108

    Mer 3 Juin 2015 - 18:08

    Bravo !
    Depp
    Depp
    FémininAge : 33Messages : 301

    Sam 6 Juin 2015 - 19:33

    merci beaucouupppp !!!! ♥



    Qeel Rose Paris (à onglets) - Page 2 Tumblr_nenygwIlcz1s4u464o1_500
    missmarie
    missmarie
    FémininAge : 33Messages : 24

    Sam 20 Juin 2015 - 17:51

    Oh, c'est plutôt joli ~
    Chione
    Chione
    MasculinAge : 23Messages : 397

    Sam 20 Juin 2015 - 22:37

    Merci!



    Qeel Rose Paris (à onglets) - Page 2 1435969469-signd
    FEZ!FEZ!
    Qeel Rose Paris (à onglets) - Page 2 150804081846482087
    .pinkrocks
    .pinkrocks
    FémininAge : 34Messages : 41

    Dim 21 Juin 2015 - 0:44

    Mon Dieu! C'est magnifique! Merci du partage! :love:
    Hancok
    Hancok
    FémininAge : 40Messages : 1495

    Mer 24 Juin 2015 - 10:36

    Bonjour, très joli et sympathique, merci du partage.




    Qeel Rose Paris (à onglets) - Page 2 A67g
    Aurifereis
    Aurifereis
    MasculinAge : 31Messages : 39

    Sam 27 Juin 2015 - 18:08

    Très sympa, merci du partage :)
    Sasha57
    Sasha57
    FémininAge : 30Messages : 35

    Dim 5 Juil 2015 - 17:04

    C'est super joli *O*
    merci du partage <3
    Equestria
    Equestria
    FémininAge : 27Messages : 118

    Mar 7 Juil 2015 - 12:28

    merci
    Allèle
    Allèle
    FémininAge : 31Messages : 56

    Mar 7 Juil 2015 - 14:12

    Merci
    Err0r
    Err0r
    FémininAge : 31Messages : 134

    Mar 7 Juil 2015 - 17:17

    à tester :o



    Qeel Rose Paris (à onglets) - Page 2 150519095409324327
    Haniwa
    Haniwa
    FémininAge : 30Messages : 206

    Jeu 9 Juil 2015 - 15:10

    J'adore °^°

    Merci
    rosebleudu10
    rosebleudu10
    FémininAge : 34Messages : 189

    Mar 28 Juil 2015 - 13:30

    merci
    Anonymous
    Invité

    Jeu 6 Aoû 2015 - 16:52

    :love:
    Contenu sponsorisé


      La date/heure actuelle est Dim 10 Nov 2024 - 20:49