QEEL - Groupes à onglet

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

Résolu QEEL - Groupes à onglet

Message par steph846 le Ven 16 Mar 2012 - 20:13

Boujour, bonjour...

Alors avant de commencer je tiens à préciser que pour le Qeel, j'ai zieuté toute la journée sur votre forum pour trouver une solution mais... et bien j'ai répondu à beaucoup de mes questions et je vous en remercie, mais à d'autres, même si des réponses étaient données, je ne parvenais pas à les appliquer d'où l'ouverture de ce sujet je suis désolée :s.

Alors pour mon qeel principalement, qui est le plus urgent:
Voilà ce que j'ai réussi à obtenir et ce que je voudrais:
Spoiler:

Template:


CSS:


Pour les groupes je suis assez satisfaite du rendu, le seul problème c'est que j'aurais aimé que, plutôt que dans une infobulle comme actuellement, la description du groupe apparaisse dans la colonne du milieu au passage de la sourie. Mais rien à faire. C'est juste impossible à faire avec mes minces capacités Sad. J'aurais aimé un effet slider en fait mais j'ai cru comprendre que ce n'est pas possible pour ce genre de chose ?

Ensuite, j'ai essayé d'installer une scrollbar à l'emplacement des carrés rouges (comme sur la capture) mais rien à faire, ça me déforme le qeel et comme il s'agit d'un forum test :s. je ne peux même pas vérifier si ça fonctionne... Bref s'il vous était simplement possible de m'expliquer comment procéder j'apprécierai vraiment **.

Enfin c'est un détail je le sais bien mais qui m'agace Sad. J'ai essayé de mettre un espace entre "favorable.A" dans les statistiques du qeel. Comme vous pourrez d'ailleurs le voir sur ma capture. Mais rien à faire Sad. Idem pour les doubles "::" à la fin derrière "Panem". J'ai vérifié (après je suis probablement passé à côté) mais les doubles points demeurent. Sad

Merci à ceux qui me liront et qui réussiront à m'aider.
::pourtoi::


Dernière édition par steph846 le Lun 26 Mar 2012 - 9:26, édité 3 fois

steph846
***

Féminin
Messages : 198
Inscrit(e) le : 20/02/2010

http://wildwide.forumgratuit.org
steph846 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: QEEL - Groupes à onglet

Message par Final-Blonde le Ven 16 Mar 2012 - 20:50

Salut Steph,

Tu ne peux pas présenter plusieurs problèmes dans le même sujet, ce qui est compréhensible puisque la résolution d'un sujet va servir à d'autres.. à la condition siné qua none que le titre soit assez explicite pour être retrouvé. Arrow

Pour résumé :
Laisse que le problème du QEEL dans ce sujet et je te suggère un vrai titre comme:
QEEL- Tableau à onglets pour la description des groupes
Pour les autres soucis, ouvre un autre sujet pour chaque.


Ensuite, peux-tu donner le template index_body et le CSS uniquement du QEEL.

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: QEEL - Groupes à onglet

Message par steph846 le Ven 16 Mar 2012 - 21:13

Bonjour Final Blonde ^^

Je vais faire étape par étape alors ^^ J'avais déjà fonctionné ainsi par le passé et je n'avais pas fais attention à ce que le règlement avait changé :s.

Mais voilà qui est fait désolée ^^.

Merci à toi ^^

steph846
***

Féminin
Messages : 198
Inscrit(e) le : 20/02/2010

http://wildwide.forumgratuit.org
steph846 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: QEEL - Groupes à onglet

Message par steph846 le Dim 18 Mar 2012 - 13:16

Bonjour ^^ Mon problème est toujours d'actualité ^^

steph846
***

Féminin
Messages : 198
Inscrit(e) le : 20/02/2010

http://wildwide.forumgratuit.org
steph846 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: QEEL - Groupes à onglet

Message par Final-Blonde le Dim 18 Mar 2012 - 13:27

Hello Speph,

