QEEL & Onglets : la misère

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu QEEL & Onglets : la misère

Message par Eden. le Mar 6 Mai 2014 - 22:01



Dernière édition par Eden. le Ven 9 Mai 2014 - 23:04, édité 1 fois

Eden.
****

Messages : 207
Inscrit(e) le : 14/12/2011

http://a-pleasant-nightmare.forumactif.org/
Eden. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: QEEL & Onglets : la misère

Message par Self le Mer 7 Mai 2014 - 18:15

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 Wink:
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 Wink

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: QEEL & Onglets : la misère

Message par Eden. le Mer 7 Mai 2014 - 23:40

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.
****

Messages : 207
Inscrit(e) le : 14/12/2011

http://a-pleasant-nightmare.forumactif.org/
Eden. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: QEEL & Onglets : la misère

Message par Eden. le Ven 9 Mai 2014 - 11:23

upinou !

Eden.
****

Messages : 207
Inscrit(e) le : 14/12/2011

http://a-pleasant-nightmare.forumactif.org/
Eden. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: QEEL & Onglets : la misère

Message par Self le Ven 9 Mai 2014 - 20:39

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 Wink .

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: QEEL & Onglets : la misère

Message par Eden. le Ven 9 Mai 2014 - 21:09

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

Eden.
****

Messages : 207
Inscrit(e) le : 14/12/2011

http://a-pleasant-nightmare.forumactif.org/
Eden. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: QEEL & Onglets : la misère

Message par Self le Ven 9 Mai 2014 - 21:40

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;

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: QEEL & Onglets : la misère

Message par Eden. le Ven 9 Mai 2014 - 23:03

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

Eden.
****

Messages : 207
Inscrit(e) le : 14/12/2011

http://a-pleasant-nightmare.forumactif.org/
Eden. a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum