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
    Smokerlilitrope
    FémininAge : 29Messages : 45

    le Mar 15 Aoû 2017 - 9:17

    MERCI <3
    avatar
    Bull
    FémininAge : 21Messages : 8

    le Lun 18 Sep 2017 - 18:07

    Coucou, merci !
    avatar
    Ayu-chan
    FémininAge : 24Messages : 8

    le Sam 23 Sep 2017 - 22:18

    Jolie QEEL Very Happy
    avatar
    Soon
    FémininAge : 32Messages : 83

    le Dim 24 Sep 2017 - 22:52

    merci pour le partage
    avatar
    mama74
    MasculinAge : 31Messages : 14

    le Lun 25 Sep 2017 - 0:46

    merci beaucoup
    avatar
    Pelezinho
    MasculinAge : 19Messages : 87

    le Mer 27 Sep 2017 - 23:25

    Merci



    [MERCI D'INTRODUIRE SIGNATURE ORIGINALE ICI]
    avatar
    Lexucio
    MasculinAge : 24Messages : 33

    le Ven 20 Oct 2017 - 14:17

    Merci ^^
    avatar
    maaelstrom
    FémininAge : 25Messages : 63

    le Dim 12 Nov 2017 - 20:11

    Merci :coeur:





    you get so alone at the times that it just makes sense.
    avatar
    Orochimaru
    FémininAge : 28Messages : 209

    le Jeu 23 Nov 2017 - 1:31

    J'ADORE Very Happy Très beau travail & Merci du partage Very Happy



    Orochimaru

    " Les proies doivent toujours faire preuve de la plus grande vigilance, lorsqu'elles tentent d'échapper à leur prédateur. Tout ce qu'une proie peut espérer de son prédateur, c'est qu'il daigne la laisser tranquille après avoir eu ce qu'il voulait."
    avatar
    Saik
    MasculinAge : 22Messages : 65

    le Mer 6 Déc 2017 - 14:03

    thks
    avatar
    Téoz
    FémininAge : 29Messages : 38

    le Mar 12 Déc 2017 - 13:14

    merci!
    avatar
    Monaka
    FémininAge : 26Messages : 132

    le Jeu 14 Déc 2017 - 13:53

    Il est vraiment superbe merci pour le partage !
    avatar
    nini
    FémininAge : 34Messages : 19

    le Lun 18 Déc 2017 - 17:34

    MErciiii
    avatar
    Cez
    FémininAge : 22Messages : 17

    le Lun 25 Déc 2017 - 15:14

    merci !
    avatar
    Amakhaza
    FémininAge : 15Messages : 52

    le Ven 5 Jan 2018 - 22:00

    Très joli QUEEL j'aime énormément ♥
    avatar
    Scythe
    FémininAge : 28Messages : 40

    le Jeu 11 Jan 2018 - 14:40

    Merci ^^
    avatar
    Enkyo
    MasculinAge : 26Messages : 14

    le Ven 12 Jan 2018 - 2:14

    Merci ! :)
    avatar
    Lynnakiel
    FémininAge : 22Messages : 19

    le Ven 26 Jan 2018 - 15:30

    Merci du partage !
    avatar
    Plùmyts
    FémininAge : 22Messages : 18

    le Dim 28 Jan 2018 - 18:19

    Merci !
    avatar
    Celuna
    FémininAge : 28Messages : 133

    le Ven 2 Fév 2018 - 16:09

    Très beau, merci pour le partage
    avatar
    DarkMasamune
    FémininAge : 26Messages : 57

    le Sam 3 Fév 2018 - 11:28

    Merci!
    avatar
    Tony`s
    MasculinAge : 27Messages : 64

    le Mer 7 Fév 2018 - 3:53

    merci pour le tut
    céleste callisto
    FémininAge : 27Messages : 55

    le Jeu 22 Fév 2018 - 15:04

    merci
    avatar
    M3T
    FémininAge : 28Messages : 11

    le Jeu 22 Mar 2018 - 23:56

    Merci pour le libre service ! **
    avatar
    summerby
    FémininAge : 24Messages : 36

    le Mar 3 Avr 2018 - 9:02

    sublime (a)
    Contenu sponsorisé


      La date/heure actuelle est Lun 17 Déc 2018 - 17:21