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


    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
    Okhmhaka
    FémininAge : 33Messages : 31851

    le Lun 5 Mai 2014 - 16:37

    Je valide et déplace, merci ^^



    GEnterZ
    MasculinAge : 20Messages : 63

    le Mar 6 Mai 2014 - 21:25

    Merci.
    avatar
    Invité

    le Mer 7 Mai 2014 - 13:55

    Merci Wink
    avatar
    lilissa
    FémininAge : 24Messages : 30

    le Jeu 8 Mai 2014 - 2:50

    merci ♥
    avatar
    Choubakawa
    MasculinAge : 24Messages : 81

    le Lun 12 Mai 2014 - 22:27

    Merci =)



    avatar
    Chatchoum
    FémininAge : 26Messages : 43

    le Lun 19 Mai 2014 - 0:42

    Merci ! je vais voir si ça convient à mes espérances ^^
    avatar
    Invité

    le Lun 19 Mai 2014 - 8:05

    J'aime beaucoup ton qell Oo
    avatar
    Heine
    MasculinAge : 23Messages : 155

    le Jeu 22 Mai 2014 - 15:09

    Merci merci o/



    avatar
    arvalis
    FémininAge : 23Messages : 54

    le Jeu 22 Mai 2014 - 17:44

    merci =)
    avatar
    Titou2302
    MasculinAge : 15Messages : 95

    le Mar 3 Juin 2014 - 18:37

    Merci !

    avatar
    Yuuka
    FémininAge : 28Messages : 195

    le Mer 4 Juin 2014 - 14:02

    Merci beaucoup.
    avatar
    Eshon
    FémininAge : 37Messages : 194

    le Mer 4 Juin 2014 - 15:31

    Très jolie ce codage et j'aime beaucoup le rendu !
    Merci pour le partage ! ^^
    avatar
    0smose
    FémininAge : 22Messages : 165

    le Ven 6 Juin 2014 - 20:24

    J'aime énormément ton travail ! Je n'en avais encore jamais vu mais quel joli code ! Merci énormément !





    But I'm only human
    And I bleed when I fall down... I'm only human and I crash and I break down. Your words in my head,
    knives in my heart. You build me up and then I fall apart.
    'Cause I'm only human.
    avatar
    Cruelly
    FémininAge : 25Messages : 2563

    le Ven 6 Juin 2014 - 20:37

    je vais tenter avec le tien :)



    MON PROJET :heart: j'ai besoin d'avis ^^


    avatar
    Allison01
    FémininAge : 33Messages : 197

    le Jeu 12 Juin 2014 - 22:34

    merci Very Happy
    avatar
    Toxic.Sunny
    MasculinAge : 24Messages : 10

    le Ven 13 Juin 2014 - 17:22

    Merci ! Very Happy
    avatar
    [W]endy
    FémininAge : 27Messages : 117

    le Lun 16 Juin 2014 - 19:01

    Merci (:
    avatar
    ColorTime'Less
    FémininAge : 21Messages : 100

    le Dim 22 Juin 2014 - 16:17

    parfait !
    Simple et original Very Happy
    avatar
    Sam-sam
    MasculinAge : 25Messages : 22

    le Dim 22 Juin 2014 - 17:58

    Merci
    avatar
    Zoé
    FémininAge : 19Messages : 185

    le Sam 28 Juin 2014 - 12:38

    merci !



    avatar
    x_Titia
    FémininAge : 27Messages : 92

    le Jeu 3 Juil 2014 - 14:42

    merci
    avatar
    Myfanwi
    FémininAge : 21Messages : 82

    le Dim 13 Juil 2014 - 21:53

    Merci Very Happy
    avatar
    DaZeli
    FémininAge : 22Messages : 377

    le Lun 14 Juil 2014 - 1:11

    C'est bien sympa! Merci!
    avatar
    Smokerlilitrope
    FémininAge : 29Messages : 45

    le Mer 16 Juil 2014 - 13:23

    Sublime :)
    Contenu sponsorisé


      La date/heure actuelle est Dim 27 Mai 2018 - 11:43