[MAJ 8 FEV] Réalisations II

Lun 15 Jan - 13:55
ARYA
- -
MERCY - MERCY - MERCY

ALYS

Remplacez l'intégralité du template index_box par :
Code:
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
     <tr>
     <td valign="bottom">
     <!-- BEGIN switch_user_logged_in -->
     <span class="gensmall">{LAST_VISIT_DATE}<br />
     {CURRENT_TIME}<br />
     </span>
     <!-- END switch_user_logged_in -->
     <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
     </td>
     <td class="gensmall" align="right" valign="bottom">
     <!-- BEGIN switch_user_logged_in -->
     <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
     <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
     <!-- END switch_user_logged_in -->
     <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
     </td>
     </tr>
    </table>

        <!-- BEGIN catrow --><!-- BEGIN tablehead -->
        <div class="tleCAT">{catrow.tablehead.L_FORUM}</div>
        <div class="mdlCAT"><span style="display:block; height:1px; clear:both;"></span>
        <!-- END tablehead -->

         <!-- BEGIN cathead -->
         <!-- END cathead -->
        
        <!-- BEGIN forumrow -->
         <div class="FRM"><div class="tleFRM"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div><div id="descFRM">{catrow.forumrow.FORUM_DESC}</div><div class="sfFRM">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div><div class="boxFRM"><img class="imgFRM" src="{catrow.forumrow.FORUM_FOLDER_IMG}" /><div style="display:inline-block; vertical-align:middle;"><div class="nbFRM">{catrow.forumrow.TOPICS} S</div><div class="nbIIFRM">{catrow.forumrow.POSTS} M</div></div><div class="lmsgFRM">{catrow.forumrow.LAST_POST}</div></div></div>
         <!-- END forumrow -->
         <!-- BEGIN catfoot -->

         <!-- BEGIN inc -->
         <!-- END inc -->
    
         <!-- END catfoot -->
         <!-- BEGIN tablefoot -->
          <br clear="all" /></div>
        <!-- END tablefoot --><!-- END catrow -->

Partie CSS :
Code:
/* BLOC TITRE CATEGORIE */
.tleCAT {
margin:auto;
width:880px; padding:10px; text-align:left;
}
/* TITRE CATEGORIE */
.tleCAT h2 {
margin:0 auto; display:inline-block; vertical-align:middle;
font-size:42px; letter-spacing:3px; font-style:italic;
font-family:Arial; color:#1D7258; text-shadow:0 0 3px rgba(0,0,0,0.3); /* MODIFIABLE */
}
/* TRAIT TITRE CATEGORIE */
.tleCAT h2::after {
content:''; display:inline-block; vertical-align:middle; margin-left:5px;
width:250px; height:1px;
background:#1D7258; /* MODIFIABLE */
}
/* BLOC CATEGORIE */
.mdlCAT {
margin:auto; width:870px; padding-left:30px;
}
/* BLOC FORUM */
.FRM {
float:left; margin-bottom:20px; width:400px; overflow:hidden;
border-top:2px solid #7B5B2F; border-bottom:2px solid #7B5B2F; /* MODIFIABLE */
}
.FRM:nth-of-type(even) {
margin-left:35px;
}
/* BLOC TITRE FORUM */
.tleFRM {
position:absolute; z-index:3; margin-top:10px; margin-left:10px;
}
/* TITRE FORUM */
.tleFRM a {
display:inline-block; vertical-align:middle;
color:#1D7258 !important; text-shadow:1px 1px 0px rgba(0,0,0,0.2); /* MODIFIABLE */
font-family:Arial; font-size:16px; font-weight:bold; font-style:italic;
}
/* TRAIT TITRE FORUM */
.tleFRM a::after {
content:''; display:inline-block; vertical-align:middle; margin-left:5px;
width:100px; height:1px;
background:#1D7258; /* MODIFIABLE */
}
/* BLOC IMAGE DESCRIPTIVE FORUM */
#descFRM {
width:400px; height:400px; overflow:hidden;
background:#7B5B2F; /* MODIFIABLE */
}
/* IMAGE DESCRIPTIVE FORUM */
#descFRM img {
position:absolute; z-index:2;
width:400px; height:400px;
opacity:0.9;
}  
/* DESCRIPTION FORUM */
.descFRM {
position:absolute; z-index:3; margin-left:15px; margin-top:40px;
width:360px; height:135px; padding:5px; overflow-y:auto;
background:#7B5B2F; color:white; /* MODIFIABLE */
font-size:11px; text-align:justify; font-family:Arial;
opacity:0; transition:all 0.65s ease; -webkit-transition:all 0.65s ease;
}
.FRM:hover .descFRM {
opacity:1;
}
/* BLOC SOUS-FORUMS */
.sfFRM {
position:absolute; z-index:3; margin-top:-200px; margin-left:15px;
width:370px; max-height:120px; overflow-y:auto;
font-size:10px; text-align:center; color:rgba(0,0,0,0);
opacity:0; transition:all 0.65s ease; -webkit-transition:all 0.65s ease;
}
.FRM:hover .sfFRM {
opacity:1;
}
/* SOUS-FORUMS */
.sfFRM a{
display:inline-block; vertical-align:middle; margin:5px 5px 0;
width:150px; padding:5px;
background:#7B5B2F; color:white !important; /* MODIFIABLE */
font-family:Arial; font-size:10px;
}
/* ICÔNES FORUM */
.imgFRM {
position:absolute; z-index:5; margin-top:-25px;
}
/* BLOC NOMBRE SUJETS & MESSAGES / DERNIER MESSAGE FORUM */
.boxFRM {
position:absolute; z-index:3; margin-top:-62px;
width:390px; padding:5px;
background:#C6A97E; /* MODIFIABLE */
}
/* NOMBRE SUJETS FORUM */
.nbFRM {
margin-bottom:2px;
width:70px; height:15px; padding:5px; overflow:hidden;
text-align:center; font-size:11px;  font-family:Arial;
background:#1D7258; color:#C6A97E; /* MODIFIABLE */
}
/* NOMBRE MESSAGES FORUM */
.nbIIFRM {
width:70px; height:15px; padding:5px; overflow:hidden;
text-align:center; font-size:11px; font-family:Arial;
background:#1D7258; color:#C6A97E; /* MODIFIABLE */
}
/* DERNIER MESSAGE FORUM */
.lmsgFRM {
display:inline-block; vertical-align:middle; margin-left:5px;
width:305px;
font-size:11px; font-family:Arial; text-align:center;
color:#7B5B2F; /* MODIFIABLE */
}
.lmsgFRM br:nth-of-type(1) {
display:none;
}
.lmsgFRM a:nth-of-type(1) {
margin-right:5px;
}

Instructions :


