Le Deal du moment : -39%
Ordinateur portable ASUS Chromebook Vibe CX34 Flip
Voir le deal
399 €

Tourmaline :: Codage :: Codages complexes - phpBB2 :: QEEL

QEEL#3

Loukoum
Opale quincite
Messages : 181
Date d'inscription : 02/06/2020
Age : 30

QEEL#3 Empty
Loukoum
MessageSujet: QEEL#3 QEEL#3 EmptyLun 5 Sep - 22:15
QEEL


◈ Petit rendu en image ◈


A savoir sur ce QEEL

◈ Le crédit n'est pas présent sous le QEEL. Je vous demande donc de le signaler dans votre sujet des crédits. Ou de rajouter ce code sous le QEEL, avant le < /center >
Code:
<a href="https://tourmaline.forumactif.com/" target="_blank">QEEL réalisé par Loukoum</a>
◈ La largeur maximale de ce QEEL est de 800px.
◈ Les groupes sont donc au nombre de 9 avec un système d'onglets pour permettre d'y noter votre description. Il n'y a pas de lien menant vers les membres du groupes, mais vous pouvez éventuellement le rajouter dans le titre de l'onglet !
◈ Les couleurs des groupes se changent directement dans le template.
◈ Les phrases pourront être modifiées. Vous verrez, les codes sont tous prêt ^^
◈ Vous pouvez modifier : les couleurs, le style d'écriture, les phrases et le contenu des groupes.
◈ Si jamais vous avez besoin d'aide pour la modification du code ou un soucis, c'est par ici que je vous aiderai !

Le code

Merci à vous de l'utiliser !

Commençons par installer l'avatar du dernier inscrit, sans quoi l'image ne va pas apparaître ^^
Dans le template profile_view_body (Affichage > Templates > Profil), retrouvez
Code:
{AVATAR_IMG}
et remplacez-le par
Code:
<span id="avatar_membre">{AVATAR_IMG}</span>

Créez un nouveau Javascript qui permettra d'afficher l'image (Modules > Gestion des codes Javascript ; vérifiez que vos Javascripts sont activés).
Cochez Sur l'index.
Code:
$(function(){
$.get($("#dernier_membre a[href^='/u']")[0].href,function(d){
(a=$("#avatar_membre img",$(d))).length&&$("#avatar_dernier_membre").html(a);})
});

