QEEL & Onglets : la misère

[Eden.]

[Self]

Bonjour,

Remplacez la partie de votre template par ceci :

Code:

<!-- BEGIN disable_viewonline -->
<div class="title qeel-title">
 <!-- BEGIN switch_viewonline_link -->
 <center><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></center>
 <!-- END switch_viewonline_nolink -->
</div>
<table class="qeel" width="850px" border="1" cellspacing="0" cellpadding="10">
 <tr>
 <td>
 <table>
 <tr>
 <td class="qeel row row1" width="265px;" valign="top">
                                          <img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /><br /><br />
 <table>{L_CONNECTED_MEMBERS}</table>
 </td>
 <td class="qeel row row2" width="265px" valign="top">
 <div id="desc1" class="desc">Description du groupe 1</div>
 <div id="desc2" class="desc">Description du groupe 2</div>
 <div id="desc3" class="desc">Description du groupe 3</div>
 <div id="desc4" class="desc">Description du groupe 4</div>
 <div id="desc5" class="desc">Description du groupe 5</div>
 </td>
 <td class="qeel row .row3" width="260px" valign="top">
 <span class="gensmall">
 <span id="kumao">{TOTAL_POSTS}.</span>
                  
 <span id="matt">{TOTAL_USERS}.</span>

 <span id="yosh">{NEWEST_USER}.</span>

 <span id="roti">{TOTAL_USERS_ONLINE}.</span>

 <span id="poule">{RECORD_USERS}.</span><br /><br />
                          
 <span id="frites">{LOGGED_IN_USER_LIST}</span><br /><br />
 </span>
 </td>
 </tr>
 </table>
 <div class="title legend-title">
 <center><span class="cattitle">GROUPES</span></center>
 </div>
 </td>
 </tr>
 <tr>
 <td colspan="3">
 <div class="legend">
 <img id="gp1" src="http://placehold.it/45x45" alt="image de groupe" />
 <img id="gp2" src="http://placehold.it/45x45" alt="image de groupe" />
 <img id="gp3" src="http://placehold.it/45x45" alt="image de groupe" />
 <img id="gp4" src="http://placehold.it/45x45" alt="image de groupe" />
 <img id="gp5" src="http://placehold.it/45x45" alt="image de groupe" />
 </div>
 </td>
 </tr>
