- Kasux a écrit:
- Situation : Janolapin, administrateur du forum "Ritual adventure" viens demander comment mettre en place un QEEL, il faut que tu lui explique comment mettre en place les codes en plus de lui fournir.
[Je vais partir du principe que Janolapin s'y connait un peu en codage et que les templates sont ceux par défaut, sinon je demande préalablement au membre de me fournir le template concerné s'il a été modifié]
------------------------
Bonjour Janolapin,
Merci de te servir des services de "L'atelier du Peintre".
Alors, pour pouvoir modifier le qeel tu dois avoir accès au compte fondateur, ou indiquer au fondateur les changements à effectuer car il va falloir toucher aux templates.
Les templates se trouvent donc dans le panneau d'administration dans l'onglet "affichage".
Celui qui nous intéresse se trouve dans la partie "générale", il s'agit du template "index_body".
Il faut commencer par repérer ce code qui concerne donc la partie qui nous intéresse :
- Code:
-
<!-- BEGIN disable_viewonline -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<td class="catHead" colspan="2" height="28">
<!-- BEGIN switch_viewonline_link -->
<span class="cattitle"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></span>
<!-- END switch_viewonline_link -->
<!-- BEGIN switch_viewonline_nolink -->
<span class="cattitle">{L_WHO_IS_ONLINE}</span>
<!-- END switch_viewonline_nolink -->
</td>
</tr>
<tr>
<td class="row1" rowspan="6" align="center" valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></td>
<td class="row1" width="100%"><span class="gensmall">{TOTAL_POSTS}<br />
{TOTAL_USERS}<br />
{NEWEST_USER}</span></td>
</tr>
<tr>
<td class="row1"><span class="gensmall">{TOTAL_USERS_ONLINE}<br />
{RECORD_USERS}<br />
<br />
{LOGGED_IN_USER_LIST}</span></td>
</tr>
{L_CONNECTED_MEMBERS}
{L_WHOSBIRTHDAY_TODAY}
{L_WHOSBIRTHDAY_WEEK}
<tr>
<td class="row1"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></td>
</tr>
<!-- BEGIN switch_chatbox_activate -->
<tr>
<td class="row1">
<span class="gensmall">{TOTAL_CHATTERS_ONLINE} : {CHATTERS_LIST}<br />
<!-- BEGIN switch_chatbox_popup -->
<div id="chatbox_popup"></div>
<script type="text/javascript">
//<![CDATA[
insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
//]]>
</script>
<!-- END switch_chatbox_popup -->
</span>
</td>
</tr>
<!-- END switch_chatbox_activate -->
</table>
<!-- END disable_viewonline -->
Pour faire ce qui nous voulons, il faut enlever ce tableau, nous allons donc remplacer les table et les td par des div et supprimer les tr. et nous allons changer les classes afin d'éviter de changer d'autres morceau du forum et enlever ce qui est devenue inutile.
Et mettre en revanche un table pour la variable "L_CONNECTED_MEMBERS" car sinon elle pose des problèmes
Voilà ce que ça donne :
- Code:
-
<!-- BEGIN disable_viewonline -->
<div class="bloc_qeel">
<div class="titre_qeel" colspan="2" height="28">
<!-- BEGIN switch_viewonline_link -->
<span class="cattitle"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></span>
<!-- END switch_viewonline_link -->
<!-- BEGIN switch_viewonline_nolink -->
<span class="cattitle">{L_WHO_IS_ONLINE}</span>
<!-- END switch_viewonline_nolink -->
</div>
<div class="img_qeel" align="center" valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></div>
<div class="stats1_qeel" width="100%"><span class="gensmall">{TOTAL_POSTS}<br />
{TOTAL_USERS}<br />
{NEWEST_USER}</span></div>
<div class="stats2_qeel"><span class="gensmall">{TOTAL_USERS_ONLINE}<br />
{RECORD_USERS}<br />
<br />
{LOGGED_IN_USER_LIST}</span></div>
<table class="stat3_qeel">{L_CONNECTED_MEMBERS}</table>
<div class="legend_qeel"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></div>
<!-- BEGIN switch_chatbox_activate -->
<div class="chat_qeel">
<span class="gensmall">{TOTAL_CHATTERS_ONLINE} : {CHATTERS_LIST}<br />
<!-- BEGIN switch_chatbox_popup -->
<div id="chatbox_popup"></div>
<script type="text/javascript">
//<![CDATA[
insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
//]]>
</script>
<!-- END switch_chatbox_popup -->
</span>
</div>
<!-- END switch_chatbox_activate -->
</div>
<!-- END disable_viewonline -->
Une fois nos changements fait on enregistre et on pense à publier.
Ensuite, tout se passe au niveau de la feuille de style (ou CSS), on reste dans l'onglet "affichage" et on se dirige cette fois vers "couleurs" et on sélectionne le deuxième onglet "Feuille de style CSS"
On commence par y renseigner les classes dont on va avoir besoin :
- Code:
-
/*modification qeel*/
/*bloc du qeel*/
.bloc_qeel{
}
/*titre du qeel*/
.titre_qeel{
}
.titre_qeel .cattitle{
}
/*image du qeel*/
.img_qeel{
}
#i_whosonline{
}
/*nombre de messages et de membres et dernier utilisateur inscrit*/
.stats1_qeel{
}
/*liste des utilisateurs en ligne et record*/
.stats2_qeel{
}
/*liste des connectés les dernières XX heures*/
.stat3_qeel{
}
/*légende des groupes*/
.legend_qeel{
}
/*nombre et liste des utilisateurs sur la chatbox*/
.chat_qeel{
}
Il ne reste plus qu'à personnaliser le CSS comme on le souhaite :
- Code:
-
/*modification qeel*/
/*bloc du qeel*/
.bloc_qeel{
background:#1B5C3B;
border:2px solid #910924;
border-radius:180px;
width:800px;
height:570px;
overflow:auto;
}
/*titre du qeel*/
.titre_qeel{
margin:15px 50px 10px 200px;
}
.titre_qeel .cattitle{
font-size:30px;
font-family:Verdana;
color:#910924;
text-shadow: 1px 1px 1px #CF3252;
text-decoration:underline;
}
/*image du qeel*/
.img_qeel{
background:#7ACD6F;
margin:15px !important;
border:1px dotted #CF3252;
border-radius:80px 30px 30px 30px;
float:left;
padding:0px;
}
#i_whosonline{
width:300px;
height:300px;
border-radius:80px 30px 30px 30px;
margin: 5px !important;
}
/*nombre de messages et de membres et dernier utilisateur inscrit*/
.stats1_qeel{
border:1px dotted #CF3252;
border-radius:20px 60px 20px 20px;
background:#7ACD6F;
float:left;
margin: 5px 10px 5px 20px;
padding: 5px;
width:380px;
height:50px;
overflow:auto;
}
/*liste des utilisateurs en ligne et record*/
.stats2_qeel {
border:1px dotted #CF3252;
border-radius:20px;
background:#7ACD6F;
float:left;
margin: 5px 10px 5px 20px;
padding:5px;
width:380px;
height:140px;
overflow:auto;
}
/*liste des connectés les dernières XX heures*/
.stat3_qeel .row1{
border:1px dotted #CF3252 !important;
border-radius:20px !important;
background:#7ACD6F !important;
float:left;
margin: 5px 10px 5px 20px !important;
width:380px !important;
height:80px !important;
overflow:auto !important;
}
/*légende des groupes*/
.legend_qeel{
border:1px dotted #CF3252;
border-radius:20px;
background:#7ACD6F;
margin: 5px 32px 5px 32px;
padding:5px;
width:90%;
height:20px;
overflow:auto;
}
/*nombre et liste des utilisateurs sur la chatbox*/
.chat_qeel{
border:1px dotted #CF3252;
border-radius:20px 20px 60px 60px;
background:#7ACD6F;
float:left;
margin: 5px 32px 5px 32px;
padding:5px;
width:90%;
height:60px;
overflow:auto;
}
Et voilà, tu peux voir le rendue sur mon forum de test :
http://testcss.forumpro.fr/forumSi tu as des questions n'hésites pas.
------------------------------------
Voilà pour mon test.
Merci
Accueil Le mini site 
Sujet: Fleur d'oranger 
Sam 9 Nov - 16:57