Remplacez le code du QEEL [lignes 136 à 184] par celui-ci :
Code:
<!-- BEGIN disable_viewonline -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td><!-- TITRE --><div class="tleQEEL"><a href="{U_VIEWONLINE}" rel="nofollow">Les Düériniens présents et statistiques</a><!-- TRAIT --><span></span></div><!-- GROUPES --><div class="GQEEL">{GROUP_LEGEND}</div><div class="QEEL"><!-- STATISTIQUES --><div class="boxQEEL"><div class="tleIIQEEL">Statistiques</div><div class="stsQEEL"><!-- TOTAL MESSAGES --><div class="tlPQEEL"><span id="tPOSTS">{TOTAL_POSTS}</span><script type="text/javascript">document.getElementById('tPOSTS').innerHTML=document.getElementById('tPOSTS').innerHTML.replace(/Nos membres ont posté un total de /," ") .replace(/messages/," ");</script><br/>messages</div><!-- TOTAL MEMBRES --><div class="tlMQEEL"><span id="tUSERS">{TOTAL_USERS}</span><script type="text/javascript">document.getElementById('tUSERS').innerHTML=document.getElementById('tUSERS').innerHTML.replace(/Nous avons /," ") .replace(/membres enregistrés/," ") .replace(/membre enregistré/," ");</script><br/>comptes</div><!-- DERNIER UTILISATEUR ENREGISTRE --><div class="lstQEEL">Bienvenue à<br/><span id="nUSER">{NEWEST_USER}</span><script type="text/javascript">document.getElementById('nUSER').innerHTML=document.getElementById('nUSER').innerHTML.replace(/L'utilisateur enregistré le plus récent est /," ")</script></div><!-- UTILISATEURS EN LIGNE --><div id="TLUS">{TOTAL_USERS_ONLINE}</div><script type="text/javascript">document.getElementById('TLUS').innerHTML=document.getElementById('TLUS').innerHTML.replace(/Il y a en tout/,"En ce moment");</script></div></div><!-- MEMBRES CONNECTES --><div class="boxQEEL"><div class="tleIIQEEL">Les connectés</div><div class="onlineQEEL" id="onLINE">{LOGGED_IN_USERS_LIST}</div></div><!-- 24H --><div class="boxQEEL"><div class="tleIIQEEL">Ces dernières 24H</div><div class="dayQEEL"><table>{L_CONNECTED_MEMBERS}</table></div></div></div>
</td></tr></table>
<!-- END disable_viewonline -->

Partie CSS :
Code:
/* BLOC TITRE QEEL */
.tleQEEL {
margin:0 auto 10px; width:975px;
text-align:left; font-size:26px; letter-spacing:2px;
}
/* TITRE QEEL */
.tleQEEL a {
display:inline-block; vertical-align:middle; margin-right:5px;
color:#1D7258; text-shadow:0 0 3px rgba(0,0,0,0.3); /* MODIFIABLE */
}
/* TRAIT TITRE QEEL */
.tleQEEL span {
display:inline-block; vertical-align:middle;
width:30%; height:1px;
background:#1D7258; /* MODIFIABLE */
}
/* BLOC GROUPES QEEL */
.GQEEL {
margin:0 auto;
width:975px; padding:10px 0;
background:#7B5B2F; /* MODIFIABLE */
color:rgba(0,0,0,0); text-align:center;
}
/* GROUPES QEEL */
.GQEEL a{
font-family:Arial; font-size:14px; color:white !important; /* MODIFIABLE */
}
/* QEEL */
.QEEL {
margin:auto; width:975px; height:210px; padding:10px 0;
text-align:center; font-family:Arial;
background:url(image.png); border-bottom:2px solid #7B5B2F; /* MODIFIABLE */
}
/* POSITIONNEMENT QEEL */
.boxQEEL {
display:inline-block; vertical-align:top;
width:230px; height:210px;
}
.boxQEEL:nth-of-type(2) {
margin:0 65px;
}
/* TITRES STATISTIQUES / CONNECTES / 24H QEEL */
.tleIIQEEL {
height:20px; padding:5px 0;
background:#7B5B2F; color:#C6A97E; /* MODIFIABLE */
text-align:center; font-size:16px;
}
/* STATISTIQUES QEEL */
.stsQEEL {
height:155px; padding-top:25px;
background:#C6A97E; color:black; /* MODIFIABLE */
}
/* TOTAL MESSAGES QEEL */
.tlPQEEL {
display:inline-block; vertical-align:top;
width:105px;
text-align:center; font-size:11px;
}
/* TOTAL MEMBRES QEEL */
.tlMQEEL {
display:inline-block; vertical-align:top; margin-left:5px;
width:105px;
text-align:center; font-size:11px;
}
/* DERNIER UTILISATEUR ENREGISTRE QEEL */
.lstQEEL {
margin:10px auto; width:200px;
text-align:center; font-size:12px;
}
/* NOMBRE UTILISEURS EN LIGNE QEEL */
#TLUS {
margin:auto; width:200px;
font-size:10px; text-align:center;
}
/* MEMBRES CONNECTES QEEL */
.onlineQEEL {
width:220px; height:170px; padding:5px; overflow:auto;
font-size:11px; text-align:justify;
background:#C6A97E; color:black; /* MODIFIABLE */
}
/* 24H QEEL */
.dayQEEL {
width:220px; height:170px; padding:5px; overflow:auto;
font-size:11px; text-align:justify;
background:#C6A97E; /* MODIFIABLE */
}
.dayQEEL .row1 {
background:none; padding:0 !important;
}
/* COULEUR TEXTE 24H QEEL */
.dayQEEL .gensmall {
font-family:Arial; font-size:11px;
color:black; /* MODIFIABLE */
}

YOGI

ANATHÈME

ZELANKIEL


ALKAÏNE

