Commande catégories+qeel

Ven 21 Juil - 19:15
Bonjour :) Je viens vers vous pour une petite commande de qeel et de catégories ^^

Largeur maximale : 800px
Hauteur maximale : Hauteur de l'image de fond du qeel. Pour les catégories, c'est automatique non ? Mais sinon pour l'image des hauts de catégories (qui se trouve à être une image par catégorie), c'est 800px*135px
Schéma : Vous avez tout ici, les maquettes, mais également les diverses images. https://imgbox.com/
Éléments : Normalement tout est bien indiqué.
Images : Vous avez tout plus haut dans le lien.
Animations : Tout est indiqué là aussi, normalement. Mais pour être certaines, l'image "accéder au royaume des morts" cache les sous-forum et ceux-ci apparaisse au survol de celle-ci. Voici le lien de l'image parce que comme un boulet j'ai oublié de la mettre dans le lien plus haut. https://i.imgbox.com/EZEznr7j.png.

Pour les groupes, le contenu de ceux-ci s'affiche non pas au survol mais au clique.
Informations supplémentaires : Merci à vous d'avance :)
Revenir en haut Aller en bas
Sam 22 Juil - 7:45
Bonjour,

Il ne m'est possible d'accéder à votre schéma, pourriez-vous vous me transmettre un lien valide s'il vous plaît ?
Revenir en haut Aller en bas
Sam 22 Juil - 14:31
Hey :) Ah mince doit y avoir eu un problème au niveau de la sélection du lien, parce que je suis certaine d'avoir cliqué sur la bonne chose.

Voici le lien pour les catégories : http://imgbox.com/g/KUPK4BZgP7
Et celui pour le QEEL : http://imgbox.com/g/5uNPdIR5qE
Revenir en haut Aller en bas
Dim 23 Juil - 11:05
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 -->
    </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"><!-- END tablehead -->

    <!-- BEGIN cathead -->
    <!-- END cathead -->
  
    <!-- BEGIN forumrow -->
    <div class="FRM"><div class="sfFRM"><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="boxFRM"><img class="imgFRM" src="{catrow.forumrow.FORUM_FOLDER_IMG}" /><div class="nbFRM">{catrow.forumrow.TOPICS} sujets<br/>{catrow.forumrow.POSTS} messages</div></div><div class="avaFRM"><!-- BEGIN avatar -->{catrow.forumrow.avatar.LAST_POST_AVATAR}<!-- END avatar --></div></div>  
    <!-- END forumrow -->
  
    <!-- BEGIN catfoot -->
    <!-- END catfoot -->
    <!-- BEGIN tablefoot -->
    </div>
    <!-- END tablefoot --><!-- END catrow -->

