Qeel en 3 colonnes
Suite à une demande de Airore voici un Qeel en 3 colonnes avec les groupes en infobulles.
Je précise que l'arrière plan jaune correspond à mon forum.
HTML & CSS ~ Voici donc un aperçu : www
Et le code :
Remplacer cette partie du template index-body :
- 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 celle-ci :
- Code:
<!-- BEGIN disable_viewonline -->
<div id="qeel_titre">Qui est là ?</div>
<table id="qeel_position">
<tr>
<td class="qeel_colonne1"><div class="qeel_bloc">{TOTAL_POSTS}<br/>{TOTAL_USERS}<br/>{NEWEST_USER}<br/>{RECORD_USERS}
</div><br/>
<div class="qeel_bloc">{TOTAL_USERS_ONLINE}<br/>{LOGGED_IN_USER_LIST}
</div>
</td>
<td width="20px;"></td>
<td class="qeel_centre">
<div class="qeel_groupe" style="background:#5C1010"><div class="infobulle">DESCRIPTION DU GROUPE</div></div><br/>
<div class="qeel_groupe" style="background:#0F2652"><div class="infobulle">DESCRIPTION DU GROUPE</div></div><br/>
<div class="qeel_groupe" style="background:#739E93"><div class="infobulle">DESCRIPTION DU GROUPE</div></div><br/>
<div class="qeel_groupe" style="background:#23471A"><div class="infobulle">DESCRIPTION DU GROUPE</div></div><br/>
<div class="qeel_groupe" style="background:#876716"><div class="infobulle">DESCRIPTION DU GROUPE</div></div><br/><a href="http://www.never-utopia.com/" class="ALice">© By A-Lice</a>
</td>
<td width="20px;"></td>
<td class="qeel_colonne2"><table class="transparent">{L_CONNECTED_MEMBERS}</table>
</td>
</tr>
</table>
<!-- END disable_viewonline -->
CSS :
- Code:
.transparent .row1 {
background-color: transparent;
}
.transparent .gensmall {
font-size:12px;
}
#qeel_position {
position: relative;
margin:auto;
}
#qeel_titre {
font-size:30px;
font-weight: bold;
color:black;
text-align:center;
}
.qeel_colonne1 {
font-size: 12px;
text-align: justify;
width: 255px;
height: 345px;
background:#5c7885;
padding:10px;
border-top-left-radius:30px;
border-bottom-left-radius:30px;
}
.qeel_centre {
background:transparent;
width:130px;
height:305px;
padding:20px;
}
.qeel_colonne2 {
width: 255px;
height: 345px;
background:#5c7885;
padding:10px;
text-align:center;
font-size:12px;
border-top-right-radius:30px;
border-bottom-right-radius:30px;
}
.qeel_bloc {
width: 235px;
padding:10px;
height: 150px;
background:#d8d2cb;
border-radius:30px;
overflow:auto;
}
.qeel_groupe {
position: relative;
height: 60px;
width: 60px;
border-radius:100px;
overflow: visible;
margin:auto;
}
.qeel_groupe .infobulle {
position: absolute;
top: 0px;
left: 50px;
width: 150px;
height: 100px;
background:#d8d2cb;
opacity: 0;
visibility: hidden;
transition: 0.5s;
padding:10px;
border-radius:30px;
}
.qeel_groupe:hover .infobulle {
opacity: 1;
visibility: visible;
z-index: 100;
transition: 0.5s;
}
.ALice {
font-size:12px;
text-decoration:none;
display:block;
text-align:center;
}
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 ^^
Dernière édition par A-Lice le Lun 16 Fév 2015 - 11:52, édité 1 fois
