QEEL#4

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

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 850px.
◈ Les groupes sont donc au nombre de 8. Il y a un effet au survol qui permet de montrer la couleur du groupe.
◈ 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 nom 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 (QEEL)----------------*/
/*-----------------Loukoum sur Tourmaline-----------------*/
/*--------------------------------------------------------*/
.qeelfond {
  width:790px;
  height:310px;
  font-size:10px;
}

.qeeltitre {
  text-align:center;
  font-size:30px;
  font-family:'Gobold';
}

.qeeltitre a, .qeelcredits a {
  color:var(--lien);
}

.qeeltitre a:hover, .qeelcredits a:hover {
  color:var(--lienh);
}

.qeelenligne {
  position:relative;
  top:10px;
  left:10px;
  width:360px;
  height:90px;
  padding:5px;
  text-align:justify;
  color:var(--texteq);
  background-color:var(--fondq);
  overflow:auto;
  border:2px solid var(--bqeel);
}

.qeelpasses {
  position:relative;
  top:20px;
  left:10px;
  width:360px;
  height:135px;
  padding:5px;
  text-align:justify;
  color:var(--texteq);
  background-color:var(--fondq);
  overflow:auto;
  border:2px solid var(--bqeel);
}

.qeelgroupes {
  position:relative;
  top:-242px;
  left:395px;
  width:460px;
  height:105px;
  text-align:justify;
  color:var(--texteq);
  column-count: 2;
  font-family:'Gobold';
}