Essaie dans un premier temps d'appliquer ce tuto :
http://forum.forumactif.com/t322270-un-qeel-personnalisee

Ensuite, dis-moi ce que tu aimerais modifier, ou n'hésite pas si tu as des questions.

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: QEEL - Groupes à onglet

Message par steph846 le Dim 18 Mar 2012 - 14:16

Bonjour et tout d'abord merci à toi de t'intéresser à mon problème ^^

Alors en fait, j'ai du mal m'expliquer, je n'avais pas compris pourquoi tu m'avais parlé d'onglet pour le titre de mon sujet, et là je me rend compte que c'est simplement à cause d'une mauvaise explication de ma part :p.

En fait je ne veux pas créer un qeel en onglet, j'ai tenté de suivre ce tuto: http://forum.forumactif.com/t323660-modification-du-qeel-3-colonnes?highlight=qeel+3+colonnes
(Je précise que j'ai mp Annalynne à ce sujet pour l'utilisation de ce tuto qeel)

Spoiler:

Le problème c'est que j'ai tenté de comprendre le fonctionnement de l'apparition de la description du groupe dans la colonne du milieu, mais que je ne suis pas arrivée à faire les modifications que je souhaitais apporter. Par exemple j'aurais souhaité que contrairement à eux, le message par défaut de ma colonne du milieu soit mon texte actuel et la video. Et non pas la description du groupe comme pour eux. De la même manière, j'ignore comment ajouter de nouveaux groupes sans faire foirer complètement le tutoriel Sad. Bref je me suis résolue à vous demander de l'aide pour comprendre ce tuto et ainsi pouvoir l'adapter à ma sauce :s.

Mais encore une fois un grand merci à toi ^^.

J'apprécie sincèrement ton intérêt ^^

steph846
***

Féminin
Messages : 198
Inscrit(e) le : 20/02/2010

http://wildwide.forumgratuit.org
steph846 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: QEEL - Groupes à onglet

Message par Final-Blonde le Dim 18 Mar 2012 - 15:45

Nenni, c'est aussi moi qui ai mal compris.
Essayons de bien nous comprendre afin de pouvoir t'aider efficacement et rapidement.

. A gauche ce sont les statistiques et le QEEL présent
- Au milieu c'est le tableau dans lequel apparait la définition des groupes (c'est bel et bien un tableau à onglets) par le hover le ou clic
- A droite c'est le QEEL passé (24 dernières heures)

Avant de me lancer, ai-je tout bien saisi cette fois ?

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: QEEL - Groupes à onglet

Message par steph846 le Dim 18 Mar 2012 - 18:00

C'est parfait c'est très exactement ce que j'avais en tête oui ::pourtoi::

Merci beaucoup de ton aide en tout cas **

steph846
***

Féminin
Messages : 198
Inscrit(e) le : 20/02/2010

http://wildwide.forumgratuit.org
steph846 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: QEEL - Groupes à onglet

Message par Final-Blonde le Lun 19 Mar 2012 - 16:06

Ok alors voilà la beilleteu^^

Il te restera à le personnaliser parce que là ce n'est que le "squelette" du QEEL.

1°- Le JS à installer dans le PA >> Modules >> Gestion des Javascripts > Activer la gestion des codes Javascript : Oui > Ajouter un JS >
Titre > groupes-qeel-ongllets > Cocher : sur l'Index
Code:
function changeOnglet(_this){
    var getOnglets    = document.getElementById('my_onglets').getElementsByTagName('span');
    for(var i = 0; i < getOnglets.length; i++){
        if(getOnglets[i].id){
            if(getOnglets[i].id == _this.id){
                getOnglets[i].className = 'my_onglet_selected';
                document.getElementById('c' + _this.id).style.display            = 'block';
            }
            else{
                getOnglets[i].className = 'my_onglet';
                document.getElementById('c' + getOnglets[i].id).style.display    = 'none';
            }
        }
    }     
}
Enregistrer

