Plop,
Un "Qui est en ligne ?" plutôt zen, loin du stress et très épuré, basé sur la demande de Ju. La description des groupes apparait au survol de ceux-ci, dans l'encadré opaque sur l'illustration. Cette dernière est de taille 780*225px.
/!\ Je rappelle que cette section existe en cas de problème, je ne réponds pas aux MP (et encore moins quand ils sont rageux !).
Qui est en ligne ?
Template & CSS ▬ Groupes à onglet
Aperçu classique ▬ www
Dans le CSS
CODE:SÉLECTIONNER
- Code:
-
/* -------------------------------- QEEL -------------------------------- */
/*** MISE EN FORME LIENS AU SURVOL ***/
a:hover {
text-decoration: none !important;
}
/*** MISE EN FORME FONT DU QEEL ***/
.fond_qeel {
width: 780px;
border-radius: 0px 0px 25px 25px;
background-color: #E4E4E4;
margin: auto;
height: 620px;
position: relative;
}
/*** MISE EN FORME TITRE PRINCIPAL ***/
.titre_principal {
color: #2D5A57;
font-family: georgia;
font-size: 28;
letter-spacing: 5px;
text-align: center;
}
/*** MISE EN FORME SOUS-TITRE "Et à qui se fier ?" ***/
.titre_secondaire {
color: #C7BBC1;
font-family: georgia;
font-size: 14px;
text-align: center;
}
/*** MISE EN FORME BLOC STATISTIQUES ***/
.bloc_stat {
background-color: #F0F0F0;
padding: 15px;
width: 200px;
height: 150px;
overflow: auto;
font-size: 11px;
border: 2px solid #CACACA;
text-align: justify;
color: #515151;
position: absolute;
left: 3em;
z-index: 1;
}
/*** MISE EN FORME BLOC DES GROUPES ***/
.bloc_groupes {
background-color: #F0F0F0;
padding: 15px;
width: 420px;
height: 50px;
overflow: auto;
font-size: 20px;
border: 2px solid #CACACA;
text-align: center;
font-family: 'Six Caps', sans-serif;
position: absolute;
left: 14.5em;
z-index: 1;
}
/*** MISE EN FORME BLOC DES CONNECTES LES 24H ***/
.bloc_connectes {
background-color: #F0F0F0;
padding: 15px;
width: 420px;
height: 50px;
overflow: auto;
font-size: 20px;
border: 2px solid #CACACA;
text-align: center;
font-family: 'Six Caps', sans-serif;
position: absolute;
left: 14.5em;
z-index: 1;
}
/*** COULEUR ET TRANSPARENCE DU FOND DES 24H ***/
#kaboum .row1 {
background-color : transparent;
}
#kaboum span.gensmall {
color: #515151;
}
/*** MISE EN FORME DES TITRES (simple + survol) ***/
.titre_bloc {
font-family: 'Dancing Script', cursive;
font-size: 24px;
font-weight: bold;
color: #B0C3AB;
position: absolute;
z-index: 2;
margin-top: -18px;
}
.titre_bloc:hover {
color: #2D5A57;
}
/*** GROUPES A ONGLETS ***/
/* Mise en forme des noms de groupe */
.groupe_onglet {
display: inline-block;
padding: 10px;
}
/* Mise en forme du bloc en transparence de description */
.contenu_groupe_onglet {
padding: 15px;
display: none;
width: 315px;
height: 115px;
overflow: auto;
font-size: 11px;
color: #414141;
text-align: justify;
background-color: #CBC4C2;
position: absolute;
top: 14em;
left: 21em;
filter: alpha(opacity = 50);
opacity: 0.5;
}
/* Mise en forme des liens */
.contenu_groupe_onglet a{
text-decoration: none !important;
}
/*** MISE EN FORME DES CREDITS ***/
.credits {
text-align: right;
margin-right: 10px;
font-size: 9px;
margin-top: 10px;
}
.credits a{
color: #B0C3AB;
}
/* -------------------------------- FIN QEEL -------------------------------- */
Dans le template Index_Body, remplacez
CODE:SÉLECTIONNER
- 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 -->
Par ceci