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.


    Qui est en ligne | Noir et blanc

    Partagez
    avatar
    Nemalus
    FémininAge : 20Messages : 358

    le Dim 28 Aoû 2016 - 0:53

    Rappel du premier message :




    Qui est en ligne réalisé suite à la demande de Cecile362.
    Les couleurs sont modifiables, merci de ne pas retirer le crédit. Le code a été fait avec la version de forum phpBB2

    Voici un aperçu :

    lien direct : www

    Dans le template index-body, remplacer les lignes 173 à 221 par :
    Code:
    <!-- BEGIN disable_viewonline -->
    <table width="100%" border="0" cellspacing="1" cellpadding="0">
      <tr>
        <td>
    <!-- TITRE -->
          <div class="titreQEEL">
            <a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a>
          </div>
          <div class="QEEL">
    <!-- 24H -->
            <div class="dernierQEEL"><table>{L_CONNECTED_MEMBERS}</table>
            </div>
            <div class="GroupeQEEL">
              <div id="groupe">
                <div class="h3">Les Groupes</div>
                <div class="ha">
                  <div class="square d1"><span>INTJ</span></div>
                  <div class="square d2"><span>INTP</span></div>
                  <div class="square d3"><span>ENTJ</span></div>
                  <div class="square d4" ><span>ENTP</span></div>
                  <div class="square d5 "><span>INFJ</span></div>
                  <div class="square d6"><span>INFP</span></div>
                  <div class="square d7 "><span>ENFJ</span></div>
                  <div class="square d8 "><span>ENFP</span></div>
                  <div class="square d9"><span>ISTJ</span></div>
                  <div class="square d10"><span>ISFJ</span></div>
                  <div class="square d11"><span>ESTJ</span></div>
                  <div class="square d12"><span>ESFJ</span></div>
                  <div class="square d13"><span>ISTP</span></div>
                  <div class="square d14"><span>ISFP</span></div>
                  <div class="square d15"><span>ESTP</span></div>
                  <div class="square d16 "><span>ESFP</span></div>
                </div>
              </div>
            </div>
    <!-- MESSAGES / MEMBRES / CONNECTES / DERNIER INSCRIT -->
            <div class="boxQEEL">
      <!-- TOTAL UTILISATEURS CONNECTES -->
              <span id="UsersOnline">{TOTAL_USERS_ONLINE}</span>
              <script type="text/javascript">document.getElementById('UsersOnline').innerHTML=document.getElementById('UsersOnline').innerHTML.replace(/Il y a en tout/,"");</script>
              <div class="boxQEEL">
    <!-- TOTAL MESSAGES -->
                <div class="TotalPosts">
                  <span id="tPOSTS"><b>{TOTAL_POSTS}</b></span>
                  <script type="text/javascript">document.getElementById('tPOSTS').innerHTML=document.getElementById('tPOSTS').innerHTML.replace(/Nos membres ont posté un total de /," "); document.getElementById('tPOSTS').innerHTML=document.getElementById('tPOSTS').innerHTML.replace(/messages/," ");</script> messages
                </div>
    <!-- TOTAL MEMBRES -->
                <div class="TotalUsers">
                  <span id="tUSERS"><b>{TOTAL_USERS}</b></span>
                  <script type="text/javascript">document.getElementById('tUSERS').innerHTML=document.getElementById('tUSERS').innerHTML.replace(/Nous avons /," "); document.getElementById('tUSERS').innerHTML=document.getElementById('tUSERS').innerHTML.replace(/membres enregistrés/," "); document.getElementById('tUSERS').innerHTML=document.getElementById('tUSERS').innerHTML.replace(/membre enregistré/," ");</script> membres
                </div>
              </div>
    <!-- MEMBRES CONNECTES -->
              <div class="online" id="onLINE">
                <table>{LOGGED_IN_USERS_LIST}</table>
              </div>
    <!-- DERNIER UTILISATEUR ENREGISTRE -->
              <div class="lstQEEL">New Player :
                <span id="nUSER">{NEWEST_USER}</span>
                <script type="text/javascript">document.getElementById('nUSER').innerHTML=document.getElementById('nUSER').innerHTML.replace(/L'utilisateur enregistré le plus récent est /," ")</script>
              </div>
              <div class="creditQEEL">CREDITS : QEEL réalisé par Nemalus</div>
            </div>
          </div>
          <div class="FinQEEL"></div>
        </td>
      </tr>
    </table>
    <!-- END disable_viewonline -->


    Dans la feuille de style (CSS) ajouter le code :
    Code:
    /****************************************
       QEEL par Nemalus sur Never-Utopia
       (Amphibole sur Exquisite
        Nemalus sur Cap-RPG
        Andramas sur Somewhere)
    *****************************************/
    /* BLOC TITRE QEEL */
    .titreQEEL {
    margin:auto;
    width:900px; height:55px; padding-top:40px;
    background:#000;  /* MODIFIABLE */
    font-family:Oswald; letter-spacing:2px; text-transform:uppercase; text-align:right; color:#fff;
    }
    /* TITRE QEEL */
    .titreQEEL a{
    font-size:40px; padding-right:35px;
    color:white; text-shadow:1px 1px 0 #cad78e; /* MODIFIABLE */
    }
    /* QEEL */
    .QEEL {
    margin:auto; width:900px; text-align:center; background:#fff; padding:12px 0;
    }
    /* 24H QEEL */
    .dernierQEEL {
    display:inline-block; vertical-align:top; margin:0 10px;
    width:200px; height:300px; padding:5px; overflow:auto;
    font-size:12px; text-align:justify;
    background:#dedede;; /* MODIFIABLE */
    }
    .dernierQEEL .row1 {
    background:none; padding:0 !important;
    }
    /* COULEUR TEXTE 24H QEEL */
    .dernierQEEL .gensmall {
    font-size:12px; color:black; /* MODIFIABLE */
    }
    /* Groupe QEEL */
    .GroupeQEEL {
    display:inline-block; vertical-align:top; margin:0 10px;
    width:250px; padding:5px;
    font-size:12px; text-align:justify;
    }
    #groupe .h3{
      margin:-5px -5px 5px;
      color:black;
      font:20px oswald;
      text-transform:uppercase;
      padding:10px 0;
      border-bottom:3px solid #333;
    }
    #groupe .square span{
      font:8px arial narrow;
      text-transform:uppercase;
      letter-spacing:1px;
      background:#333;
      text-shadow:1px 1px 0px black;
      color:#efefef;
      display:block;
      width:50px;
      padding:4px 0;
      -webkit-transition:ease-in-out 0.5s;
      transition:ease-in-out 0.5s;
      position:relative;
      left:50px;
    }
    #groupe a{color:transparent;text-decoration:none;}
    #groupe{text-align:center;width:250px;margin: 0 auto;background:rgba(0,0,0,0.05);padding:5px 5px 0;}
    #groupe .square{
      width:50px;
      height:50px;
      box-sizing:border-box;
      padding-top:17px;
      text-align:center;
      display:inline-block;
      vertical-align:top;
      overflow:hidden;
      margin-bottom:5px;
    }
    #groupe .square:nth-child(odd){
      margin-right:5px;
    }
    #groupe .square:hover span{
      left:0px;
    }
    /* COULEURS DES GROUPES */
    #groupe .d1{background:#B891C4;}
    #groupe .d2{background:#B36A8E;}
    #groupe .d3{background:#80405C;}
    #groupe .d4{background:#917277;}
    #groupe .d5{background:#9AC59A;}
    #groupe .d6{background:#ADC56B;}
    #groupe .d7{background:#7F9D58;}
    #groupe .d8{background:#698D4D;}
    #groupe .d9{background:#90E7E5;}
    #groupe .d10{background:#A7BCC7;}
    #groupe .d11{background:#5CC7C8;}
    #groupe .d12{background:#5DAFE6;}
    #groupe .d13{background:#CB4C3B;}
    #groupe .d14{background:#A20812;}
    #groupe .d15{background:#E17257;}
    #groupe .d16{background:#DD2B45;}

    /* BLOC POSITIONNEMENT */
    .boxQEEL {
    display:inline-block; vertical-align:top;
    }
    /* TOTAL MESSAGES QEEL */
    .TotalPosts {
    margin-bottom:10px;
    width:120px; height:50px; padding-top:13px;
    text-align:center; font-size:16px; line-height:normal;
    background:#dedede; color:black; /* MODIFIABLE */
    }
    /* TOTAL MEMBRES QEEL */
    .TotalUsers {
    width:120px; height:50px; padding-top:13px;
    text-align:center; font-size:16px; line-height:normal;
    background:#dedede; color:black; /* MODIFIABLE */
    }
    /* MEMBRES CONNECTES */
    .online {
    display:inline-block; vertical-align:top; margin-left:10px;
    width:235px; height:120px; padding:10px; overflow:auto;
    font-size:12px; text-align:justify;
    background:#dedede;; color:black; /* MODIFIABLE */
    }
    /* DERNIER UTILISATEUR ENREGISTRE QEEL */
    .lstQEEL {
    margin-top:10px;
    width:385px; height:40px; padding-top:20px;
    background:#dedede;; color:white; /* MODIFIABLE */
    text-align:center; font-size:18px;
    }
    /* NOMBRE UTILISATEURS EN LIGNE */
    #UsersOnline {
    display:block; margin-top:10px;
    width:385px; height:15px; padding:5px 0;
    font-size:11px; text-align:center;
    background:white; color:black; /* MODIFIABLE */
    }
    /* CREDITS */
    .creditQEEL {
    margin-top:10px;
    width:385px; height:40px; padding-top:20px;
    color:black;font-family:Oswald;text-transform:Uppercase; text-align:left; /* MODIFIABLE */
    text-align:center; font-size:18px; font-style:italic;text-shadow:1px 1px 0 #dedede;
    }
    /* BLOC FIN QEEL */
    .FinQEEL {
    margin:auto;
    width:900px; height:35px; padding-top:40px;
    background:#000;  /* MODIFIABLE */
    }



    Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
    Si vous avez des problèmes avec ce LS, venez poster ici.
    Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^


    Dernière édition par Nemalus le Ven 23 Déc 2016 - 0:29, édité 1 fois
    avatar
    Hana Evali
    FémininAge : 27Messages : 167

    le Ven 31 Mar 2017 - 9:38

    Merci !



    avatar
    Mashi Hozuki
    MasculinAge : 20Messages : 28

    le Lun 3 Avr 2017 - 20:39

    Merci !
    avatar
    Lisou
    FémininAge : 17Messages : 303

    le Jeu 6 Avr 2017 - 17:52

    Merciiii *^*
    avatar
    Toby P. Nolan
    FémininAge : 19Messages : 38

    le Dim 9 Avr 2017 - 16:16

    très joli! merci!
    avatar
    Vito
    MasculinAge : 20Messages : 12

    le Mar 11 Avr 2017 - 3:24

    meci
    avatar
    QueenDancing13
    FémininAge : 21Messages : 103

    le Jeu 13 Avr 2017 - 22:21

    Perfect !



    avatar
    Toxinou
    FémininAge : 26Messages : 31

    le Sam 15 Avr 2017 - 15:55

    Merci :)
    avatar
    Suzanne Ady
    FémininAge : 23Messages : 68

    le Dim 16 Avr 2017 - 3:27

    Merci à toi pour ce joli QEEL !
    avatar
    Nord
    MasculinAge : 18Messages : 169

    le Lun 17 Avr 2017 - 4:47

    Merci pour le partage ! Very Happy
    avatar
    Neyokan
    FémininAge : 21Messages : 43

    le Ven 21 Avr 2017 - 18:02

    merci !
    avatar
    Piccosan
    FémininAge : 28Messages : 5

    le Dim 23 Avr 2017 - 16:52

    Ça a l'air vraiment chouette, merci !
    Lovelybush
    FémininAge : 26Messages : 45

    le Lun 24 Avr 2017 - 10:18

    j'aime beaucoup !
    avatar
    Insane.
    FémininAge : 20Messages : 82

    le Ven 28 Avr 2017 - 18:49

    Merci !
    avatar
    Ornicar
    MasculinAge : 22Messages : 37

    le Lun 8 Mai 2017 - 17:08

    Merci !
    avatar
    Suna
    FémininAge : 13Messages : 31

    le Sam 13 Mai 2017 - 19:52

    Merci beaucoup pour le partage



    Salut à tous, mon nom est Suna en rapport avec Suna (un village de Ninja dans Naruto)
    Mes surnoms son Gaga, Erza et Gaara. j'aime beaucoup les mangas et en particulier Fairy Tail. Je suis fort en rpg, mnof e, codage et nulle à chier en graphisme.

    avatar
    NanoiHime
    FémininAge : 19Messages : 562

    le Dim 14 Mai 2017 - 2:43

    mercii



    avatar
    Hallibel
    FémininAge : 24Messages : 82

    le Dim 14 Mai 2017 - 13:28

    C'est chouette ! Je veux en voir plus. Merci !
    avatar
    Givrix
    MasculinAge : 21Messages : 203

    le Mar 23 Mai 2017 - 9:47

    merci beaucoup pour le partage



    avatar
    Mimio
    FémininAge : 23Messages : 178

    le Mer 31 Mai 2017 - 2:12

    Merci !



    avatar
    Solid6Snake
    MasculinAge : 34Messages : 146

    le Ven 2 Juin 2017 - 8:08

    Merci.
    avatar
    Nutop
    FémininAge : 15Messages : 254

    le Mar 20 Juin 2017 - 6:06

    Merci :)






    avatar
    Kuvera
    FémininAge : 24Messages : 34

    le Mar 27 Juin 2017 - 5:21

    Merci ♥
    avatar
    Lust Caution
    FémininAge : 23Messages : 79

    le Jeu 29 Juin 2017 - 12:11

    En un mot WOW!!!!! Le code est simplement magnifique !
    avatar
    Mellusa ~
    FémininAge : 20Messages : 78

    le Dim 9 Juil 2017 - 20:24

    Merci pour ce partage, c'est super ~

    avatar
    Mariana Greyson
    FémininAge : 19Messages : 78

    le Lun 17 Juil 2017 - 10:51

    merciii
    Contenu sponsorisé


      La date/heure actuelle est Jeu 24 Mai 2018 - 13:46