2°- Le HTML du template index_box :
Il s'agit de RE-structurer le QEEL.
- Le tableau principal reste et ses lignes (tr) et ses cellules (td) ne serviront que pour les onglets des gourpes et pour plus bas, la CB.
- Nous créons un deuxième sous-tableau principal qui lui contiendra lea petits tableauc pour chaque élément du QEEL.
Voici juste la partie concernée et je demande de la laisser ainsi (sans espace à gauche et en blocs bien distincts) jusqu'à ce que ton sujet soit résolu.
Code:
<!-- BEGIN disable_viewonline -->
<table align="center" width="100%" border="0" cellspacing="0" cellpadding="0"><tr>

<td width="90%" align="center" valign="middle">
<table><tr>
<td style="padding-bottom: 4px;" align="center" id="my_onglets" valign="middle">
<span id="o_17" class="my_onglet_selected" onclick="changeOnglet(this);">Goupe 1</span>
<span id="o_18" class="my_onglet" onclick="changeOnglet(this);">Goupe 2</span>
<span id="o_19" class="my_onglet" onclick="changeOnglet(this);">Goupe 3</span>
<span id="o_20" class="my_onglet" onclick="changeOnglet(this);">Goupe 4</span>
<span id="o_21" class="my_onglet" onclick="changeOnglet(this);">Goupe 5</span>
<span id="o_22" class="my_onglet" onclick="changeOnglet(this);">Goupe 6</span>
<span id="o_23" class="my_onglet" onclick="changeOnglet(this);">Goupe 7</span>
</td></tr></table>
</td></tr>

<tr><td width="90%" align="center" valign="middle">
<table class="myqeel" align="center"><tr> 

<td class="wiostats" align="center" valign="middle"> 
<table><tr><td align="justify" valign="top" class="gensmall">
{TOTAL_POSTS}<br />
{TOTAL_USERS}<br />
{NEWEST_USER}
</td></tr>
<tr><td align="left" valign="top" class="gensmall">
{TOTAL_USERS_ONLINE}<br />
{RECORD_USERS}<br />
<br />
{LOGGED_IN_USER_LIST}
</td></tr></table> 
</td>
 
<td align="center" valign="middle" class="defgroups"> 
<div id="my_contenus">
<div id="co_17" class="my_contenu">CONTENU GR 1<br />
Synephebos ego, inquit, potius Caecilii aut Andriam Terentii quam utramque Menandri legam? [5]
A quibus tantum dissentio, ut, cum Sophocles vel optime scripserit Electram, tamen male conversam Atilii mihi legendam putem, de quo Lucilius:
'ferreum scriptorem', verum, opinor, scriptorem tamen, ut legendus sit. rudem enim esse omnino in nostris poetis aut inertissimae segnitiae est
aut fastidii delicatissimi. mihi quidem nulli satis eruditi videntur, quibus nostra ignota sunt.
Synephebos ego, inquit, potius Caecilii aut Andriam Terentii quam utramque Menandri legam? [5]
A quibus tantum dissentio, ut, cum Sophocles vel optime scripserit Electram, tamen male conversam Atilii mihi legendam putem, de quo Lucilius:
'ferreum scriptorem', verum, opinor, scriptorem tamen, ut legendus sit. rudem enim esse omnino in nostris poetis aut inertissimae segnitiae est
aut fastidii delicatissimi. mihi quidem nulli satis eruditi videntur, quibus nostra ignota sunt.
Synephebos ego, inquit, potius Caecilii aut Andriam Terentii quam utramque Menandri legam? [5]
A quibus tantum dissentio, ut, cum Sophocles vel optime scripserit Electram, tamen male conversam Atilii mihi legendam putem, de quo Lucilius:
'ferreum scriptorem', verum, opinor, scriptorem tamen, ut legendus sit. rudem enim esse omnino in nostris poetis aut inertissimae segnitiae est
aut fastidii delicatissimi. mihi quidem nulli satis eruditi videntur, quibus nostra ignota sunt.</div>
<div id="co_18" class="my_contenu" style="display: none;">CONTENU GR 2</div>
<div id="co_19" class="my_contenu" style="display: none;">CONTENU GR 3</div>
<div id="co_20" class="my_contenu" style="display: none;">CONTENU GR 4</div>
<div id="co_21" class="my_contenu" style="display: none;">CONTENU GR 5</div>
<div id="co_22" class="my_contenu" style="display: none;">CONTENU GR 6</div>
<div id="co_23" class="my_contenu" style="display: none;">CONTENU GR 7</div>
</div> 
</td>
 