Remplacez l'intégralité du template index_box par :
Code:
<link href="https://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet">
     <table width="900px" border="0" cellspacing="0" cellpadding="0" align="center">
     <tr>
     <td style="text-align:center; line-height:13px;">
 <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
 <div class="lksCAT">
     <!-- BEGIN switch_user_logged_in -->
     <span><a class="gensmall" href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a> - <a class="gensmall" href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a> - <a class="gensmall" href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></span><br/>
     <!-- END switch_user_logged_in -->
 <!-- BEGIN switch_user_logged_in -->
     <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a> - <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><!-- END switch_user_logged_in --> - <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></div>
     </td>
     </tr>
    </table>

    <!-- BEGIN catrow --><!-- BEGIN tablehead -->
    <div class="tleCAT">{catrow.tablehead.L_FORUM}</div>
 <div class="mdlCAT">
 <!-- END tablehead -->

     <!-- BEGIN cathead -->
     <!-- END cathead -->
    
     <!-- BEGIN forumrow -->
    <div class="FRM"><div class="sfFRM"><img src="{catrow.forumrow.FORUM_FOLDER_IMG}" class="imgFRM" /><div>{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div><script type="text/javascript">$('.sfFRM').each(function(){$(this).html($(this).html().replace(/>, /g,"><br /> "));});</script></div><div class="boxFRM"><div class="tleFRM"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div><div class="descFRM">{catrow.forumrow.FORUM_DESC}</div></div><div class="boxDESC"><div class="lmsgFRM"><div class="lstavFRM"><!-- BEGIN avatar -->{catrow.forumrow.avatar.LAST_POST_AVATAR}<!-- END avatar --></div>{catrow.forumrow.LAST_POST}</div></div></div>    
     <!-- END forumrow -->
    
    <!-- BEGIN catfoot -->
     <!-- END catfoot -->
     <!-- BEGIN tablefoot -->
 </div><div class="btmCAT"></div>
    <!-- END tablefoot --><!-- END catrow -->

Partie CSS :
Code:
/* LIENS STATISTIQUES FORUM */
.lksCAT {
font-family:Arial; text-transform:uppercase; font-size:11px;
color:#E15F71; /* MODIFIABLE */
}
.lksCAT a.gensmall {
display:inline-block; vertical-align:middle;
color:#E15F71; /* MODIFIABLE */
}
/* BLOC TITRE CATEGORIE */
.tleCAT {
margin:auto; margin-top:5px;
width:900px; height:50px; text-align:left;
background:url(image.png); /* MODIFIABLE */
}
/* TITRE CATEGORIE */
.tleCAT h2 {
margin:0; padding-left:20px;
font-size:32px;
font-family:Kaushan Script; color:#40225C; /* MODIFIABLE */
}
/* BLOC CATEGORIE */
.mdlCAT {
margin:auto; width:900px; padding:10px 0;
background:#FFFDD7; /* MODIFIABLE */
}
/* BAS CATEGORIE */
.btmCAT {
margin:0 auto 10px;
width:900px; height:25px;
background:#DA374E; /* MODIFIABLE */
}
/* BLOC FORUM */
.FRM {
margin:10px auto; width:870px; padding:10px 0;
text-align:center; font-family:Arial;
background:#FFFFFF; /* MODIFIABLE */
}
/* BLOC ICÔNES & SOUS-FORUMS */
.sfFRM {
display:inline-block; vertical-align:top;
width:200px; height:140px;
}
/* ICÔNES FORUM */
.imgFRM {
width:200px; height:140px;
}
/* BLOC SOUS-FORUMS */
.sfFRM div {
position:absolute; z-index:3; margin-top:-140px;
width:200px; height:130px; padding-top:10px; overflow-y:auto;
text-align:center; text-transform:uppercase;
background:#EBEFCF; /* MODIFIABLE */
opacity:0; transition:all 0.85s ease; -webkit-transition:all 0.85s ease;
}
.FRM:hover .sfFRM div {
opacity:1;
}
/* SOUS-FORUMS */
.sfFRM a {
color:#40225C !important; /* MODIFIABLE */
}
/* BLOC TITRE & DESCRIPTION FORUM */
.boxFRM {
display:inline-block; vertical-align:top; margin:0 10px;
width:410px; height:120px; padding:10px;
background:#FFAD89; /* MODIFIABLE */
}
/* BORDURE TITRE FORUM */
.tleFRM {
margin:0 auto 5px;
width:335px; height:15px; padding-bottom:5px; text-align:center;
border-bottom:1px solid white; /* MODIFIABLE */
}
/* TITRE FORUM */
.tleFRM a{
font-size:13px; letter-spacing:3px;
font-family:Arial; color:white !important; font-weight:bold; /* MODIFIABLE */
}
/* DESCRIPTION FORUM */
.descFRM {
width:410px; height:90px; overflow:hidden;
font-size:11px; text-align:justify; line-height:13.2px;
color:white;  /* MODIFIABLE */
}
.descFRM:hover {
width:405px; padding-right:5px; overflow-y:auto;
}
/* BLOC IMAGE DESCRIPTIVE & DERNIER MESSAGE FORUM */
.boxDESC {
display:inline-block; vertical-align:top;
width:200px; height:140px;
background:#D6D6D6; /* MODIFIABLE */
}
/* IMAGE DESCRIPTIVE FORUM */
.descFRM img {
position:absolute; z-index:3; margin-top:-36px; margin-left:430px;
width:200px; height:140px;
}
/* DERNIER MESSAGE FORUM */
.lmsgFRM {
position:absolute; z-index:5;
width:200px; height:120px; padding-top:20px;
text-align:center; font-size:11px; text-transform:uppercase;
background:#EBEFCF; color:#40225C; /* MODIFIABLE */
opacity:0; transition:all 0.85s ease; -webkit-transition:all 0.85s ease;
}
.FRM:hover .lmsgFRM {
opacity:1;
}
/* AVATAR DERNIER POSTEUR FORUM */
.lstavFRM {
position:absolute; margin-top:32px; margin-left:80px;
width:35px; height:35px; border-radius:35px; overflow:hidden;
border:2px solid white; /* MODIFIABLE */
}
.lstavFRM img {
width:35px;
}
.lmsgFRM strong {
display:block;
margin-top:50px;
}

Taille des icônes du forum : 200*140
Taille des images descriptives : 200*140


Instructions :




▲ Supprimez les lignes 66 à 89 du template index_body
Remplacez le code du QEEL [lignes 136 à 184] par :

Code:
<!-- BEGIN disable_viewonline -->
<table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td><div class="QEEL"><!-- STATISTIQUES --><div class="stsQEEL"><!-- DERNIER INSCRIT --><div>Bienvenue à</div><span id="nUSER">{NEWEST_USER}</span><script type="text/javascript">document.getElementById('nUSER').innerHTML=document.getElementById('nUSER').innerHTML.replace(/L'utilisateur enregistré le plus récent est /," ")</script><br/><br/><br/><br/><!-- TOTAL MEMBRES --><div>Colorblind a</div><span id="tUSERS">{TOTAL_USERS}</span><script type="text/javascript">document.getElementById('tUSERS').innerHTML=document.getElementById('tUSERS').innerHTML.replace(/Nous avons /," ") .replace(/membre(s?) enregistré(s?)/,"membre$1");</script><br/><!-- TOTAL MESSAGES --><span id="tPOSTS">{TOTAL_POSTS}</span><script type="text/javascript">document.getElementById('tPOSTS').innerHTML=document.getElementById('tPOSTS').innerHTML.replace(/Nos membres ont posté un total de /," ");</script></div>

<div class="boxQEEL"><!-- MEMBRES CONNECTES --><div class="onlineQEEL"><table><span id="TLUS" style="font-size:9px;">{TOTAL_USERS_ONLINE}</span><script type="text/javascript">document.getElementById('TLUS').innerHTML=document.getElementById('TLUS').innerHTML.replace(/Il y a en tout/,"");</script><br/><br/>{LOGGED_IN_USER_LIST}</table><br/></div><!-- 24H --><div class="dayQEEL"><table>{L_CONNECTED_MEMBERS}</table></div><!-- ANNIVERSAIRES --><div class="anvQEEL"><table>{L_WHOSBIRTHDAY_TODAY}</table></div>

<script type="text/javascript" src="http://sd-1.archive-host.com/membres/up/211183412958130190/onglets.js"></script>
<!-- TRAITS COLORES GROUPES --><div class="GQEEL"><div class="onglets"><!-- GROUPE 1 --><span class="onglet_0 onglet" id="onglet_eins" onmouseover="javascript:change_onglet('eins');" style="background-color:#A52121;"></span><!-- GROUPE 2 --><span class="onglet_0 onglet" id="onglet_zwei" onmouseover="javascript:change_onglet('zwei');" style="background-color:#324A99;"></span><!-- GROUPE 3 --><span class="onglet_0 onglet" id="onglet_drei" onmouseover="javascript:change_onglet('drei');" style="background-color:#21A53D;"></span><!-- GROUPE 4 --><span class="onglet_0 onglet" id="onglet_vier" onmouseover="javascript:change_onglet('vier');" style="background-color:#A021A5;"></span>
</div></div>

<!-- DESCRIPTIFS GROUPES --><div class="blocGQEEL"><div class="contenu_onglets"><!-- CONTENU GROUPE 1 --><div class="contenu_onglet" id="contenu_onglet_eins">Contenu groupe 1.</div><!-- CONTENU GROUPE 2 --><div class="contenu_onglet" id="contenu_onglet_zwei">Contenu groupe 2.</div><!-- CONTENU GROUPE 3 --><div class="contenu_onglet" id="contenu_onglet_drei">Contenu groupe 3.</div><!-- CONTENU GROUPE 4  --><div class="contenu_onglet" id="contenu_onglet_vier">Contenu groupe 4.</div>

</div></div></div>

<script type="text/javascript">
            //<!--
                    var anc_onglet = 'eins';
                    change_onglet(anc_onglet);
            //-->
            </script>
 
<!-- PARTENAIRES --><div class="partQEEL"><!-- TITRE --><div>Nos partenaires</div><!-- I --><a href="..." target="_blank"><img src="http://www.aht.li/2827805/8831.png" /></a><!-- II --><a href="..." target="_blank"><img src="http://www.aht.li/2827805/8831.png" /></a><!-- III --><a href="..." target="_blank"><img src="http://www.aht.li/2827805/8831.png" /></a><!-- IV --><a href="..." target="_blank"><img src="http://www.aht.li/2827805/8831.png" /></a><!-- V --><a href="..." target="_blank"><img src="http://www.aht.li/2827805/8831.png" /></a><!-- VI --><a href="..." target="_blank"><img src="http://www.aht.li/2827805/8831.png" /></a><!-- VII --><a href="..." target="_blank"><img src="http://www.aht.li/2827805/8831.png" /></a><!-- VIII --><a href="..." target="_blank"><img src="http://www.aht.li/2827805/8831.png" /></a><!-- IX --><a href="..." target="_blank"><img src="http://www.aht.li/2827805/8831.png" /></a><!-- LIGNE II --><!-- X --><a href="..." target="_blank"><img src="http://www.aht.li/2827805/8831.png" /></a><!-- XI --><a href="..." target="_blank"><img src="http://www.aht.li/2827805/8831.png" /></a><!-- XII --><a href="..." target="_blank"><img src="http://www.aht.li/2827805/8831.png" /></a><!-- XIII --><a href="..." target="_blank"><img src="http://www.aht.li/2827805/8831.png" /></a><!-- XIV --><a href="..." target="_blank"><img src="http://www.aht.li/2827805/8831.png" /></a><!-- XV --><a href="..." target="_blank"><img src="http://www.aht.li/2827805/8831.png" /></a><!-- XVI --><a href="..." target="_blank"><img src="http://www.aht.li/2827805/8831.png" /></a><!-- XVII --><a href="..." target="_blank"><img src="http://www.aht.li/2827805/8831.png" /></a><!-- XVIII --><a href="..." target="_blank"><img src="http://www.aht.li/2827805/8831.png" /></a></div>

</div></td></tr></table>
<!-- END disable_viewonline -->

Partie CSS :
Code:
/* QEEL */
.QEEL {
margin:auto; width:900px; font-family:Arial;
}
/* STATISTIQUES QEEL */
.stsQEEL {
display:inline-block; vertical-align:top;
width:300px; height:310px; padding-top:100px; overflow:hidden;
background:#EDEFF4; color:#40225C; /* MODIFIABLE */
text-align:center; font-size:11px;
}
/* INTITULES STATISTIQUES QEEL */
.stsQEEL div {
margin-bottom:-5px;
font-family:Kaushan Script; font-size:36px;
}
/* BLOC MEMBRES EN LIGNE / 24H / ANNIVERSAIRES / GROUPES QEEL */
.boxQEEL {
display:inline-block; vertical-align:top;
width:600px; height:410px;
background:#FFFDD7;  /* MODIFIABLE */
}
/* MEMBRES CONNECTES QEEL */
.onlineQEEL {
display:inline-block; vertical-align:top; margin:10px;
width:265px; height:160px; padding:10px; overflow-y:auto;
background:white; color:#E15F71; /* MODIFIABLE */
font-size:10px; text-align:justify;
}
/* 24H QEEL */
.dayQEEL {
display:inline-block; vertical-align:top; margin-top:10px;
width:265px; height:160px; padding:10px; overflow-y:auto;
background:white; /* MODIFIABLE */
font-size:10px; text-align:justify;
}
.dayQEEL .row1 {
padding:0 !important; background:none !important;
}
/* COULEUR TEXTE 24H QEEL */
.dayQEEL .row1 .gensmall {
font-family:Arial;
color:#E15F71; /* MODIFIABLE */
}
/* ANNIVERSAIRES QEEL */
.anvQEEL {
margin:0 auto 10px;
width:560px; height:30px; padding:10px; overflow-y:auto;
background:white; /* MODIFIABLE */
}
.anvQEEL .row1 {
padding:0 !important; background:none !important;
}
/* COULEUR TEXTE ANNIVERSAIRES QEEL */
.anvQEEL .row1 .gensmall {
font-family:Arial; color:#E15F71; /* MODIFIABLE */
}
/* BLOC TRAITS COLORES GROUPES QEEL */
.GQEEL {
margin:auto; width:580px; text-align:center;
}
/* TRAITS COLORES GROUPES QEEL */
.onglet {
display:inline-block; vertical-align:top;
width:145px; height:25px;
opacity:0.5; transition:all 0.45s linear; -webkit-transition:all 0.45s linear;
}
/* SURVOL TRAIT COLORE GROUPE QEEL */
.onglet_1 {
opacity:1;
}
/* BLOC DESCRIPTIFS GROUPES QEEL */
.blocGQEEL {
margin:auto;
width:560px; height:90px; padding:10px; overflow:auto;
background:white; color:#5B6EAD; /* MODIFIABLE */
font-size:10px; text-align:justify;
}
.contenu_onglet {
display:none;
}
/* PARTENAIRES QEEL */
.partQEEL {
margin:10px auto;
width:900px; padding:5px 0; text-align:center;
background:#FFFDD7;  /* MODIFIABLE */
}
/* TITRE PARTENAIRES QEEL */
.partQEEL div {
font-size:14px; text-transform:uppercase; font-weight:bold;
color:#40225C; /* MODIFIABLE */
}
.partQEEL a {
display:inline-block; vertical-align:middle; margin:5px;
}

Instructions :


MIRAA

GLAUCOPHANE

Remplacez l'intégralité du template index_box par :
Code:
<table width="900px" border="0" cellspacing="0" cellpadding="0" align="center">
         <tr>
         <td valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <span class="gensmall">{LAST_VISIT_DATE}<br />
         {CURRENT_TIME}<br />
         </span>
         <!-- END switch_user_logged_in -->
         <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
         </td>
         <td class="gensmall" align="right" valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
         <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
         <!-- END switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
         </td>
         </tr>    
        </table>
    
     <!-- BEGIN catrow --><!-- BEGIN tablehead -->
        <div class="tleCAT">{catrow.tablehead.L_FORUM}</div>
        <div class="mdlCAT"><span style="display:block; height:1px; clear:both;"></span>
        <!-- END tablehead -->

         <!-- BEGIN cathead -->
         <!-- END cathead -->
        
        <!-- BEGIN forumrow -->
        <div class="FRM"><div class="downFRM"></div><div class="leftFRM"></div><div class="rightFRM"></div><div class="upFRM"></div><div class="nbFRM">{catrow.forumrow.TOPICS}<br/>―<br/>{catrow.forumrow.POSTS}</div><div class="tleFRM"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div><img src="{catrow.forumrow.FORUM_FOLDER_IMG}" class="imgFRM" /><div class="sfFRM">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div><div class="lmsgFRM">{catrow.forumrow.LAST_POST}</div><div id="descFRM">{catrow.forumrow.FORUM_DESC}</div></div>
         <!-- END forumrow -->
        
        <!-- BEGIN catfoot -->
        <!-- END catfoot -->
        <!-- BEGIN tablefoot -->
     <br clear="all" /></div>
        <!-- END tablefoot --><!-- END catrow -->
 <!-- ADAPTATION DU VISUEL DE LITTLESNIPPETS / CODEPEN - PAR SKAEMP / CCCRUSH -->

Partie CSS :
Code:
/* BLOC TITRE CATEGORIE */
.tleCAT {
margin:10px auto 0;
width:900px; padding:10px 0; text-align:center;
background:black; /* MODIFIABLE */
}
/* TITRE CATEGORIE */
.tleCAT h2{
margin:0;
font-size:32px; text-transform:uppercase;
letter-spacing:2px; font-family:Arial; color:white; /* MODIFIABLE */
}
/* BLOC CATEGORIE */
.mdlCAT {
margin:auto; width:899px; padding-left:1px; text-align:center;
background:darkgrey; /* MODIFIABLE */
}
/* BLOC FORUM */
.FRM {
float:left; margin:7px 0 7px 7px;
width:290px; height:200px; overflow:hidden;
font-family:Arial; background:black; /* MODIFIABLE */
}
/* BANDE ▼ FORUM */
.downFRM {
position:absolute; z-index:3; margin-left:35px;
width:3px; height:0;
background:white; /* MODIFIABLE */
transition:all 0.45s linear; -webkit-transition:all 0.45s linear;
}
.FRM:hover .downFRM {
height:160px;
}
/* BANDE ► FORUM */
.leftFRM {
position:absolute; z-index:3; margin-top:175px;
width:0; height:3px;
background:white; /* MODIFIABLE */
transition:all 0.45s linear; -webkit-transition:all 0.45s linear;
transition-delay:0.5s; -webkit-transition-delay:0.5s;
}
.FRM:hover .leftFRM {
width:150px;
}
/* BANDE ◄ FORUM */
.rightFRM {
position:absolute; z-index:3; margin-top:105px; margin-left:290px;
width:0; height:3px;
background:white; /* MODIFIABLE */
transition:all 0.45s linear; -webkit-transition:all 0.45s linear;
transition-delay:0.5s; -webkit-transition-delay:0.5s;
}
.FRM:hover .rightFRM {
margin-left:50px; width:240px;
}
/* BANDE ▲ FORUM */
.upFRM {
position:absolute; z-index:3; margin-left:161px; margin-top:200px;
width:3px; height:0;
background:white; /* MODIFIABLE */
transition:all 0.45s linear; -webkit-transition:all 0.45s linear;
}
.FRM:hover .upFRM {
margin-top:120px; height:80px;
}
/* IMAGE DESCRIPTIVE FORUM */
#descFRM img {
width:290px; height:200px;
transition:all 0.55s linear; -webkit-transition:all 0.55s linear;
}
.FRM:hover #descFRM img {
opacity:0.5;
}
/* NOMBRE SUJETS & MESSAGES FORUM */
.nbFRM {
position:absolute; z-index:2;
width:35px; height:180px; padding-top:15px;
font-size:10px; text-align:center;
color:white; /* MODIFIABLE */
opacity:0; transition:all 0.45s linear; -webkit-transition:all 0.45s linear;
transition-delay:0s; -webkit-transition-delay:0s;
}
.FRM:hover .nbFRM {
opacity:1; transition-delay:0.5s; -webkit-transition-delay:0.5s;
}
/* BLOC TITRE FORUM */
.tleFRM {
position:absolute; z-index:3; margin-top:110px; margin-left:39px;
width:120px; height:55px; padding-top:10px;
text-transform:uppercase; text-align:center; font-family:Arial; font-size:13px; font-weight:bold; line-height:20px;
}
/* IER MOT TITRE FORUM */
.tleFRM a {  
color:white !important; /* MODIFIABLE */
}
/* IIND MOT TITRE FORUM */
.tleFRM b {
display:block;
color:black !important; /* MODIFIABLE */
}
/* ICÔNES FORUM */
.imgFRM {
position:absolute; z-index:2; margin-top:140px; margin-left:-96px;
width:100px; height:20px;
}
/* DESCRIPTION FORUM */
.descFRM {
position:absolute; z-index:2; margin-left:45px;
width:235px; height:95px; padding:5px; overflow-y:auto;
font-size:9px; text-align:justify;
color:white; /* MODIFIABLE */
opacity:0; transition:all 0.45s linear; -webkit-transition:all 0.45s linear;
transition-delay:0s; -webkit-transition-delay:0s;
}
.FRM:hover .descFRM {
opacity:1; transition-delay:0.5s; -webkit-transition-delay:0.5s;
}
/* ALIGNEMENT DESCRIPTION FORUM */
.descFRM span {
display:inline-block; vertical-align:bottom;
}
.descFRM span:nth-of-type(1) {
height:95px;
}
/* BLOC SOUS-FORUMS */
.sfFRM {
position:absolute; z-index:2; margin-top:180px;
width:160px; height:17px; padding-top:3px; overflow:hidden;
text-align:center; text-transform:uppercase; font-size:9px; color:rgba(0,0,0,0);
opacity:0; transition:all 0.45s linear; -webkit-transition:all 0.45s linear;
transition-delay:0s; -webkit-transition-delay:0s;
}
.FRM:hover .sfFRM {
opacity:1; transition-delay:0.5s; -webkit-transition-delay:0.5s;
}
/* SOUS-FORUMS */
.sfFRM a {
margin:0 2px; font-size:0px
}
/* SYMBOLES SOUS-FORUMS */
.sfFRM a::before {
content:'#'; /* MODIFIABLE */
display:inline-block; font-size:9px !important;
color:white; /* MODIFIABLE */
}
/* DERNIER MESSAGE FORUM */
.lmsgFRM {
position:absolute; z-index:2; margin-top:110px; margin-left:165px;
width:115px; height:80px; padding-top:10px; padding-left:10px; overflow:hidden;
text-align:left; font-size:9px; line-height:13px;
color:white; /* MODIFIABLE */
opacity:0; transition:all 0.45s linear; -webkit-transition:all 0.45s linear;
transition-delay:0s; -webkit-transition-delay:0s;
}
.FRM:hover .lmsgFRM {
opacity:1; transition-delay:0.5s; -webkit-transition-delay:0.5s;
}
/* TITRE DERNIER MESSAGE FORUM */
.lmsgFRM a {
color:white !important; /* MODIFIABLE */
}
/* TAILLE PSEUDONYME DERNIER POSTEUR FORUM */
.lmsgFRM .gensmall {
font-size:9px; /* MODIFIABLE */
}

