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.


    QEEL en 3 colones + Chatbox

    Partagez
    avatar
    Databar
    MasculinAge : 24Messages : 142

    le Lun 24 Mar 2014 - 10:02

    Rappel du premier message :


    Creation: Version 4.1 du forum "RôlePlay Universe"
    Code en libre service distribué que par les membres de RôlePlay Universe avec accord du staff. Ressource en libre service, creditez au nom de RôlePlay Universe et Never Utopia si vous l'utilisez (je vous force pas mais par respect faites le ^^)

    Exemple:


    Commencons :) Tout d'abord on va devoir modifier votre template, je vous explique:


    • Trouvez dans "index_body" le code se situant entre les lignes

    :

    Code:
    <!-- BEGIN disable_viewonline --> et <!-- END disable_viewonline -->


    • Puis remplacez-les par ce code:



    Code:
       <script type="text/javascript">
        //<![CDATA[
        $(function(){
           div_marquee('comments_scroll_div', 'comments_scroll_container', '{SCROLL_WAY}', '{SCROLL_STEP}', '{SCROLL_DELAY}', '{SCROLL_HEIGHT}', 'genmed');
        });
        //]]>
        </script>
        <table class="qeeltable" width="100%" border="0" cellspacing="1" cellpadding="0">
          <center> <div class="titreqeel"><a href="http://fr.cooltext.com"><img src="http://images.cooltext.com/3365718.png" width="252" height="31" alt="Qui est en ligne?" /></a></div></center>
          <tr>
          <td><div class="boxqeel">{TOTAL_POSTS}<br/><br/>{TOTAL_USERS}<br/>{NEWEST_USER}<br/><br/>{LOGGED_IN_USER_LIST}</div></td>
            <td><div class="boxqeel">{TOTAL_USERS_ONLINE}<br/><br/>{RECORD_USERS}<br/><br/>{TOTAL_USERS_ONLINE}<br/><br/>{TOTAL_CHATTERS_ONLINE}:  {CHATTERS_LIST}</div></td>
            <td><div class="boxqeel2"><div class="teamadmin">Team Admin</div><br/>
        <div class="teammodo">Team Modo</div><br/>
        <div class="membreslfu">Membre</div><br/>
        <div class="teampartenaire">Partenaire</div><br/>
        <div class="teamvoyageur">Voyageur</div><br/>
        <div class="teampnj">Compte PNJ</div></div></td>
        </tr>
        <tr>
        <td colspan="3"><div class="groupeqeel"><div class="profilmasque" onClick="this.firstChild.value=(this.firstChild.value=='Ouvrir la Chatbox')?'Fermer la Chatbox':'Ouvrir la Chatbox';this.lastChild.style.display=(this.firstChild.value=='Ouvrir la Chatbox')?'none':'block';" style="text-align: center;">
        <input type="button" value="Ouvrir la Chatbox" class="profil1"/>
        <div style="display: none;  text-align:left;"><center><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" id="chatbox_container">
           <tr>
              <td class="row1" valign="top" align="center">
                 <div id="chatbox_portal" style="height:300px;"></div>
                 <script type="text/javascript">
                    insertChatBox('chatbox_portal', '{U_FRAME_CHATBOX}');
                 </script>
              </td>
           </tr>
        </table>

        <table width="100%">
           <tr>
              <td width="100%"> </td>
              <td align="right" width="20">
                 <img src="http://illiweb.com/fa/resize.gif" onmousedown="javascript:resizeElement(event, 'chatbox_portal');" alt="" style="cursor:se-resize;" />
              </td>
           </tr>
        </table></center></div></div></div></td>
        <tr>        <div class="infobulle"><font style="color: #005B89; font-size: 9px;">Voir les Credits
                <span>Ce QEEL a eté codé par Databar pour le forum RôlePlay Universe</span></div></tr>
          </tr>
        </table>

    Ne supprimez pas les deux balise si-dessus, remplacez juste le code qui se situe entre ces ligne



    • Ensuite on passe au code css, la rien de compliqué il vous suffit juste de copier ce code dans votre espace css




    • Code:
        .titreqeel{
          position:center;
          padding-bottom: -7;
          }
          .boxqeel {
          background-color : #003B59;
          border : 1px solid #005B89;
          border-radius: 5px;
          border-top : 3px solid #005B89;
          padding : 5px;
          height: 190px;
          font-size:12px;
          /*width: 265px;*/
          margin-top:7px;
          }
          .teamadmin{
          border-top: 1px solid #005B89;
          border-bottom: 1px solid #005B89;
          margin-top:: 0px;
          color: #FF0000;
          font-family:: cursive;
          text-shadow: 0px 0px 1px #000;
          }

                  .infobulle{position: relative;z-index: 0;}
                  
                 .infobulle:hover{background-color: transparent;z-index: 50;}
                  
                 .infobulle span{
                  position: absolute;
                  background-color: #000000;
                  padding: 5px;
                  left: -1000px;
                  visibility: hidden;
                  color: #FFFFFF;}
                  
                 .infobulle span img{border: 1px;padding: 5px;}
                  
                 .infobulle:hover span{
                  visibility: visible;
                  top: 2px;
                  left: 20px;
                  width: 150px ;
                  color:#FFF;
                  border: 1px solid #fff;
                  -moz-border-radius: 12px;
                  -webkit-border-radius: 12px;
                  border-radius: 12px;}
          .teammodo{
          border-top: 1px solid #005B89;
          border-bottom: 1px solid #005B89;
          margin: 0px;
          color: #FF9900;
          font-family:: cursive;
          text-shadow: 0px 0px 1px #000;
          }
          .membreslfu{
          border-top: 1px solid #005B89;
          border-bottom: 1px solid #005B89;
          color: #82c3ff;
          font-family:: cursive;
          text-postiton: center;
          text-shadow: 0px 0px 1px #000;
          margin: 0px;
          }
          .teamadmin:hover{
          color: #FF0000;
          border-radius: 5px;
          font-family:: cursive;
          background-color: #095279;
          position: center;
          text-shadow: 0px 0px 1px #000;
          border-top: 2px solid #005B89;
          border-bottom: 1px solid #005B89;
           transition: 1s;
           -moz-transition: 1s;
           -o-transition: 1s;
           -htm-transition: 1s;
           -webkit-transition: 1s;
          margin: 0px;
          }
          .teammodo:hover{
           border-radius: 5px;
          color: #FF9900;
          font-family:: cursive;
          text-shadow: 0px 0px 1px #000;
          background-color: #095279;
          position: center;
          border-top: 2px solid #005B89;
          border-bottom: 1px solid #005B89;
           transition: 1s;
           -moz-transition: 1s;
           -o-transition: 1s;
           -htm-transition: 1s;
           -webkit-transition: 1s;
          margin: 0px;
          }
          .membreslfu:hover{
           border-radius: 5px;
          color: #82c3ff;
          font-family:: cursive;
          text-shadow: 0px 0px 1px #000;
          background-color: #095279;
          position: center;
          border-top: 2px solid #005B89;
          border-bottom: 1px solid #005B89;
          transition: 1s;
          -moz-transition: 1s;
          -o-transition: 1s;
          -htm-transition: 1s;
          -webkit-transition: 1s;
          margin: 0px;
          }
          .teampartenaire{
          border-top: 1px solid #005B89;
          border-bottom: 1px solid #005B89;
          color: #fffb00;
          font-family:: cursive;
          text-shadow: 0px 0px 1px #000;
          margin: 0px;
          }
          .teampartenaire:hover{
          color: #fffb00;
          border-radius: 5px;
          font-family:: cursive;
          background-color: #095279;
          position: center;
          text-shadow: 0px 0px 1px #000;
          border-top: 2px solid #005B89;
          border-bottom: 1px solid #005B89;
           transition: 1s;
           -moz-transition: 1s;
           -o-transition: 1s;
           -htm-transition: 1s;
           -webkit-transition: 1s;
          margin: 0px;
          }
          .teamvoyageur{
          border-top: 1px solid #005B89;
          border-bottom: 1px solid #005B89;
          color: #c800ff;
          font-family:: cursive;
          text-shadow: 0px 0px 1px #000;
          margin: 0px;
          }
          .teamvoyageur:hover{
          color: #c800ff;
          border-radius: 5px;
          font-family:: cursive;
          background-color: #095279;
          position: center;
          text-shadow: 0px 0px 1px #000;
          border-top: 2px solid #005B89;
          border-bottom: 1px solid #005B89;
           transition: 1s;
           -moz-transition: 1s;
           -o-transition: 1s;
           -htm-transition: 1s;
           -webkit-transition: 1s;
          margin: 0px;
          }
          .teampnj{
          border-top: 1px solid #005B89;
          border-bottom: 1px solid #005B89;
          color: #ffffff;
          font-family:: cursive;
          text-shadow: 0px 0px 1px #000;
          margin: 0px;
          }
          .teampnj:hover{
          color: #ffffff;
          border-radius: 5px;
          font-family:: cursive;
          background-color: #095279;
          position: center;
          text-shadow: 0px 0px 1px #000;
          border-top: 2px solid #005B89;
          border-bottom: 1px solid #005B89;
           transition: 1s;
           -moz-transition: 1s;
           -o-transition: 1s;
           -htm-transition: 1s;
           -webkit-transition: 1s;
          margin: 0px;
          }
          .boxqeel2 {
          background-color : #003B59;
          border : 1px solid #005B89;
          border-radius: 5px;
          border-top : 3px solid #005B89;
          padding : 5px;
          height: 190px;
          font-size:12px;
          width: 185px;
          margin-top:7px;
          }
          .groupeqeel {
          background-color : #003B59;
          border : 1px solid #005B89;
          border-radius: 5px;
          border-top : 3px solid #005B89;
          padding : 5px;
          width: 895px;
          margin-top:5px;
          }
          .qeeltable {
          background-color : #003B59;
          border : 1px solid #005B89;
          border-radius: 5px;
          border-top : 3px solid #005B89;
          padding : 5px;
          box-shadow: 0px 0px 2px #000000;
          /*width: 905px;*/
          }


    Et voila votre QEEL est installé :)
    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 ^^
    avatar
    Girly
    FémininAge : 20Messages : 116

    le Mer 7 Oct 2015 - 16:03

    merci
    avatar
    Shakespeare
    FémininAge : 28Messages : 109

    le Lun 19 Oct 2015 - 10:02

    Merci !
    avatar
    Chlirr
    FémininAge : 29Messages : 63

    le Lun 26 Oct 2015 - 23:54

    Merci bcp
    avatar
    Junior.
    FémininAge : 20Messages : 78

    le Mer 2 Déc 2015 - 15:56

    Merci !
    avatar
    Fant0me
    MasculinAge : 37Messages : 4

    le Mar 8 Déc 2015 - 13:10

    merci
    Ϫ JAYCE.
    FémininAge : 28Messages : 29

    le Mer 9 Déc 2015 - 17:09

    Merki
    avatar
    Kilda
    FémininAge : 37Messages : 73

    le Mar 2 Fév 2016 - 22:06

    merci
    avatar
    LOLIZE™
    FémininAge : 27Messages : 9

    le Lun 9 Mai 2016 - 20:50

    Merci :)
    avatar
    Aynam
    FémininAge : 21Messages : 73

    le Sam 28 Mai 2016 - 0:04

    merci




    avatar
    Tink ♥
    FémininAge : 25Messages : 48

    le Lun 20 Juin 2016 - 21:23

    Les couleurs sont modifiables ?
    Merci beaucoup !!!
    avatar
    Emelyne
    FémininAge : 36Messages : 77

    le Jeu 18 Aoû 2016 - 21:42

    merci ♥
    avatar
    Ganta
    MasculinAge : 25Messages : 69

    le Ven 19 Aoû 2016 - 18:54

    merci ! =)
    avatar
    Louaque
    MasculinAge : 53Messages : 60

    le Lun 24 Oct 2016 - 22:16

    Merci
    avatar
    Bowtie
    FémininAge : 28Messages : 59

    le Mer 4 Jan 2017 - 11:52

    Merci =)
    avatar
    Necrolythia
    FémininAge : 30Messages : 514

    le Lun 6 Mar 2017 - 9:23

    coucou, pratique, j'aime beaucoup



    avatar
    inouk
    MasculinAge : 17Messages : 25

    le Sam 11 Mar 2017 - 18:49

    merci
    avatar
    kaguya venusity
    FémininAge : 23Messages : 97

    le Mar 14 Mar 2017 - 1:50

    merci mais jai de la misaire a prendre le code
    avatar
    fraumali
    FémininAge : 38Messages : 121

    le Dim 17 Sep 2017 - 15:21

    Bonjour et merci de ce partage
    avatar
    ptite_perle
    FémininAge : 54Messages : 124

    le Jeu 21 Sep 2017 - 14:26

    Merci



    avatar
    Plumy
    FémininAge : 27Messages : 33

    le Mar 26 Sep 2017 - 20:24

    Magnifique ❤ merci beaucoup pour le partage :)
    avatar
    jelayde
    MasculinAge : 30Messages : 10

    le Sam 18 Nov 2017 - 7:43

    joli, facile à mettre en place, merci beaucoup
    avatar
    Mariana Greyson
    FémininAge : 19Messages : 78

    le Dim 3 Déc 2017 - 16:19

    MERCI
    avatar
    Panzerblitz-1
    MasculinAge : 19Messages : 53

    le Dim 3 Déc 2017 - 17:08

    mERCI
    avatar
    Cez
    FémininAge : 22Messages : 17

    le Lun 25 Déc 2017 - 15:18

    merci!
    avatar
    Bunikkk
    MasculinAge : 22Messages : 37

    le Dim 4 Mar 2018 - 18:04

    Super, merci !
    Contenu sponsorisé


      La date/heure actuelle est Ven 22 Juin 2018 - 7:03