.qeelgroupes div {
  width:219px;
  background-image: linear-gradient(to right, #8a8651, #897845, #86693d, #825b36, #7d4d32);
  padding:2px;
  margin-bottom:4.5px;
  text-align:center;
  font-size:14px;
}

.groupe1:hover {
  background-image: linear-gradient(to right, #2a3904, #2a3904, #2a3904, #2a3904, #2a3904);
}

.groupe2:hover {
  background-image: linear-gradient(to right, #3e4d0c, #3e4d0c, #3e4d0c, #3e4d0c, #3e4d0c);
}

.groupe3:hover {
  background-image: linear-gradient(to right, #636f38, #636f38, #636f38, #636f38, #636f38);
}

.groupe4:hover {
  background-image: linear-gradient(to right, #858c76, #858c76, #858c76, #858c76, #858c76);
}

.groupe5:hover {
  background-image: linear-gradient(to right, #8c8e7e, #8c8e7e, #8c8e7e, #8c8e7e, #8c8e7e);
}

.groupe6:hover {
  background-image: linear-gradient(to right, #81714f, #81714f, #81714f, #81714f, #81714f);
}

.groupe7:hover {
  background-image: linear-gradient(to right, #503127, #503127, #503127, #503127, #503127);
}

.groupe8:hover {
  background-image: linear-gradient(to right, #1c090c, #1c090c, #1c090c, #1c090c, #1c090c);
}

.qeeldernier {
  position:relative;
  top:-234px;
  left:393px;
  width:212px;
  height:135px;
  padding:5px;
  text-align:center;
  color:var(--texteq);
  background-color:var(--fondq);
  border:2px solid var(--bqeel);
}

.qeeldernier img {
  height:135px;
  float:left;
  padding-right:10px;
  transition: all 1s ease-out;
}

.qeeldernier img:hover {
  -webkit-filter : grayscale(70%);
  filter : grayscale(70%);
  transition: all 1s ease-out;
}

.qeeldernier strong {
  font-family:'Gobold';
  font-size:15px;
}

.qeelcredits {
  position:relative;
  top:-382px;
  left:630px;
  width:209px;
  height:90px;
  padding:5px;
  text-align:justify;
  color:var(--texteq);
  background-color:var(--fondq);
  overflow:hidden;
  border:2px solid var(--bqeel);
  border-bottom:none;
  font-size:10px;
}

.qeelcredits:hover {
  overflow:auto;
  padding-right:5px;
}

.qeelmembres {
  position:relative;
  top:-382px;
  left:630px;
  width:223px;
  height:20px;
  text-align:center;
  color:var(--texteq);
  background-image: linear-gradient(to right, #8a8651, #897845, #86693d, #825b36, #7d4d32);
  font-weight:bold;
  padding-top:5px;
  font-family:'Gobold';
}

.qeelmessages {
  position:relative;
  top:-382px;
  left:630px;
  width:223px;
  height:20px;
  text-align:center;
  color:var(--texteq);
  background-image: linear-gradient(to right, #8a8651, #897845, #86693d, #825b36, #7d4d32);
  font-weight:bold;
  font-family:'Gobold';
}

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 nom de vos groupes et les phrases.

Code:: {JAVASCRIPT}

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">

<tr>
<td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
</tr>


<tr>
<td class="row1" rowspan="3" align="center" valign="middle">
<div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
</td>
</tr>

</table>



<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>

   
   <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">
   
   <div class="fb-login-button"></div>
   
   
   <div class="ti-connect"></div>
   
   </div>
   </td>
   

   </tr>
   </table>
</form>


{CHATBOX_TOP}
{BOARD_INDEX}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50%" valign="top">

<span class="gensmall">{LAST_VISIT_DATE}<br />
{CURRENT_TIME}<br />
</span>


<br /><span class="gensmall"><a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall" rel="nofollow">{switch_delete_cookies.L_DELETE_COOKIES}</a></span>

</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>


<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>


</span>
</td>
</tr>
</table>


<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"/> </td>
   <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
   </tr>
   </table>
   </td>

   
   <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">
   
   <div class="fb-login-button"></div>
   
   
   <div class="ti-connect"></div>
   
   </div>
   </td>
   

   </tr>
   </table>
</form>



<div class="qeelfond">
  <div class="qeeltitre">
   <a href="{U_VIEWONLINE}" rel="nofollow">Dans le monde magique</a>
  </div>
  <div class="qeelenligne">
   <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/,"Nos sorciers et moldus que vous pouvez actuellement croiser");</script>
   </span>
  </div>
  <div class="qeelpasses">
   <table id="test"><tr><td>Celles et ceux qui sont rentré.e.s chez eux :
   {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 :/,"");</script>
   </td></tr></table>
  </div>
  <div class="qeelgroupes">
   <div class="groupe1">Manticore</div>
   <div class="groupe2">Acromentule</div>
   <div class="groupe3">Eruptif</div>
   <div class="groupe4">Demiguise</div>
   <div class="groupe5">Focifère</div>
   <div class="groupe6">Musard</div>
   <div class="groupe7">Licorne</div>
   <div class="groupe8">Boursouf</div>
  </div>
  <div class="qeeldernier">
   <span id="avatar_dernier_membre"></span><br/><span id="dernier_membre">{NEWEST_USER}</span><br/>est le.a dernier.ère à avoir pointé le bout de son nez !
   <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="qeelcredits">
   Portoloin est l'entière propriété de ses fondateurs Loukoum &
   Sunshine. Toute reproduction totale et partielle est formellement interdite sous peine de poursuites.<br/>
   Retrouvez l'ensemble des crédits (design &
   codage) <a href="https://portoloin.forumactif.com/t9-credits#9" target="_blank">juste ici</a>. Merci à ces personnes pour leur aide et leur partage.<br/>
   Portoloin - 17/09/2022
  </div>
  <div class="qeelmembres">
   <span class="texte" id="totalusers">
   {TOTAL_USERS}
   <script type="text/javascript">document.getElementById('totalusers').innerHTML=document.getElementById ('totalusers').innerHTML.replace(/Nous avons/,"");</script>
   <script type="text/javascript">document.getElementById('totalusers').innerHTML=document.getElementById ('totalusers').innerHTML.replace(/membre enregistré/,"habitant");</script>
   <script type="text/javascript">document.getElementById('totalusers').innerHTML=document.getElementById ('totalusers').innerHTML.replace(/membres enregistrés/,"habitants");</script>
   </span>
  </div>
  <div class="qeelmessages">
   <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/,"");</script>
   <script type="text/javascript">document.getElementById('totalposts').innerHTML=document.getElementById ('totalposts').innerHTML.replace(/messages/,"sorts");</script>
   </span>
  </div>
</div>
<br/>
<center>
  <a href="https://tbots-rpg.forumactif.com/" target="_blank"><img src="https://zupimages.net/up/22/23/hknn.gif" /></a>
</center>

{CHATBOX_BOTTOM}
<br clear="all" />

{AUTO_DST}

Enregistrez et surtout n'oubliez pas de publier ^^

Et voilà votre nouveau QEEL !

Rechercher

Résultats par : Messages Sujets
Recherche avancée