Taille des icônes du forum : 100*20
Taille des images descriptives : 290*200


Instructions :


Encadrez le IInd mot du titre du forum par b :
Code:
Ier Mot<b>IInd Mot</b>



Encadrez le texte descriptif des balises suivantes :
Code:
<div class="descFRM"><!-- ALIGNEMENT --><span></span><!-- CONTENU --><span>Texte descriptif.</span></div>

CLYDE ALE

KURAMA-SAN
- -
XII - XII - XII



AERNIA

Remplacez l'intégralité du template index_box par :
Code:
<table width="800px" border="0" cellspacing="0" cellpadding="0" align="center">
         <tr>
         <td valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <span class="gensmall">{LAST_VISIT_DATE}<br />
         {CURRENT_TIME}<br />
         </span>
         <!-- END switch_user_logged_in -->
         <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
         </td>
         <td class="gensmall" align="right" valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
         <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
         <!-- END switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
         </td>
         </tr>    
        </table>
    
     <!-- BEGIN catrow --><!-- BEGIN tablehead -->
        <div class="tleCAT">{catrow.tablehead.L_FORUM}</div>
        <div class="mdlCAT"><span style="display:block; height:1px; clear:both;"></span>
        <!-- END tablehead -->

         <!-- BEGIN cathead -->
         <!-- END cathead -->
        
        <!-- BEGIN forumrow -->
        <div class="FRM"><div class="tleFRM"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div><div class="nbFRM">{catrow.forumrow.POSTS} messages pour {catrow.forumrow.TOPICS} échanges</div><img src="{catrow.forumrow.FORUM_FOLDER_IMG}" class="imgFRM" /><div class="lmsgFRM">{catrow.forumrow.LAST_POST}</div><script type="text/javascript">$('.lmsgFRM').each(function(){$(this).html($(this).html().replace(/<br>/g,'<span style="display:inline-block; padding:0 2px;"> </span>'));});</script><div class="lstavFRM"><!-- BEGIN avatar -->{catrow.forumrow.avatar.LAST_POST_AVATAR}<!-- END avatar --></div><div class="sfFRM"><span style="display:inline-block; vertical-align:middle; height:35px;"></span><span style="display:inline-block; vertical-align:middle;">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span></div><div id="descFRM">{catrow.forumrow.FORUM_DESC}</div></div>
         <!-- END forumrow -->
        
        <!-- BEGIN catfoot -->
        <!-- END catfoot -->
        <!-- BEGIN tablefoot -->
     <br clear="all" /></div>
        <!-- END tablefoot --><!-- END catrow -->