Partie CSS :
Code:
/* TITRE CATEGORIE */
.tleCAT {
margin:10px auto -10px; width:800px;
}
/* BLOC CATEGORIE */
.mdlCAT {
margin:auto; width:800px;
}
/* BLOC FORUM */
.FRM {
margin-bottom:10px; width:800px; padding:15px 0;
background:url(https://i.imgbox.com/Ur8QCTy5.png); /* MODIFIABLE */
font-family:Arial; text-align:center;
}
/* BLOC SOUS-FORUMS */
.sfFRM {
display:inline-block; vertical-align:middle;
width:275px; height:110px; overflow:hidden; border:10px solid;
border-color:#52608F; background:url(https://i.imgbox.com/EZEznr7j.png); /* MODIFIABLE */
}
/* CONTENU SOUS-FORUMS */
.sfFRM div {
position:absolute; width:265px; height:100px; padding-left:10px; padding-top:10px;
text-align:left; font-size:11px; text-transform:uppercase;
background:url(https://i.imgbox.com/KOCz6Hhh.png); /* MODIFIABLE */
opacity:0; transition:opacity 0.55s ease; -webkit-transition:opacity 0.55s ease;
}
.sfFRM:hover div {
opacity:1;
}
/* SOUS-FORUMS */
.sfFRM a{
color:black !important; /* MODIFIABLE */
}
/* BLOC POSITIONNEMENT FORUM */
.boxFRM {
display:inline-block; vertical-align:middle; margin-left:10px; text-align:center;
}
/* BLOC TITRE FORUM */
.tleFRM {
margin-bottom:5px; text-align:right; font-size:12px; text-transform:uppercase;
}
/* TITRE FORUM */
.tleFRM a{
color:rgba(255,255,255,0.6) !important; /* MODIFIABLE */
}
/* DESCRIPTION FORUM */
.descFRM {
width:255px; height:80px; padding:10px; overflow:hidden;
font-size:11px; text-align:justify;
background:#0D1C3B; color:#CCC; /* MODIFIABLE */
}
.descFRM:hover {
overflow-y:auto;
}
/* ICÔNES FORUM */
.imgFRM {
display:block; margin:auto; max-width:90px;
}
/* NOMBRE SUJETS & MESSAGES FORUM */
.nbFRM {
width:105px; text-transform:uppercase; font-size:12px;
color:crimson; /* MODIFIABLE */
}
/* AVATAR DERNIER POSTEUR FORUM */
.avaFRM {
display:inline-block; vertical-align:middle; margin-left:10px;
width:60px; height:120px; overflow:hidden;
background:url(https://i.imgbox.com/i2jjbxra.png); color:white; /* MODIFIABLE */
}
.avaFRM img{
height:120px;
}

Instructions :
Code:
<img src="image.png" />

Remplacez le code du QEEL [lignes 173 à 221] par :
Code:
<!-- BEGIN disable_viewonline -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td><!-- TITRE --><div class="tleQEEL"></div><div class="QEEL"><!-- 24H --><div class="dayQEEL"><table>{L_CONNECTED_MEMBERS}</table></div><!-- MEMBRES CONNECTES --><div class="onlineQEEL" id="onLINE">{LOGGED_IN_USERS_LIST}<script type="text/javascript">document.getElementById('onLINE').innerHTML=document.getElementById('onLINE').innerHTML.replace(/Utilisateurs enregistrés :/,"Membres en ligne :")</script></div>

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

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

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

</div></div>

<!-- STATISTIQUES --><div class="stsQEEL"><!-- TOTAL MESSAGES --><div><b>Nombre d'ombres repoussées</b><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></div><!-- TOTAL SUJETS --><div><b>Nombre de missions</b><span class="FORUMCOUNTOPIC"></span><script type="text/javascript" src="http://tinyurl.com/var-fa"></script></div><br/><!-- TOTAL MEMBRES --><div><b>Nombre de morts</b><span id="tUSERS">{TOTAL_USERS}</span></div><script type="text/javascript">document.getElementById('tUSERS').innerHTML=document.getElementById('tUSERS').innerHTML.replace(/Nous avons /," ") .replace(/membres enregistrés/," ") .replace(/membre enregistré/," ");</script><!-- DERNIER INSCRIT --><div><b>Dernière personne décédée</b><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></div>

<!-- ANNIVERSAIRES --><div id="anvQEEL">Aujourd'hui fêtons une bonne fête à : <table>{L_WHOSBIRTHDAY_TODAY}</table></div><script type="text/javascript">document.getElementById('anvQEEL').innerHTML=document.getElementById('anvQEEL').innerHTML.replace(/Aucun membre ne fête son anniversaire aujourd'hui/," ") .replace(/Membres fêtant leur anniversaire aujourd'hui :/," ");</script>  

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

Partie CSS :
Code:
/* TITRE QEEL */
.tleQEEL {
margin:auto; width:806px; height:145px;
background:url(https://i.imgbox.com/jsKW9lzN.png); /* MODIFIABLE */
}
/* QEEL */
.QEEL {
margin:auto; width:800px; height:500px;
background:url(https://i.imgbox.com/r6VgeR5h.png); /* MODIFIABLE */
font-family:Arial; text-align:center;
}
/* 24H QEEL */
.dayQEEL {
position:absolute; margin-top:20px; margin-left:35px;
width:325px; height:130px; padding-right:5px; overflow:auto;
font-size:10px; text-align:justify;
}
.dayQEEL .row1 {
padding:0; background:none;
}
/* COULEUR TEXTE 24H QEEL */
.dayQEEL .row1 .gensmall {
font-family:Arial;
color:white; /* MODIFIABLE */
}
/* MEMBRES EN LIGNE QEEL */
.onlineQEEL {
position:absolute; margin-top:20px; margin-left:435px;
width:325px; height:130px; padding-right:5px; overflow:auto;
color:white; /* MODIFIABLE */
font-size:10px; text-align:justify;
}
/* BLOC GROUPES QEEL */
.GQEEL {
position:absolute; margin-left:20px; margin-top:190px; width:115px;
}
/* GROUPES QEEL */
.onglet {
display:block; margin-bottom:5px; padding:5px 0; overflow:hidden;
text-transform:uppercase; font-size:11px;
color:white; /* MODIFIABLE */
opacity:0.5; transition:all 0.45s linear; -webkit-transition:all 0.45s linear;
}
/* CLIC GROUPE QEEL */
.onglet_1 {
opacity:1;
}
/* DESCRIPTIFS GROUPES QEEL */
.blocGQEEL {
position:absolute; margin-top:190px; margin-left:150px;
width:190px; height:220px; padding:5px; overflow:auto;
color:white; /* MODIFIABLE */
font-size:10px; text-align:justify;
}
.contenu_onglet {
display:none;
}
/* STATISTIQUES QEEL */
.stsQEEL {
position:absolute; margin-top:240px; margin-left:385px;
width:400px; text-align:center;
}
.stsQEEL div {
display:inline-block; vertical-align:top; margin-bottom:20px;
width:50%;
}
/* TITRES STATISTIQUES QEEL */
.stsQEEL b {
display:block; margin-bottom:15px;
text-transform:uppercase; font-size:12px;
color:crimson; /* MODIFIABLE */
}
/* NOMBRES STATISTIQUES QEEL */
.stsQEEL span {
font-size:24px;
color:white; /* MODIFIABLE */
}
/* DERNIER UTILISATEUR ENREGISTRE QEEL */
.stsQEEL a span {
font-size:14px !important;
}
/* ANNIVERSAIRES QEEL */
#anvQEEL {
position:absolute; margin-top:455px; margin-left:20px;
width:760px; text-align:left; font-size:12px;
color:white; /* MODIFIABLE */
}
#anvQEEL .row1 {
background:none;
}
#anvQEEL .row1 .gensmall {
font-family:Arial;
}

Instructions :
Revenir en haut Aller en bas
Dim 23 Juil - 17:18
Oh c'est vraiment parfait merci beaucoup :) Je vais vous faire de la pub autour de moi pour sûr ♥
Revenir en haut Aller en bas
Revenir en haut Aller en bas
Vous ne pouvez pas répondre aux sujets dans ce forum