Rappel du premier message :
Suite à une demande de Filou voici un QEEL.
Je précise que l'arrière plan rose foncé correspond à mon forum.
HTML & CSS ~ Voici donc un aperçu : www ~ phpBB2
Et le code :
Le template index-body.
Repérez ceci (entre les lignes 173 et 221 du template de base) :
Et remplacez-le par ça :
CSS :
Un onglet pour deux contenus
Suite à une demande de Filou voici un QEEL.
Je précise que l'arrière plan rose foncé correspond à mon forum.
Et le code :
Le template index-body.
Repérez ceci (entre les lignes 173 et 221 du template de base) :
- 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 -->
Et remplacez-le par ça :
- Code:
<!-- BEGIN disable_viewonline -->
<br /><div class="QEEL_img"></div>
<div class="QEEL_fond">
<!-- BEGIN switch_viewonline_nolink -->
<div class="QEEL_titre">Qui est en ligne ?</div>
<!-- END switch_viewonline_nolink -->
<script type="text/javascript">
//<!--
function change_onglet(bouya)
{
document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
document.getElementById('onglet_'+bouya).className = 'onglet_1 onglet';
document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
document.getElementById('contenu_onglet_'+bouya).style.display = 'block';
document.getElementById('contenu_onglet2_'+anc_onglet).style.display = 'none';
document.getElementById('contenu_onglet2_'+bouya).style.display = 'block';
anc_onglet = bouya;
}
//-->
</script><div class="QEEL_bloc"><div class="onglet_0 onglet" id="onglet_un" onmouseover="javascript:change_onglet('un');">Groupe 1</div><div class="onglet_0 onglet" id="onglet_deux" onmouseover="javascript:change_onglet('deux');">Groupe 2</div><div class="onglet_0 onglet" id="onglet_trois" onmouseover="javascript:change_onglet('trois');">Groupe 3</div><div class="onglet_0 onglet" id="onglet_quatre" onmouseover="javascript:change_onglet('quatre');">Groupe 4</div><div class="onglet_0 onglet" id="onglet_cinq" onmouseover="javascript:change_onglet('cinq');">Groupe 5</div><div class="onglet_0 onglet" id="onglet_six" onmouseover="javascript:change_onglet('six');">Groupe 6</div><div class="onglet_0 onglet" id="onglet_sept" onmouseover="javascript:change_onglet('sept');">Groupe 7</div><div class="onglet_0 onglet" id="onglet_huit" onmouseover="javascript:change_onglet('huit');">Groupe 8</div></div>
<div class="contenu_onglet" id="contenu_onglet_un">
Contenu du 1er onglet
</div>
<div class="contenu_onglet" id="contenu_onglet_deux">
Contenu du 2ième onglet
</div>
<div class="contenu_onglet" id="contenu_onglet_trois">
Contenu du 3ième onglet
</div>
<div class="contenu_onglet" id="contenu_onglet_quatre">
Contenu du 4ième onglet
</div>
<div class="contenu_onglet" id="contenu_onglet_cinq">
Contenu du 5ième onglet
</div>
<div class="contenu_onglet" id="contenu_onglet_six">
Contenu du 6ième onglet
</div>
<div class="contenu_onglet" id="contenu_onglet_sept">
Contenu du 7ième onglet
</div>
<div class="contenu_onglet" id="contenu_onglet_huit">
Contenu du 8ième onglet
</div>
<div class="contenu_onglet2" id="contenu_onglet2_un">
Membres du 1er onglet
</div>
<div class="contenu_onglet2" id="contenu_onglet2_deux">
Membres du 2ième onglet
</div>
<div class="contenu_onglet2" id="contenu_onglet2_trois">
Membres du 3ième onglet
</div>
<div class="contenu_onglet2" id="contenu_onglet2_quatre">
Membres du 4ième onglet
</div>
<div class="contenu_onglet2" id="contenu_onglet2_cinq">
Membres du 5ième onglet
</div>
<div class="contenu_onglet2" id="contenu_onglet2_six">
Membres du 6ième onglet
</div>
<div class="contenu_onglet2" id="contenu_onglet2_sept">
Membres du 7ième onglet
</div>
<div class="contenu_onglet2" id="contenu_onglet2_huit">
Membres du 8ième onglet
</div><script type="text/javascript">
//<!--
var anc_onglet = 'un';
change_onglet(anc_onglet);
//-->
</script>
<div class="QEEL_desc"><div class="QEEL_soustitre">Description :</div>
</div><div class="QEEL_user"><div class="QEEL_soustitre">Membres :</div>
</div>
<div class="QEEL_stat"><div class="QEEL_soustitre">Statistiques :</div>{TOTAL_POSTS}<br />{TOTAL_USERS}<br />{NEWEST_USER}<br /><br />{TOTAL_USERS_ONLINE}<br />{RECORD_USERS}<br /><br />{LOGGED_IN_USER_LIST}<table class="transparent">{L_CONNECTED_MEMBERS}</table>
</div>
<a href="http://www.never-utopia.com" style="display: block; text-decoration: none; position: absolute; top: 355px; left: 380px;">A-Lice | Never-Utopia</a>
</div>
<!-- END disable_viewonline -->
CSS :
- Code:
/************QEEL par A-Lice************/
.QEEL_img {
width: 850px;
height: 230px;
overflow: hidden;
margin: auto;
background: url(http://nsa34.casimages.com/img/2015/03/18/150318061744808586.png);
}
.QEEL_fond {
width: 850px;
height: 375px;
margin: auto;
background: dimgray;
color: black;
font-size: 12px;
position: relative;
}
.QEEL_titre {
font-size: 40px;
font-family: Times New Roman;
text-align: center;
color: black;
position: relative;
top: -15px;
}
.QEEL_stat {
width: 600px;
height: 140px;
padding: 10px;
text-align: justify;
background: silver;
overflow: auto;
position: absolute;
top: 190px;
left: 205px;
}
.transparent .row1 {
background-color: transparent;
}
.transparent .gensmall {
font-size: 12px;
}
.QEEL_desc {
width: 340px;
height: 130px;
padding: 10px;
background: silver;
position: absolute;
top: 20px;
left: 205px;
}
.QEEL_user {
width: 230px;
height: 130px;
padding: 10px;
background: silver;
position: absolute;
top: 20px;
left: 575px;
}
.QEEL_soustitre {
font-size: 16px;
font-weight: bold;
}
.QEEL_bloc {
width: 170px;
height: 375px;
position: absolute;
top: 20px;
left: 20px;
}
/*onglets*/
.onglet {
width: 155px;
height: 22px;
padding: 5px;
background: silver;
margin-bottom: 10px;
box-shadow: 1px 2px 5px black;
}
.onglet_0 {
background: silver;
}
.onglet_1 {
background: white;
}
#onglet_un {
color: black;
text-align: center;
font-weight: bold;
font-size: 16px;
}
#onglet_deux {
color: black;
text-align: center;
font-weight: bold;
font-size: 16px;
}
#onglet_trois {
color: black;
text-align: center;
font-weight: bold;
font-size: 16px;
}
#onglet_quatre {
color: black;
text-align: center;
font-weight: bold;
font-size: 16px;
}
#onglet_cinq {
color: black;
text-align: center;
font-weight: bold;
font-size: 16px;
}
#onglet_six {
color: black;
text-align: center;
font-weight: bold;
font-size: 16px;
}
#onglet_sept {
color: black;
text-align: center;
font-weight: bold;
font-size: 16px;
}
#onglet_huit {
color: black;
text-align: center;
font-weight: bold;
font-size: 16px;
}
.contenu_onglet {
color: black;
position: relative;
width: 340px;
height: 110px;
left: 215px;
top: 50px;
display: none;
overflow: auto;
z-index: 20;
}
#contenu_onglet_un {
font-size: 12px;
text-align: justify;
font-family: Times New Roan Regular;
}
#contenu_onglet_deux{
font-size: 12px;
text-align: justify;
font-family: Times New Roan Regular;
}
#contenu_onglet_trois {
font-size: 12px;
text-align: justify;
font-family: Times New Roan Regular;
}
#contenu_onglet_quatre {
font-size: 12px;
text-align: justify;
font-family: Times New Roan Regular;
}
#contenu_onglet_cinq {
font-size: 12px;
text-align: justify;
font-family: Times New Roan Regular;
}
#contenu_onglet_six {
font-size: 12px;
text-align: justify;
font-family: Times New Roan Regular;
}
#contenu_onglet_sept {
font-size: 12px;
text-align: justify;
font-family: Times New Roan Regular;
}
#contenu_onglet_huit {
font-size: 12px;
text-align: justify;
font-family: Times New Roan Regular;
}
.contenu_onglet2 {
color: black;
position: relative;
width: 230px;
height: 110px;
left: 585px;
top: -60px;
display: none;
overflow: auto;
z-index: 20;
}
#contenu_onglet2_un {
font-size: 12px;
text-align: justify;
font-family: Times New Roan Regular;
}
#contenu_onglet2_deux{
font-size: 12px;
text-align: justify;
font-family: Times New Roan Regular;
}
#contenu_onglet2_trois {
font-size: 12px;
text-align: justify;
font-family: Times New Roan Regular;
}
#contenu_onglet2_quatre {
font-size: 12px;
text-align: justify;
font-family: Times New Roan Regular;
}
#contenu_onglet2_cinq {
font-size: 12px;
text-align: justify;
font-family: Times New Roan Regular;
}
#contenu_onglet2_six {
font-size: 12px;
text-align: justify;
font-family: Times New Roan Regular;
}
#contenu_onglet2_sept {
font-size: 12px;
text-align: justify;
font-family: Times New Roan Regular;
}
#contenu_onglet2_huit {
font-size: 12px;
text-align: justify;
font-family: Times New Roan Regular;
}
/*fin onglets*/
/************Fin QEEL par A-Lice************/
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 Mar 24 Mar 2015 - 13:38, édité 1 fois