Partie CSS :
Code:
/* BLOC TITRE CATEGORIE */
.tleCAT {
margin:5px auto;
width:750px; padding:10px 0; text-align:center;
border-bottom:10px solid grey; /* MODIFIABLE */
}
/* TITRE CATEGORIE */
.tleCAT h2{
margin:0;
font-size:32px; text-transform:uppercase;
letter-spacing:2px; font-family:Arial; color:black; /* MODIFIABLE */
}
/* BLOC CATEGORIE */
.mdlCAT {
margin:auto; width:800px; padding-bottom:10px; text-align:center;
}
/* BLOC FORUM */
.FRM {
float:left; margin:15px 0;
width:390px; height:200px; overflow:hidden;
font-family:Arial; background:black; /* MODIFIABLE */
}
.FRM:nth-of-type(even) {
margin-left:20px;
}
/* IMAGE DESCRIPTIVE FORUM */
#descFRM img {
width:390px; height:200px;
opacity:0.5;
}
/* BLOC TITRE FORUM */
.tleFRM {
position:absolute; z-index:2; margin-top:-7px;
width:390px; text-align:center;
text-transform:uppercase; font-family:Arial; font-size:13px; font-weight:bold;
}
/* TITRE FORUM */
.tleFRM a {  
color:white !important; /* MODIFIABLE */
}
/* NOMBRE SUJETS & MESSAGES FORUM */
.nbFRM {
position:absolute; z-index:2; margin-top:25px;
width:290px; padding:4px 0 4px 100px;
font-size:10px; text-align:left;
background:grey; color:black /* MODIFIABLE */
}
/* DERNIER MESSAGE FORUM */
.lmsgFRM {
position:absolute; z-index:2; margin-top:51px;
width:285px; overflow:hidden;
text-align:right; font-size:9px;
color:white; /* MODIFIABLE */
}
/* TITRE DERNIER MESSAGE FORUM */
.lmsgFRM a {
color:white !important; /* MODIFIABLE */
}
/* AVATAR DERNIER POSTEUR FORUM */
.lstavFRM {
position:absolute; z-index:3; margin-top:15px; margin-left:290px;
width:85px; height:50px; overflow:hidden;
}
.lstavFRM img {
width:85px;
}
/* ICÔNES FORUM */
.imgFRM {
position:absolute; z-index:4; margin-top:40px; margin-left:160px;
width:50px; height:50px;
}
/* DESCRIPTION FORUM */
.descFRM {
position:absolute; z-index:2; margin-top:80px; margin-left:45px;
width:290px; height:75px; padding:5px; overflow-y:auto;
font-size:9px; text-align:justify;
background:lightgrey; color:black; /* MODIFIABLE */
}
/* BLOC SOUS-FORUMS */
.sfFRM {
position:absolute; z-index:2; margin-top:180px; margin-left:25px;
width:330px; height:35px; padding:0 5px; overflow-y:auto;
text-align:center; text-transform:uppercase; font-size:9px; font-family:Arial;
background:grey; color:black; /* MODIFIABLE */
}
/* SOUS-FORUMS */
.sfFRM a {
font-size:9px;
color:black !important; /* MODIFIABLE */
}