<td class="wwh" align="center" valign="middle">
<table><tr><td align="left" valign="top">
{L_CONNECTED_MEMBERS}
{L_WHOSBIRTHDAY_TODAY}
{L_WHOSBIRTHDAY_WEEK}
</td></tr></table>
</td>
 
</tr></table>
 
</td></tr></table>
 
   <!-- BEGIN switch_chatbox_activate -->
<table class="forumline" width="90%" border="0" cellspacing="1" cellpadding="0">
   <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 -->
Tu peux le constater, il n'y a aucune balise en rouge, c'est que la structure est correctement codée.
Vérifie bien comment s'écrit le saut de ligne. Wink
Dans le premier contenu j'ai mis un Lorem Ipsum pour que tu puisses voir la scrollbar.

3°- Le CSS.
Je te laisse le découvrir car il est relativement simple et "dépouillé" si tu suis les identifiants du HTML:
Spoiler:
/*- tableaux groupes
---------------------------*/
.myqeel {
width: auto;
margin: 0 auto;
}
.my_onglet {
display: inline;
padding: 2px;
margin: 2px;
color: #000;
background: transparent;
border: none;
cursor: pointer;
}
.my_onglet:hover {
background: #b8efa1;
}
.my_onglet_selected {
display: inline;
padding: 2px;
margin: 2px;
color: #000;
background: transparent;
border: none;
}
.my_contenu {
width: 250px;
height: 180px;
overflow-y: auto; /* y pour scrollbar en hauteur automatique dès que la hauteur définie est dépassée */
color: #000;
font-size: 11px;
text-align: justify;
line-height: normal;
background: #fff;
border: 1px solid #000;
padding: 10px;
margin: 4px;
}
/* who is on line et stats */
.wiostats {
width: 250px;
padding: 7px;
margin: 0 auto;
}
/* who was here */
.wwh {
width: 250px;
padding: 7px;
margin: 0 auto;
}
Idem que la partie du template, laisse-le d'abord dans cette mise en page.
Si tu veux ajouter des couleurs etc pour les groupes, il faut que tu donnes un class différent à chaque groupe, idem pour leur contenu.

Attention si tu désires ajouter des groupes ou en supprimer, de bien faire correspondre les identifiants entre eux, ou de les supprimer aux deux endroits:
Onglet et contenu

N'hésite pas si tu as une question.

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: QEEL - Groupes à onglet

Message par steph846 le Mar 20 Mar 2012 - 11:54

Hannnnnnnn merci beaucoup je vais tenter d'appliquer tout cela au mieux **

Merciiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii

steph846
***

Féminin
Messages : 198
Inscrit(e) le : 20/02/2010

http://wildwide.forumgratuit.org
steph846 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: QEEL - Groupes à onglet

Message par Final-Blonde le Mer 21 Mar 2012 - 13:58

Je t'en prie.

C'est tout bon alors ?

Un p'tit message, ou mettre le sujet en résolu pour dire ce qu'il en est afin que je puisse supprimer le template et le CSS de mon FT. Wink

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: QEEL - Groupes à onglet

Message par steph846 le Lun 26 Mar 2012 - 9:26

Je viens de terminer **

Un grand merci à toi oui ^^. Mon problème est réglée **

I love you

steph846
***

Féminin
Messages : 198
Inscrit(e) le : 20/02/2010

http://wildwide.forumgratuit.org
steph846 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