</table>
<script type="text/javascript">
 document.getElementById('kumao').innerHTML=document.getElementById('kumao').innerHTML.replace(/membres/,"habitants");
 document.getElementById('matt').innerHTML=document.getElementById('matt').innerHTML.replace(/membres/,"Chatswiniens");
 document.getElementById('yosh').innerHTML=document.getElementById('yosh').innerHTML.replace(/L'utilisateur enregistré le plus récent/,"Bienvenue au nouveau résident qui");
 document.getElementById('roti').innerHTML=document.getElementById('roti').innerHTML.replace(/utilisateur/,"habitants");
 document.getElementById('poule').innerHTML=document.getElementById('poule').innerHTML.replace(/du nombre d'utilisateurs/,"de citoyens");
 document.getElementById('frites').innerHTML=document.getElementById('frites').innerHTML.replace(/Utilisateurs enregistrés/,"Chatswinien(s) en ligne");

 $(function(){
 $('.qeel .row1 table td.row1 .gensmall').contents().unwrap().unwrap().unwrap().unwrap().unwrap();

    $('.legend img').each(function(){
        var i = $(this).attr('id').match(/[*0-9]$/);
        $(this).mouseenter(function(){
            $('.desc').not(this).fadeOut(100);
            $('#desc'+i).fadeIn();
        });
        $(this).mouseleave(function(){
            $('#desc'+i).fadeOut(100);
        });
    });
 });
</script>
<!-- END disable_viewonline -->

Vous avez dans le passage suivant :

Code:

<td class="qeel row row2" width="265px" valign="top">
 <div id="desc1" class="desc">Description du groupe 1</div>
 <div id="desc2" class="desc">Description du groupe 2</div>
 <div id="desc3" class="desc">Description du groupe 3</div>
 <div id="desc4" class="desc">Description du groupe 4</div>
 <div id="desc5" class="desc">Description du groupe 5</div>
</td>

Les descriptions de chaque groupe, vous pouvez en ajouter ou en supprimer, l'important est d'avoir l'id et la class.
Ce passage est associé à celui des images :

Code:

<div class="legend">
 <img id="gp1" src="http://placehold.it/45x45" alt="image de groupe" />
 <img id="gp2" src="http://placehold.it/45x45" alt="image de groupe" />
 <img id="gp3" src="http://placehold.it/45x45" alt="image de groupe" />
 <img id="gp4" src="http://placehold.it/45x45" alt="image de groupe" />
 <img id="gp5" src="http://placehold.it/45x45" alt="image de groupe" />
</div>

Celles-ci fonctionne grace au javascript plus bas dans le code de telle sorte à ce que lorsque l'on passe sur l'image qui a l'id gp1 la description ayant l'id desc1 s'affiche puis disparer de nouveau lorsque l'on enlève le curseur de l'image.

Ainsi si vous désirez ajouter un groupe il faudra dans le bloc des descriptions mettre par exemple :

Code:

<div id="desc6" class="desc">Description du groupe 6</div>

Puis lui associer une image dans la legende comme ceci:

Code:

<img id="gp6" src="http://placehold.it/45x45" alt="image de groupe" />

Puis terminons avec le CSS à placer dans votre feuille de style bien sur :

Code:

.qeel, .qeel .row{
 background-color: #da88c1;
}

.qeel .row1{
    font-size:11px;
}

.qeel .row2 .desc{
    display:none;
}

.legend{
    text-align:center;
}

.legend img{
    margin-right: 15px;
}

Vous pouvez styliser chaque colonne avec les class (de gauche à droite) .qeel .row1 / .qeel .row2 / .qeel .row3

Bonne journée

[Eden.]

J'ai quelques dernières petites questions pour peaufiner le tout, si je veux supprimer le cadre qui entoure tout le qeel comment faire ? Si je veux aussi modifier les titres comme Groupes qu'est-ce que je dois toucher ?

Et pour finir, j'aimerais par exemple fixer une hauteur au trois colonnes en essayant dans le css rien ne bouge... faut-il aller dans les templates ?

Désolée pour toutes ces questions je vous assassine x)

[Eden.]

upinou !

[Self]

Bonjour,

si je veux supprimer le cadre qui entoure tout le qeel comment faire ?

Par le cadre vous entendez les bords ?
Si oui il suffit d'ajouter au CSS ceci :

Code:

.qeel, .qeel td{
    border:none;
}

si je veux supprimer le cadre qui entoure tout le qeel comment faire ?

Il faut dans le CSS si vous desirez modifier les deux titres de la même manière utiliser les classes .qeel .cattitle, .qeel-title .cattitle :

Code:

.qeel .cattitle{
    MODIFICATIONS
}

Pour modifier seulement le premier utilisez les classes .qeel-title .cattitle, puis pour modifier seulement le deuxième .qeel .cattitle

Et pour finir, j'aimerais par exemple fixer une hauteur au trois colonnes en essayant dans le css rien ne bouge... faut-il aller dans les templates ?

Essayez avec ce CSS :

Code:

.qeel .row{
    height:180px !important;
    margin-right:2px;
    display:inline-block;
    overflow:auto;
}

Bonne soirée .

[Eden.]

Bonsoir SeLfde4Th7,

Déjà vous avez réussi à me faire agrandir les colonnes je vous en remercie, j'essaierai la modifications des détails plus tard, j'aurais juste, une petite question. Quand je met votre code, il y a une sorte de scrollbar à l'horizontal qui bouge d'un ou deux pixel ce qui fait une barre grise sur toute la largeur de la colonne en bas enfaite... j'aimerais la supprimer :s

[Self]

Re,

En dessous de overflow:auto; dans ce passage :

Code:

        .qeel .row{
            height:180px !important;
            margin-right:2px;
            display:inline-block;
            overflow:auto;
        }

Ajoutez :

Code:

overflow-x:hidden;

[Eden.]

Merci beaucoup de ton aide, le qeel est réglé maintenant, je vais pouvoir rectifier mes autres petits problèmes ! Problème résolu !