Qeel avec onglets pour les groupes
Suite à une demande d'Airore voici un Qeel.
Je précise que l'arrière plan blanc correspond à mon forum.
Et le code :
Dans Template index-body, remplacer ça (ligne 42 du template de base) :
- Code:
<!-- BEGIN disable_viewonline -->
<!-- BEGIN switch_viewonline_link -->
<div class="h3"><a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></div>
<!-- END switch_viewonline_link -->
<!-- BEGIN switch_viewonline_nolink -->
<div class="h3">{L_WHO_IS_ONLINE}</div>
<!-- END switch_viewonline_nolink -->
<img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" class="img-whois" />
<p>{TOTAL_USERS_ONLINE}<br />
{RECORD_USERS}
<br />
{LOGGED_IN_USER_LIST}
{L_ONLINE_USERS}
{L_CONNECTED_MEMBERS}<br />
{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}
<br />
<em>{LEGEND} : {GROUP_LEGEND}</em>
</p>
<div class="clear"></div>
<!-- BEGIN switch_statistics_link -->
<div class="h3"><a href="{U_STATISTICS}" rel="nofollow">{L_STATISTICS}</a></div>
<!-- END switch_statistics_link -->
<!-- BEGIN switch_statistics_nolink -->
<div class="h3">{L_STATISTICS}</div>
<!-- END switch_statistics_nolink -->
<p class="page-bottom">
{TOTAL_POSTS}
</p>
<p class="page-bottom">
{TOTAL_USERS}
</p>
<p class="page-bottom">
{NEWEST_USER}
</p>
<!-- BEGIN switch_chatbox_activate -->
<div class="h3"><a href="{S_JOIN_CHAT}" target="ChatBox">{CHATBOX_NAME}</a></div>
<div class="page-bottom">
{TOTAL_CHATTERS_ONLINE} :
{CHATTERS_LIST}<br />
</div>
<!-- BEGIN switch_chatbox_popup -->
<div id="chatbox_popup"></div>
<script type="text/javascript">
insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
</script>
<!-- END switch_chatbox_popup -->
<!-- END switch_chatbox_activate -->
<!-- END disable_viewonline -->
Par :
- Code:
<!-- BEGIN disable_viewonline -->
<div class="qeel_fond">
<!-- BEGIN switch_viewonline_link -->
<div class="qeel_titre"><a href="{U_VIEWONLINE}" rel="nofollow"><img src="https://i.imgur.com/izIhHns.jpg" /></a></div>
<!-- END switch_viewonline_link -->
<!-- BEGIN switch_viewonline_nolink -->
<div class="qeel_titre"><img src="https://i.imgur.com/izIhHns.jpg" /></div>
<!-- END switch_viewonline_nolink -->
<div class="qeel_bloc01">
{TOTAL_USERS_ONLINE} <br />
{RECORD_USERS}
<br />
{L_ONLINE_USERS}
<br />
{TOTAL_POSTS} <br />
{TOTAL_USERS} <br />
{NEWEST_USER} <br />
{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}
</div><div class="qeel_bloc04">
<div class="qeel_groupe1"><div class="infobulle1">DESCRIPTION DU GROUPE</div></div>
<div class="qeel_groupe1"><div class="infobulle1" style="top: -25px;">DESCRIPTION DU GROUPE</div></div>
<div class="qeel_groupe1"><div class="infobulle1" style="top: -70px;">DESCRIPTION DU GROUPE</div></div>
</div><div class="qeel_bloc02"><div class="qeel_case_grp">
</div>
<div class="qeel_bloc03"><div class="qeel_credit"><a href="http://www.never-utopia.com">A-Lice | Never-Utopia</a> pour le QEEL</div><img src="https://i.imgur.com/izIhHns.jpg" alt="crédit" /></div>
</div><div class="qeel_bloc04">
<div class="qeel_groupe2"><div class="infobulle2">DESCRIPTION DU GROUPE</div></div>
<div class="qeel_groupe2"><div class="infobulle2" style="top: -25px;">DESCRIPTION DU GROUPE</div></div>
<div class="qeel_groupe2"><div class="infobulle2" style="top: -70px;">DESCRIPTION DU GROUPE</div></div>
</div><div class="qeel_bloc01" style="top: -245px";>
{L_CONNECTED_MEMBERS}
</div>
</div>
<!-- END disable_viewonline -->
CSS :
- Code:
/************QEEL par A-Lice*************/
.qeel_titre {
font-size: 40px;
font-family: XX;
color: black;
text-align: center;
height: 60px;
}
.qeel_fond {
width: 790px;
height: 340px;
background: silver;
margin: auto;
padding: 5px;
}
.qeel_bloc01 {
width: 180px;
height: 260px;
background: dimgray;
padding: 10px;
display: inline-block;
color: white;
font-size: 12px;
position: relative;
z-index: 20;
top: -105px;
}
.qeel_bloc02 {
/*infobulle*/
display: inline-block;
width: 330px;
}
div.qeel_bloc03 {
width: 320px;
height: 150px;
overflow: hidden;
margin: auto;
background: dimgray;
}
.qeel_bloc03 img {
width: 320px;
height: 150px;
position: relative;
bottom: 150px;
display: inline-block;
transition: all 0.5s;
}
.qeel_bloc03:hover img {
bottom: 300px;
transition: all 0.5s;
}
.qeel_credit {
width: 300px;
height: 130px;
padding: 10px;
text-align: justify;
color: white;
font-size: 11px;
}
.qeel_bloc04 {
width: 30px;
height: 260px;
display: inline-block;
}
.qeel_case_grp {
width: 310px;
height: 120px;
padding: 5px;
margin-left: 5px;
}
/**onglets**/
.qeel_groupe1 {
position: relative;
height: 40px;
width: 40px;
border-radius: 50px;
overflow: visible;
margin-left: -20px;
background: black;
margin-bottom: 5px;
top: -15px;
}
.qeel_groupe1 .infobulle1 {
position: absolute;
left: 60px;
width: 310px;
height: 100px;
color: white;
opacity: 0;
visibility: hidden;
transition: all 0.5s;
top: 20px;
}
.qeel_groupe1:hover .infobulle1 {
opacity: 1;
visibility: visible;
z-index: 100;
transition: all 0.5s;
}
.qeel_groupe2 {
position: relative;
height: 40px;
width: 40px;
border-radius: 50px;
overflow: visible;
margin-left: 10px;
background: black;
margin-bottom: 5px;
top: -15px;
}
.qeel_groupe2 .infobulle2 {
position: absolute;
left: -330px;
width: 310px;
height: 100px;
color: white;
opacity: 0;
visibility: hidden;
transition: all 0.5s;
top: 20px;
}
.qeel_groupe2:hover .infobulle2 {
opacity: 1;
visibility: visible;
z-index: 100;
transition: all 0.5s;
}
/**fin onglets**/
/************Fin QEEL par A-Lice************/
Remarques : -Image pour le titre de 300px de largeur pour 80px de hauteur.
-Image pour les crédits de 320px de largeur pour 150px de hauteur.
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 ^^
