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
    Amasis
    FémininAge : 45Messages : 307

    le Sam 7 Avr 2018 - 23:49

    Merci pour ce superbe QEEL !
    avatar
    Alsan
    MasculinAge : 21Messages : 53

    le Dim 22 Avr 2018 - 2:41

    merci
    avatar
    Saya Shirayuki
    FémininAge : 25Messages : 150

    le Ven 27 Avr 2018 - 21:26

    Merci beaucoup du partage !
    avatar
    Bilandie
    FémininAge : 22Messages : 19

    le Dim 29 Avr 2018 - 13:19

    merci beaucoup pour ce qeel qui sera parfait ^^
    avatar
    Ena
    FémininAge : 20Messages : 149

    le Dim 6 Mai 2018 - 22:57

    Wow ! Super QEEL merci !




    avatar
    Costati
    FémininAge : 18Messages : 52

    le Lun 18 Juin 2018 - 10:22

    J'aime beaucoup. Merci du partage <3
    Contenu sponsorisé


      La date/heure actuelle est Mer 15 Aoû 2018 - 17:08