Taille des images descriptives : 390*200

Instructions :




Encadrez le texte descriptif des balises suivantes :
Code:
<div class="descFRM"> Texte descriptif </div>
Revenir en haut Aller en bas
Mar 6 Fév - 0:30
MIRAA

Remplacez le code du QEEL [lignes 136 à 184] par celui-ci :
Code:
<!-- BEGIN disable_viewonline -->
<table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td><div class="QEEL"><!-- TITRE --><div class="tleQEEL"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a><!-- UTILISATEURS EN LIGNE --><span id="TLUS" style="font-size:9px;">{TOTAL_USERS_ONLINE}</span><script type="text/javascript">document.getElementById('TLUS').innerHTML=document.getElementById('TLUS').innerHTML.replace(/Il y a en tout/,"");</script></div><!-- CONNECTES & 24H  --><div class="ondayQEEL"><table>{LOGGED_IN_USER_LIST}</table><br/><!-- 24H --><table>{L_CONNECTED_MEMBERS}</table></div><!-- TOTAL MESSAGES & MEMBRES --><div class="stsQEEL"><!-- TOTAL MESSAGES --><div class="tlPQEEL"><span id="tPOSTS">{TOTAL_POSTS}</span><script type="text/javascript">document.getElementById('tPOSTS').innerHTML=document.getElementById('tPOSTS').innerHTML.replace(/Nos membres ont posté un total de /," ") .replace(/messages/," ");</script><br/>messages</div><!-- TOTAL MEMBRES --><div class="tlMQEEL"><span id="tUSERS">{TOTAL_USERS}</span><script type="text/javascript">document.getElementById('tUSERS').innerHTML=document.getElementById('tUSERS').innerHTML.replace(/Nous avons /," ") .replace(/membres enregistrés/," ") .replace(/membre enregistré/," ");</script><br/>membres</div></div>