Maintenant, on part dans votre feuille CSS.
Voici le code à copier / coller. C'est ici que vous ferez vos modifications couleurs.
Code:
/*--------------------------------------------------------*/
/*---------------------Qui Est En Ligne-------------------*/
/*------------------Loukoum sur Tourmaline----------------*/
/*--------------------------------------------------------*/
.qeelfond {
  height:300px;
}
.qeelgroupes {
  position:relative;
  top:0px;
  left:0px;
  width:345px;
  height:300px;
}
.qeelintitule {
  position:relative;
  top:0px;
  left:0px;
  width:120px;
  height:100px;
}
.qeelonglets {
  position:relative;
  top:-100px;
  left:135px;
  width:290px;
  height:200px;
}
.onglet{
  display:inline-block;
  background-color:#E9E9E9;
  border:1px solid #29202C;
  font-size:20px;
  font-family:'IM Fell English SC';
  text-align:center;
  width:120px;
  height:25px;
  padding:2px;
  margin:1px;
}
.onglet_0{
}
.contenu_onglet {
  display: none;
  width:200px;
  height:287px;
  background-color:#E9E9E9;
  font-size:12px;
  font-family:'Arial';
  text-align:justify;
  overflow-x:hidden;
  overflow-y:auto;
  padding:5px;
  line-height:15px;
}
.contenu_onglet t {
  background-image: linear-gradient(to right,#7a8abc,#868cbe,#918fbf,#9b91bf,#a594c0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size:15px;
  font-family:'IM Fell English SC';
  font-weight:bold;
}
.qeelgroupetitre { 
  font-size:20px;
  font-family:'IM Fell English SC';
  background-color:#ADB5DE;
  color:#FFFFFF;
  text-align:center;
  padding:5px 0px;
}
.qeeltitre {
  font-family: 'IM Fell English SC';
  font-size:30px;
  text-align:center;
  position:relative;
  top:-300px;
  left:350px;
  width:200px;
  height:120px;
}
.qeeltitre a {
  color:#1D95FF;
  text-shadow: 2px 2px 2px #29202C;
  text-decoration:none;
}
.qeeldernier {
  position:relative;
  top:-292px;
  left:350px;
  width:200px;
  height:170px;
  background-color:#E4E5ED;
  text-align:center;
  overflow-x:hidden;
  overflow-y:auto;
  font-size:15px;
  font-family:'IM Fell English SC';
  text-align:center;
}
.qeeldernier img {
  width:200px;
  height:100px;
  object-fit:cover;
}
.qeelstats {
  position:relative;
  top:-590px;
  left:560px;
  width:225px;
  height:288px;
  padding:5px;
  background-color:#E4E5ED;
  font-size:12px;
  font-family:'Arial';
  text-align:justify;
  overflow:auto;
}
Enregistrez.

Et dernière étape : le template. Il s'agit de l'index_body (Affichage > Templates > Général)
C'est donc ici que vous allez modifier le texte de vos groupes, les couleurs des groupes et les phrases.
Code:
{JAVASCRIPT}
<!-- BEGIN message_admin_index -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <!-- BEGIN message_admin_titre -->
   <tr>
      <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
   </tr>
   <!-- END message_admin_titre -->
   <!-- BEGIN message_admin_txt -->
   <tr>
      <td class="row1" rowspan="3" align="center" valign="middle">
      <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
      </td>
   </tr>
   <!-- END message_admin_txt -->
</table>
<!-- END message_admin_index -->

<!-- BEGIN switch_user_login_form_header -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
        <tr>
            <td width="50%" valign="top" align="{switch_user_login_form_header.V_ALIGN}" class="row1">

                <table>
                    <tr>
                        <td><span class="genmed">{L_USERNAME}:</span> </td>
                        <td><input class="post" type="text" size="10" name="username"/> </td>
                        <td>
                            <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                            <span class="gensmall">{L_AUTO_LOGIN}</span> 
                        </td>
                    </tr>

                    <tr>
                        <td><span class="genmed">{L_PASSWORD}:</span> </td>
                        <td><input class="post" type="password" size="10" name="password"/> </td>
                        <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                    </tr>
                </table>
            </td>

            <!-- BEGIN switch_social_login -->
            <td width="10%" align="center" valign="middle" class="row1">
                <span class="genmed fb_or">{switch_user_login_form_header.switch_social_login.L_OR}</span>
            </td>
            <td width="40%" class="align_gauche row1">
                <div class="social_btn">
                    <!-- BEGIN fb_connect -->
                    <div class="fb-login-button"></div>
                    <!-- END fb_connect -->
                    <!-- BEGIN topicit_connect -->
                    <div class="ti-connect"></div>
                    <!-- END topicit_connect -->
                </div>
            </td>
            <!-- END switch_social_login -->

        </tr>
    </table>
</form>
<!-- END switch_user_login_form_header -->

{CHATBOX_TOP}
{BOARD_INDEX}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td width="50%" valign="top">
         <!-- BEGIN switch_user_logged_in -->
         <span class="gensmall"><a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a></span>
         <!-- END switch_user_logged_in -->
         <!-- BEGIN switch_delete_cookies -->
         <br /><span class="gensmall"><a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall" rel="nofollow">{switch_delete_cookies.L_DELETE_COOKIES}</a></span>
         <!-- END switch_delete_cookies -->
      </td>
      <td width="50%" align="right">
         <span class="gensmall">
            <a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a><br />
            <a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a><br />
            <a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>
            <!-- BEGIN switch_on_index -->
               <!-- BEGIN switch_delete_cookies -->
               <br /><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
               <!-- END switch_delete_cookies -->
            <!-- END switch_on_index -->
         </span>
      </td>
   </tr>
</table>

<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
        <tr>
            <td width="50%" valign="top" align="right" class="row1">

                <table>
                    <tr>
                        <td><span class="genmed">{L_USERNAME}:</span> </td>
                        <td><input class="post" type="text" size="10" name="username"/> </td>
                        <td>
                            <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                            <span class="gensmall">{L_AUTO_LOGIN}</span> 
                        </td>
                    </tr>

                    <tr>
                        <td><span class="genmed">{L_PASSWORD}:</span> </td>
                        <td><input class="post" type="password" size="10" name="password"/>&nbsp;</td>
                        <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                    </tr>
                </table>
            </td>

            <!-- BEGIN switch_social_login -->
            <td width="10%" align="center" valign="middle" class="row1">
                <span class="genmed fb_or">{switch_user_login_form_footer.switch_social_login.L_OR}</span>
            </td>
            <td width="40%" class="align_gauche row1">
                <div class="social_btn">
                    <!-- BEGIN fb_connect -->
                    <div class="fb-login-button"></div>
                    <!-- END fb_connect -->
                    <!-- BEGIN topicit_connect -->
                    <div class="ti-connect"></div>
                    <!-- END topicit_connect -->
                </div>
            </td>
            <!-- END switch_social_login -->

        </tr>
    </table>
</form>
<!-- END switch_user_login_form_footer -->

<!-- BEGIN disable_viewonline -->
<link href="https://fonts.googleapis.com/css2?family=IM+Fell+English+SC&display=swap" rel="stylesheet" />
<div class="qeelfond">
  <div class="qeelgroupes">
    <div class="qeelintitule">
    <script type="text/javascript">
      //<!--
      function change_onglet(name)
      {
      document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
      document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
      document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
      document.getElementById('contenu_onglet_'+name).style.display = 'block';
      anc_onglet = name;
      }
      //-->
    </script>
    <span class="onglet_0 onglet" id="onglet_1" onmouseover="javascript:change_onglet('1');"><span style="color:#5E4E2D;">Moonlight</span></span>
    <span class="onglet_0 onglet" id="onglet_2" onmouseover="javascript:change_onglet('2');"><span style="color:#941B1B;">Vampires</span></span>
    <span class="onglet_0 onglet" id="onglet_3" onmouseover="javascript:change_onglet('3');"><span style="color:#638E0F;">Witches</span></span>
    <span class="onglet_0 onglet" id="onglet_4" onmouseover="javascript:change_onglet('4');"><span style="color:#1D182B;">Hybrids</span></span>
    <span class="onglet_0 onglet" id="onglet_5" onmouseover="javascript:change_onglet('5');"><span style="color:#9b5a76;">Heretics</span></span>
    <span class="onglet_0 onglet" id="onglet_6" onmouseover="javascript:change_onglet('6');"><span style="color:#AD765B;">Sirens</span></span>
    <span class="onglet_0 onglet" id="onglet_7" onmouseover="javascript:change_onglet('7');"><span style="color:#701F5A;">Others</span></span>
    <span class="onglet_0 onglet" id="onglet_8" onmouseover="javascript:change_onglet('8');"><span style="color:#1F7A80;">Brotherhood</span></span>
    <span class="onglet_0 onglet" id="onglet_9" onmouseover="javascript:change_onglet('9');"><span style="color:#ad9418;">Humans</span></span>
    </div>
    <div class="qeelonglets">
      <div class="contenu_onglets">
        <div class="contenu_onglets">
          <div class="contenu_onglet" id="contenu_onglet_1">
            <div class="qeelgroupetitre">Cursed by the moon</div><br/>
            <t>Les loups-garous</t> Certains naissent comme ça, d'autres le deviennent suite à une morsure, vous pouvez avoir plusieurs statuts au cours de votre vie, celui d'oméga : le loup solitaire qui ne survit pas sans une meute, celui de bêta qui fait partie de la meute, ou celui d'alpha le chef de meute. Les alphas ont les yeux rouges, ceux qui n'ont pas pris de vie innocente possèdent des yeux jaunes, ceux qui ont pris une vie des yeux bleus. Leurs morsures sont mortelles pour un vampire, le sang de Klaus est le seul remède connu. Ils sont cependant vulnérables à l'aconit et à la magie.
          </div>
        </div>
        <div class="contenu_onglet" id="contenu_onglet_2">
          <div class="qeelgroupetitre">Only blood</div><br/>
          <t>Les vampires</t> Ce sont des êtres surnaturels qui se nourrissent essentiellement de sang humain ou d'animaux. Ils sont rapides et plus ils sont âgés plus ils deviennent puissants. Ils sont sensibles aux chasseurs, au soleil, à la magie et à la verveine. Sans une bague de jour les vampires sont condamnés à sortir la nuit.
        </div>
        <div class="contenu_onglet" id="contenu_onglet_3">
          <div class="qeelgroupetitre">Witchcraft</div><br/>
          <t>Les sorcières, sorciers et druides</t> Ce sont des êtres humains possédants des capacités surnaturelles, capables de faire de grandes choses grâce à des sorts plus ou moins puissants. Parmi eux nous trouvons également des druides et certains d'entre eux servent d'émissaire au sein des meutes de loups-garous. Les druides possèdent des connaissances sans égal sur le monde surnaturel, d'un regard, ils peuvent reconnaître la créature surnaturelle face à eux. Ils manipulent le sorbier s'en servant comme barrière et moyen de protection.
        </div>
        <div class="contenu_onglet" id="contenu_onglet_4">
          <div class="qeelgroupetitre">We are both</div><br/>
          <t>Les hybrides</t> Il s'agit d'un loup-garou transformé en vampire, le sang du double Petrova servant à terminer la transition. Comme les vampires, ils sont rapides, ont une force surhumaine, peuvent hypnotiser les humains ne prenant pas de verveine. Ils peuvent se changer en loup quand ils le désirent, leurs morsures sont mortelles pour un vampire, le sang de Klaus étant le seul remède. Ils sont cependant vulnérables à la verveine, à l'aconit et à la magie.
        </div>
        <div class="contenu_onglet" id="contenu_onglet_5">
          <div class="qeelgroupetitre">Heretics</div><br/>
          <t>Les hérétiques</t> Ce sont des hybrides nés sorciers (siphoners, incapables de produire leur propre magie) transformés en vampires. Ces derniers ont été exilés du Coven Gemini parce qu'ils ne pouvaient pas produire de magie, juste voler et utiliser celle d'autres sorciers, ou d'objets emplis de magie. Une fois vampires ils sont capables d'aspirer la magie de leur vampirisme et donc de pratiquer la magie. Condamnés et exilés par leurs propres Coven dans une prison magique, ce sont les sorcières de la Nouvelle-Orléans qui choisiront de les libérer afin de maintenir leur avance sur les loups-garous dans cette guerre des factions.
        </div>
        <div class="contenu_onglet" id="contenu_onglet_6">
          <div class="qeelgroupetitre">Sirens</div><br/>
          Oubliez les branchies, les queues de poisson et les écailles.<t> Les sirènes</t> sont des créatures surnaturelles ayant plusieurs milliards d'années derrière elles, elles sont donc plus anciennes que les premiers vampires, ses créatures sont très peu nombreuses, ce sont des hommes et des femmes possédant des pouvoirs psychiques (télépathie, voix envoûtante, elles peuvent également faire des imitations et prendre la voix d'un ou d'une autre pour tromper sa victime.) Ils s'en prennent aux créatures "maléfiques" et aux humains non innocent. Les sirènes sacrifient ses êtres en échange de la jeunesse et de la beauté éternelle.
        </div>
        <div class="contenu_onglet" id="contenu_onglet_7">
          <div class="qeelgroupetitre">Others</div><br/>
          Dans ce groupe, nous retrouvons <t>toutes sortes de créatures surnaturelles</t> telles que les, were-coyote, mais aussi les were-jaguar, les manticores, ou encore les kanimas, mais également des wendigos, des kitsunes contrôlant divers éléments, des chimères, mais également des créatures de légendes comme les phénix et aussi des banshees.
        </div>
        <div class="contenu_onglet" id="contenu_onglet_8">
          <div class="qeelgroupetitre">Brotherhood</div><br/>
          Ceux qui font partie de ce groupe sont des <t>chasseurs de créatures surnaturelles un peu spéciaux</t>, en effet ces derniers sont sous la protection des sorcières depuis des siècles. Ils sont là pour une raison : protéger les humains et les garder dans l'ignorance du monde surnaturel. Ils sont plus rapides, plus forts et plus précis que les chasseurs dit "normaux" et chacun d'eux possèdent un pouvoir. Ils sont du côté de la vie et peuvent venir en aide à un humain ou une créature surnaturelle dans le besoin. Ces chasseurs sont des soldats obéissant aux ordres qu'on leur donne. Et certaines fois ils ont pour ordre de protéger des créatures surnaturelles.
        </div>
        <div class="contenu_onglet" id="contenu_onglet_9">
          <div class="qeelgroupetitre">Flesh and Bones</div><br/>
          <t>Les humains</t> Ils sont rares à être au courant de l'existence du surnaturel, ils vivent leurs vies bien tranquillement (ou pas), certains d'entre eux sont des chasseurs. Pour la plupart les attaques de vampires sont des attaques d'animaux sauvages, loin de se douter de ce dont il s'agit réellement. Mais certains décident de se battre soit parce qu'ils veulent se défendre soit parce qu'ils viennent d'une famille de chasseur.
        </div>
      </div>
      <script type="text/javascript">
        //<!--
        var anc_onglet = '1';
        change_onglet(anc_onglet);
        //-->
      </script>
    </div>
  </div>
  <div class="qeeltitre">
    <a href="{U_VIEWONLINE}" rel="nofollow">Qui se trouve à la Nouvelle Orléans ?</a>
  </div>
  <div class="qeeldernier">
    <span id="avatar_dernier_membre"></span><br/>
    Le dernier à avoir posé ses valises est<br/><span id="dernier_membre">{NEWEST_USER}</span>
    <script type="text/javascript">document.getElementById('dernier_membre').innerHTML=document.getElementById('dernier_membre').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"");</script>
  </div>
  <div class="qeelstats">
    <span class="texte" id="totalusers">
      {TOTAL_USERS}.
      <script type="text/javascript">document.getElementById('totalusers').innerHTML=document.getElementById ('totalusers').innerHTML.replace(/Nous avons/,"Vous pouvez retrouver");</script>
      <script type="text/javascript">document.getElementById('totalusers').innerHTML=document.getElementById ('totalusers').innerHTML.replace(/membre enregistré/,"sorcier");</script>
      <script type="text/javascript">document.getElementById('totalusers').innerHTML=document.getElementById ('totalusers').innerHTML.replace(/membres enregistrés/,"touristes et habitants dans notre ville");</script>
    </span>
    <span class="texte" id="totalposts">
      {TOTAL_POSTS}
      <script type="text/javascript">document.getElementById('totalposts').innerHTML=document.getElementById ('totalposts').innerHTML.replace(/Nos membres ont posté un total de/,"Ces derniers ont déjà échangé");</script>
      <script type="text/javascript">document.getElementById('totalposts').innerHTML=document.getElementById ('totalposts').innerHTML.replace(/messages/,"sms.");</script>
    </span><br/>
    <span class="texte" id="totalusersonline">
      {TOTAL_USERS_ONLINE}.
      <script type="text/javascript">document.getElementById('totalusersonline').innerHTML=document.getElementById ('totalusersonline').innerHTML.replace(/Il y a en tout/,"Actuellement, ");</script>
      <script type="text/javascript">document.getElementById('totalusersonline').innerHTML=document.getElementById ('totalusersonline').innerHTML.replace(/utilisateur en ligne/,"habitant se balade");</script>
      <script type="text/javascript">document.getElementById('totalusersonline').innerHTML=document.getElementById ('totalusersonline').innerHTML.replace(/utilisateurs en ligne/,"habitants se baladent");</script>
      <script type="text/javascript">document.getElementById('totalusersonline').innerHTML=document.getElementById ('totalusersonline').innerHTML.replace(/Enregistré/,"habitant");</script>
      <script type="text/javascript">document.getElementById('totalusersonline').innerHTML=document.getElementById ('totalusersonline').innerHTML.replace(/Enregistrés/,"habitants");</script>
      <script type="text/javascript">document.getElementById('totalusersonline').innerHTML=document.getElementById ('totalusersonline').innerHTML.replace(/Invisible/,"créature surnaturelle");</script>
      <script type="text/javascript">document.getElementById('totalusersonline').innerHTML=document.getElementById ('totalusersonline').innerHTML.replace(/Invisibles/,"créatures surnaturelles");</script>
      <script type="text/javascript">document.getElementById('totalusersonline').innerHTML=document.getElementById ('totalusersonline').innerHTML.replace(/Invité/,"touriste");</script>
      <script type="text/javascript">document.getElementById('totalusersonline').innerHTML=document.getElementById ('totalusersonline').innerHTML.replace(/Invités/,"touristes");</script>
    </span><br/><br/>
    <span class="texte" id="loggedinuserlist">
      {LOGGED_IN_USER_LIST}
      <script type="text/javascript">document.getElementById('loggedinuserlist').innerHTML=document.getElementById ('loggedinuserlist').innerHTML.replace(/Utilisateurs enregistrés/,"Ceux qui traînent actuellement dans les rues");</script>
    </span><br/><br/>
    <table id="test"><tr><td>
      {L_CONNECTED_MEMBERS}
      <script type="text/javascript">document.getElementById('test').innerHTML=document.getElementById('test').innerHTML.replace(/Membres connectés au cours des 24 dernières heures :/,"Ils sont partis se reposer :");
      </script>
      </td></tr></table><br/><br/>
    <table><tr><td>
      {L_WHOSBIRTHDAY_TODAY}<br/>
      {L_WHOSBIRTHDAY_WEEK}
      </td></tr></table>
  </div>
</div>
<!-- END disable_viewonline -->
{CHATBOX_BOTTOM}
<br clear="all" />
<!-- BEGIN switch_legend -->
<!-- END switch_legend -->

{AUTO_DST}
Enregistrez et surtout n'oubliez pas de publier ^^

Et voilà votre nouveau QEEL !
QEEL#3
Revenir en haut
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Tourmaline :: Codage :: Codages complexes - phpBB2 :: QEEL-
Sauter vers: