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.


    QEEL en 3 colones + Chatbox

    Databar
    Databar
    MasculinAge : 30Messages : 142

    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:
    QEEL en 3 colones + Chatbox - Page 3 110


    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://2img.net/i/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 ^^
    Niortais
    Niortais
    MasculinAge : 40Messages : 27

    Lun 22 Déc 2014 - 9:10

    Merci
    Anonymous
    Invité

    Ven 13 Fév 2015 - 11:40

    merci bcp
    catinaphone
    catinaphone
    FémininAge : 32Messages : 93

    Dim 15 Fév 2015 - 14:00

    Ca change de la CB latérale, j'aime bien ! Merci ! ^^
    PLOIM
    PLOIM
    FémininAge : 27Messages : 52

    Jeu 26 Fév 2015 - 19:58

    Simple mais efficace, merci !
    Mwet
    Mwet
    MasculinAge : 29Messages : 125

    Dim 1 Mar 2015 - 18:27

    Thanks, l'ami :)
    Nexis
    Nexis
    FémininAge : 37Messages : 18

    Dim 1 Mar 2015 - 22:39

    Merci
    zoreille
    zoreille
    FémininAge : 37Messages : 75

    Jeu 2 Avr 2015 - 22:42

    merci



    QEEL en 3 colones + Chatbox - Page 3 Hr7d
    Just4Adventure
    Just4Adventure
    MasculinAge : 29Messages : 48

    Mer 15 Avr 2015 - 3:58

    Thx ! =D
    Litonya
    Litonya
    FémininAge : 23Messages : 149

    Mer 15 Avr 2015 - 11:32

    merci
    tutox
    tutox
    MasculinAge : 43Messages : 22

    Mar 21 Avr 2015 - 10:45

    merci
    Lal
    Lal
    FémininAge : 33Messages : 51

    Lun 27 Avr 2015 - 18:11

    Bon bah, quand l'un marche pas, on essaye l'autre o/ En tous cas j'aime beaucoup, assez simple, c'est ce que je recherche, merci ^^
    Lal
    Lal
    FémininAge : 33Messages : 51

    Lun 27 Avr 2015 - 23:17

    Bonsoir ! Voilà je viens de réussir à mettre ce jolie QQEL sur mon forum, mais j'ai un léger soucis que je n'arrive définitivement pas à régler ... :/
    Ma chatbox s'affiche en deux fois, dans l'onglet mit en place par le QQEL et en bas de la page, au début elle ne s'affichait pas du tout, je l'ai donc tout simplement activer via Module > Chatbox > Afficher en bas de page, mais maintenant je l'ai en deux fois ! xD
    Si quelqu'un a une solution je suis preneuse ! Merci bien et encore merci pour le code =)
    Izaya Orihara
    Izaya Orihara
    FémininAge : 23Messages : 105

    Sam 23 Mai 2015 - 16:05

    Merci du partage.
    Perlou
    Perlou
    FémininAge : 22Messages : 8

    Mar 26 Mai 2015 - 18:52

    merci !
    teteaclaquefr
    teteaclaquefr
    MasculinAge : 33Messages : 39

    Mer 27 Mai 2015 - 13:26

    L'exemple n'est pas visible ^^
    Saya Shirayuki
    Saya Shirayuki
    FémininAge : 32Messages : 153

    Mer 10 Juin 2015 - 12:14

    Merci^^
    Scythe
    Scythe
    FémininAge : 34Messages : 41

    Mar 16 Juin 2015 - 1:49

    Merci !
    Samiki
    Samiki
    FémininAge : 26Messages : 84

    Sam 20 Juin 2015 - 12:43

    Merciii ! ^^



    QEEL en 3 colones + Chatbox - Page 3 Lbxa
    Dakeris RPG ♦ Un monde nouveau régi par la peur
    Le forum ouvre ses portes, nous vous attendons nombreux !

    Samiki
    Samiki
    FémininAge : 26Messages : 84

    Sam 20 Juin 2015 - 12:53

    Lal a écrit:
    Bonsoir ! Voilà je viens de réussir à mettre ce jolie QQEL sur mon forum, mais j'ai un léger soucis que je n'arrive définitivement pas à régler ... :/
    Ma chatbox s'affiche en deux fois, dans l'onglet mit en place par le QQEL et en bas de la page, au début elle ne s'affichait pas du tout, je l'ai donc tout simplement activer via Module > Chatbox > Afficher en bas de page, mais maintenant je l'ai en deux fois ! xD
    Si quelqu'un a une solution je suis preneuse ! Merci bien et encore merci pour le code =)

    Désolée du double post, mais j'ai le même problème :/
    Pau
    Pau
    FémininAge : 34Messages : 37

    Mer 22 Juil 2015 - 10:59

    merci!
    HabboEF
    HabboEF
    MasculinAge : 29Messages : 15

    Jeu 30 Juil 2015 - 15:30

    merci
    Dream Land School
    Dream Land School
    FémininAge : 36Messages : 101

    Mer 2 Sep 2015 - 13:36

    Merci ^^
    Anonymous
    Invité

    Mer 2 Sep 2015 - 13:38

    Merci (>_<)
    Atomixy
    Atomixy
    MasculinAge : 28Messages : 28

    Jeu 10 Sep 2015 - 18:46

    merci
    petit lu
    petit lu
    FémininAge : 32Messages : 184

    Jeu 10 Sep 2015 - 20:00

    Merci du partage ♥
    Contenu sponsorisé


      La date/heure actuelle est Jeu 21 Nov 2024 - 9:36