<!-- DISCLAIMER --><div class="cdtQEEL">QEEL par <a href="http://crushcrushcrush.actifforum.com/" target="_blank">Skaemp</a> d'après un croquis de Miraa.</div><br/>

<!-- DERNIER UTILISATEUR ENREGISTRE --><div class="lstQEEL"><!-- AVATAR --><span id="lstavQEEL"></span><!-- BIENVENUE -->Bienvenue à<br/><br/><br/><!-- PSEUDONYME --><span id="nUSER">{NEWEST_USER}</span><script type="text/javascript">document.getElementById('nUSER').innerHTML=document.getElementById('nUSER').innerHTML.replace(/L'utilisateur enregistré le plus récent est /," ")</script></div>

<!-- TRAITS COLORES GROUPES --><div class="GQEEL"><div class="onglets"><!-- GROUPE 1 --><span class="onglet_0 onglet" id="onglet_eins" onmouseover="javascript:change_onglet('eins');" style="background-color:#FA5858;"></span><!-- GROUPE 2 --><span class="onglet_0 onglet" id="onglet_zwei" onmouseover="javascript:change_onglet('zwei');" style="background-color:#FF8000;"></span><!-- GROUPE 3 --><span class="onglet_0 onglet" id="onglet_drei" onmouseover="javascript:change_onglet('drei');" style="background-color:#FFFF00;"></span><!-- GROUPE 4 --><span class="onglet_0 onglet" id="onglet_vier" onmouseover="javascript:change_onglet('vier');" style="background-color:#80FF00;"></span><!-- GROUPE 5 --><span class="onglet_0 onglet" id="onglet_funf" onmouseover="javascript:change_onglet('funf');" style="background-color:#0080FF;"></span><!-- GROUPE 6 --><span class="onglet_0 onglet" id="onglet_sechs" onmouseover="javascript:change_onglet('sechs');" style="background-color:#BF00FF;"></span><!-- GROUPE 7 --><span class="onglet_0 onglet" id="onglet_sieben" onmouseover="javascript:change_onglet('sieben');" style="background-color:#FE2EF7;"></span>

</div></div><div class="boxQEEL"><script type="text/javascript" src="http://sd-1.archive-host.com/membres/up/211183412958130190/onglets.js"></script><div class="contenu_onglets">

<!-- CONTENU GROUPE 1 --><div class="contenu_onglet" id="contenu_onglet_eins"><!-- NOM DU GROUPE --><div style="background:#FA5858;">Groupe I</div><!-- CONTENU --><p>Contenu groupe 1.</p></div><!-- CONTENU GROUPE 2 --><div class="contenu_onglet" id="contenu_onglet_zwei"><div style="background:#FF8000;">Groupe II</div><!-- CONTENU --><p>Contenu groupe 2.</p></div><!-- CONTENU GROUPE 3 --><div class="contenu_onglet" id="contenu_onglet_drei"><!-- NOM DU GROUPE --><div style="background:#FFFF00;">Groupe III</div><!-- CONTENU --><p>Contenu groupe 3.</p></div><!-- CONTENU GROUPE 4  --><div class="contenu_onglet" id="contenu_onglet_vier"><!-- NOM DU GROUPE --><div style="background:#80FF00;">Groupe IV</div><!-- CONTENU --><p>Contenu groupe 4.</p></div><!-- CONTENU GROUPE 5  --><div class="contenu_onglet" id="contenu_onglet_funf"><!-- NOM DU GROUPE --><div style="background:#0080FF;">Groupe V</div><!-- CONTENU --><p>Contenu groupe 5.</p></div><!-- CONTENU GROUPE 6  --><div class="contenu_onglet" id="contenu_onglet_sechs"><!-- NOM DU GROUPE --><div style="background:#BF00FF;">Groupe VI</div><!-- CONTENU --><p>Contenu groupe 6.</p></div><!-- CONTENU GROUPE 7  --><div class="contenu_onglet" id="contenu_onglet_sieben"><!-- NOM DU GROUPE --><div style="background:#FE2EF7;">Groupe VII</div><!-- CONTENU --><p>Contenu groupe 7.</p></div>

</div></div>

<script type="text/javascript">
        //<!--
                var anc_onglet = 'eins';
                change_onglet(anc_onglet);
        //-->
        </script>
 
<!-- ANNIVERSAIRES --><div class="anvQEEL"><div><table>{L_WHOSBIRTHDAY_TODAY}</table></div></div>
 
</div></td></tr></table>
<!-- END disable_viewonline -->

Partie CSS :
Code:
/* QEEL */
.QEEL {
margin:auto; width:800px; padding-bottom:15px;
text-align:center; font-family:Arial;
background:lightgrey; /* MODIFIABLE */
}
/* BLOC TITRE QEEL */
.tleQEEL {
margin-bottom:15px; padding:10px; text-align:right;
border-bottom:5px solid black; background:grey; color:black; /* MODIFIABLE */
}
/* TITRE QEEL */
.tleQEEL a {
text-transform:uppercase; font-size:24px;
color:black; /* MODIFIABLE */
}
#TLUS {
display:block; font-size:9px;
}
/* BLOC CONNECTES & 24H */
.ondayQEEL {
display:inline-block; vertical-align:top;
width:325px; height:128px; padding:5px; overflow:auto; border:2px solid;
border-color:black; color:black; /* MODIFIABLE */
font-size:10px; text-align:justify; font-family:Arial;
}
.ondayQEEL .row1 {
padding:0 !important; background:none !important;
}
/* COULEUR TEXTE 24H QEEL */
.ondayQEEL .gensmall {
font-family:Arial;
color:black; /* MODIFIABLE */
}
/* BLOC TOTAL MESSAGES & MEMBRES QEEL */
.stsQEEL {
display:inline-block; vertical-align:top; margin:0 15px;
}
/* TOTAL MESSAGES QEEL */
.tlPQEEL {
margin-bottom:14px;
width:125px; height:45px; padding-top:15px; border:2px solid;
border-color:black; color:black; /* MODIFIABLE */
text-transform:uppercase; text-align:center; font-family:Arial; font-size:11px;
}
/* TOTAL MEMBRES QEEL */
.tlMQEEL {
width:125px; height:45px; padding-top:15px; border:2px solid;
border-color:black; color:black; /* MODIFIABLE */
text-transform:uppercase; text-align:center; font-family:Arial; font-size:11px;
}
/* DISCLAIMER QEEL */
.cdtQEEL {
display:inline-block; vertical-align:top;
width:255px; height:128px; padding:5px; overflow-y:auto; border:2px solid;
border-color:black; color:black; /* MODIFIABLE */
text-align:justify; font-size:11px;
}
/* DERNIER UTILISATEUR QEEL */
.lstQEEL {
display:inline-block; vertical-align:top; margin-top:15px;
width:220px; height:126px; padding-left:100px; padding-top:20px; border:2px solid;
border-color:black; color:black; /* MODIFIABLE */
}
/* AVATAR DERNIER UTILISATEUR QEEL */
#lstavQEEL {
position:absolute; margin-left:-170px; margin-top:-25px;
width:100px; height:150px; overflow:hidden;
transform:rotate(-10deg); -webkit-transform:rotate(-10deg);
}
#lstavQEEL img {
width:100px; filter:grayscale(30%); -webkit-filter:grayscale(30%); transition:all 0.45s linear; -webkit-transition:all 0.45s linear;
}
.lstQEEL:hover #lstavQEEL img {
filter:grayscale(0); -webkit-filter:grayscale(0);
}
/* BLOC DESCRIPTIFS GROUPES QEEL */
.boxQEEL {
display:inline-block; vertical-align:bottom; margin-left:15px; margin-top:15px;
}
/* BLOC DESCRIPTIF GROUPE QEEL */
.contenu_onglet {
display:none;
width:430px; height:150px; overflow:hidden;
background:rgba(250,250,250,0.9); /* MODIFIABLE */
font-size:10px; text-align:justify;
}
/* NOM GROUPE QEEL */
.contenu_onglet div {
height:25px; padding-top:5px; overflow:hidden;
text-align:center; text-transform:uppercase; font-size:16px;
}
/* DESCRIPTIF GROUPE */
.contenu_onglet p {
margin:0;
width:420px; height:110px; padding:5px; overflow-y:auto;
font-size:10px; text-align:justify;
color:black; /* MODIFIABLE */
}
/* BLOC TRAITS COLORES GROUPES QEEL */
.GQEEL {
position:absolute; margin-left:800px; margin-top:-150px;
width:75px; text-align:center;
}
/* TRAITS COLORES GROUPES QEEL */
.onglet {
display:block; margin-bottom:5px;
width:75px; height:15px;
opacity:0.5; transition:all 0.45s linear; -webkit-transition:all 0.45s linear;
}
/* SURVOL TRAIT COLORE GROUPE QEEL */
.onglet_1 {
opacity:1; 
}
/* IMAGE ANNIVERSAIRES QEEL */
.anvQEEL {
margin:15px auto 0;
width:770px; height:35px;
background:url(image.png); /* MODIFIABLE */
}
/* ANNIVERSAIRES QEEL */
.anvQEEL div {
position:absolute;
width:750px; height:15px; padding:10px; overflow-y:auto;
text-transform:uppercase; text-align:center;
background:black; /* MODIFIABLE */
opacity:0; transition:opacity 0.55s ease; -webkit-transition:opacity 0.55s ease;
}
.anvQEEL:hover div {
opacity:1;
}
.anvQEEL .row1 {
width:750px; padding:0; background:none;
}
/* COULEUR TEXTE ANNIVERSAIRES QEEL */
.anvQEEL .row1 .gensmall {
font-family:Arial; font-size:11px;
color:white; /* MODIFIABLE */
}

Instructions :


Dans le template profile_view_body, remplacez :
Panneau d'administration > Affichage > Templates > Profil
Code:
{AVATAR_IMG}

Par :
Code:
<span id="avQEEL">{AVATAR_IMG}</span>

Code Javascript - adapté de ce sujet - à activer sur l'index :
Panneau d'administration > Modules > HTML & JAVASCRIPT > Gestion des codes Javascript > Créer un nouveau Javascript
Code:
$(function(){
    $.get($("#nUSER a[href^='/u']")[0].href,function(d){
    (a=$("#avQEEL img",$(d))).length&&$("#lstavQEEL").html(a);})
    });
Revenir en haut Aller en bas
Jeu 8 Fév - 22:50
DERNIÈRE MISE A JOUR LE 8 FÉVRIER
Revenir en haut Aller en bas
Revenir en haut Aller en bas
Vous ne pouvez pas répondre aux sujets dans ce forum