Accueil
Créer un forumRéglages code pour QEEL
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Réglages code pour QEEL
par Azya Jeu 28 Mar 2013 - 15:31
bonjour à tous,
voilà, j'ai récupérer un code pour mon QEEL sur Thème FA. J'essaie vainement d'y apporter une petite modification
Comme vous pouvez voir sur l'image, en haut se trouve une bulle : Statiques
J'essaie de mettre une autre partie à côté : Sujets actifs/Top20 qui se trouve intégré dans la bulle Bonus
Je vous remets le HT non modifié
Le CSS que j'avais commencé à modifier pour l'adapter à mes besoins surtout au niveau des tailles et de la couleur mais à part cela, je n'y pas touché
Et le code java
J'arrive bien à le séparer du bloc Bonus mais ensuite je n'arrive à créer un bloc : Sujets actifs/Top20 pour le mettre à l'intérieur
vous pouvez le voir ici : ffftest
Merci pour votre aide
voilà, j'ai récupérer un code pour mon QEEL sur Thème FA. J'essaie vainement d'y apporter une petite modification
Comme vous pouvez voir sur l'image, en haut se trouve une bulle : Statiques
J'essaie de mettre une autre partie à côté : Sujets actifs/Top20 qui se trouve intégré dans la bulle Bonus
Je vous remets le HT non modifié
- Code:
<!-- BEGIN disable_viewonline -->
<!-- IMAGE DU HAUT -->
<div id="haut_du_qeel" style="width: 100%; text-align: center;"><img src="http://fr.quozpowa.com/QuozUpload/20349135071364474959catQEEL.png" alt="" /></div>
<!-- DEBUT CODE DES ONGLETS -->
<div id="qeel_TFA_block">
<!-- BOUTON DU HAUT -->
<div class="tfa_boutons" id="haut_boutons" >
<a href="#" onclick="Monter_Cacher('my_qeel_1'); return false"><span class="qeel_span"> Statistiques </span></a>
</div>
<!-- BOUTON DE GAUCHE -->
<div class="tfa_boutons" id="gauche_boutons">
<a href="#" onclick="Monter_Cacher('my_qeel_2'); return false"><span class="qeel_span"> Groupes </span></a>
</div>
<!-- BOUTON DE DROITE -->
<div class="tfa_boutons" id="droite_boutons">
<a href="#" onclick="Monter_Cacher('my_qeel_3'); return false"><span class="qeel_span">Qui est là ?</span></a>
</div>
<!-- DEBUT DU BLOC DE CONTENU -->
<div id="container_tfa_my_qeel">
<!-- CONTENU DU PREMIER ONGLET - STATISTIQUES -->
<div id="my_qeel_1">
<div class="contenty_tfa">
<div class="my_tfa_qeel_content">
<div id="TFA12">{TOTAL_POSTS}
<script type="text/javascript">
document.getElementById('TFA12').innerHTML=document.getElementById('TFA12').innerHTML.replace(/Nos membres ont posté un total de /,"Nos employés ont posté un total de, ");
</script> </div>
<br />
<div id="TFA13">{TOTAL_USERS}
<script type="text/javascript">
document.getElementById('TFA13').innerHTML=document.getElementById('TFA13').innerHTML.replace(/Nous avons /,"L'entreprise compte, ");
document.getElementById('TFA13').innerHTML=document.getElementById('TFA13').innerHTML.replace(/membres enregistrés/,"employés. ");
document.getElementById('TFA13').innerHTML=document.getElementById('TFA13').innerHTML.replace(/membre enregistré/,"employé. ");
</script> </div>
<div id="TFA14">{NEWEST_USER}
<script type="text/javascript">
document.getElementById('TFA14').innerHTML=document.getElementById('TFA14').innerHTML.replace(/L'utilisateur enregistré le plus récent est /,"Le dernier arrivant s'appelle : ");
</script> </div>
<br />
<span id="TFA0">{TOTAL_USERS_ONLINE}</span>
<script type="text/javascript">
document.getElementById('TFA0').innerHTML=document.getElementById('TFA0').innerHTML.replace(/Il y a en tout /,"Nous comptons en tout ");
document.getElementById('TFA0').innerHTML=document.getElementById('TFA0').innerHTML.replace(/utilisateurs en ligne/,"personnes actuellement en ligne ");
document.getElementById('TFA0').innerHTML=document.getElementById('TFA0').innerHTML.replace(/utilisateur en ligne/,"personne actuellement en ligne ");
document.getElementById('TFA0').innerHTML=document.getElementById('TFA0').innerHTML.replace(/Enregistrés/,"employés ");
document.getElementById('TFA0').innerHTML=document.getElementById('TFA0').innerHTML.replace(/Enregistré/,"employé ");
document.getElementById('TFA0').innerHTML=document.getElementById('TFA0').innerHTML.replace(/Invisible et/,"caché et ");
document.getElementById('TFA0').innerHTML=document.getElementById('TFA0').innerHTML.replace(/Invisibles et/,"cachés et ");
document.getElementById('TFA0').innerHTML=document.getElementById('TFA0').innerHTML.replace(/Invités/,"visiteurs. ");
document.getElementById('TFA0').innerHTML=document.getElementById('TFA0').innerHTML.replace(/Invité/,"visiteur. ");
</script>
<br />
<span id="TFA17">{RECORD_USERS}</span>
<script type="text/javascript">document.getElementById('TFA17').innerHTML=document.getElementById('TFA17').innerHTML.replace(/Le record du nombre d'utilisateurs en ligne est de/,"
L'entreprise a battu tous ses records avec un nombre d'employés actifs de :");</script>
</div>
</div>
</div>
<!-- CONTENU DU DEUXIEME ONGLET - GROUPES -->
<div id="my_qeel_2">
<div class="contenty_tfa">
<div class="my_groupes">
<div class="my_groupes_gauche">
<ul>
<li><a href="#lien_groupe" style="color: #AB0000;">Groupe 1</a></li>
<li><a href="#lien_groupe" style="color: #859C00;">Groupe 2</a></li>
<li><a href="#lien_groupe" style="color: #0395A8;">Groupe 3</a></li>
<li><a href="#lien_groupe" style="color: #647A4C;">Groupe 4</a></li>
</ul>
</div>
<div class="my_groupes_droite">
<ul>
<li><a href="#lien_groupe" style="color: #805C00;">Groupe 5</a></li>
<li><a href="#lien_groupe" style="color: #7D3DA8;">Groupe 6</a></li>
<li><a href="#lien_groupe" style="color: #BA045C;">Groupe 7</a></li>
<li><a href="#lien_groupe" style="color: #333333;">Groupe 8</a></li>
</ul>
</div>
<div style="clear:both;"></div>
</div>
</div>
</div>
<!-- CONTENU DU TROISIEME ONGLET - QUI EST LA -->
<div id="my_qeel_3">
<div class="contenty_tfa">
<div id="who_is_qeel">
<div id="who_is_gauche">
<div class="who_is_hauteur">
<span id="TFA15">{LOGGED_IN_USER_LIST}</span>
<script type="text/javascript">document.getElementById('TFA15').innerHTML=document.getElementById('TFA15').innerHTML.replace(/Utilisateurs enregistrés/,"Employés présents en ce moment");</script>
</div>
</div>
<div id="who_is_droite">
<div class="who_is_hauteur">
<table id="TFA16">{L_CONNECTED_MEMBERS}
<script type="text/javascript">document.getElementById('TFA16').innerHTML=document.getElementById('TFA16').innerHTML.replace(/Membres connectés/,"Employés qui étaient présents");</script>
</table>
</div>
</div>
<div style="clear:both;"></div>
</div>
</div>
</div>
<!-- CONTENU DU QUATRIEME ONGLET - ANNIVERSAIRES -->
<div id="my_qeel_4">
<div class="contenty_tfa">
<div class="who_anniversaire">
<div class="who_anniversaire_hauteur">
<!-- LES ANNIVERSAIRES -->
<table>
{L_WHOSBIRTHDAY_TODAY}
<span id="TFA20">
{L_WHOSBIRTHDAY_WEEK}
<script type="text/javascript">document.getElementById('TFA20').parentNode.innerHTML=document.getElementById('TFA20').parentNode.innerHTML.replace(/Membres fêtant leur anniversaire aujourd'hui/,"Les employés fêtant leur anniversaire aujourd'hui sont").replace(/Membres fêtant leur anniversaire dans les ([0-9]+) prochains jours/,"Les employés fêtant bientôt leur anniversaire").replace(/Aucun membre ne fête son anniversaire aujourd'hui/,"Aucun employé ne fête son anniversaire aujourd'hui").replace(/Aucun membre ne fête son anniversaire dans les ([0-9]+) prochains jours/,"Aucun employé ne fête son anniversaire dans les prochains jours");</script>
</span>
</table>
<br clear="all" />
</div>
</div>
</div>
</div>
<!-- FIN DU BLOC DE CONTENU -->
<!-- CONTENU DE CINQUIÈME ONGLET - BONUS -->
<div id="my_qeel_5">
<div class="contenty_tfa">
<div id="bonus_content">
<div id="tfa_partenaire_haut">
<h2>Nos meilleurs partenaires</h2>
<!-- BOUTONS AVANT-APRES -->
<span id="prev4"><img src="http://i45.servimg.com/u/f45/11/95/30/70/prev10.png" alt="prev" /></span>
<span id="next4"><img src="http://i45.servimg.com/u/f45/11/95/30/70/next10.png" alt="next" /></span>
<!-- SLIDE PARTENAIRES -->
<div id="slide_tfa_partenaires">
<!-- ICI TU METS LES ADRESSES ET BANNIERES -->
<a href="#"><img class="opacite_8" src="http://i45.servimg.com/u/f45/11/95/30/70/513.jpg" alt="" /> </a>
<a href="#"><img class="opacite_8" src="http://i45.servimg.com/u/f45/11/95/30/70/315.jpg" alt="" /> </a>
<a href="#"><img class="opacite_8" src="http://i45.servimg.com/u/f45/11/95/30/70/222.jpg" alt="" /> </a>
<a href="#"><img class="opacite_8" src="http://i45.servimg.com/u/f45/11/95/30/70/416.jpg" alt="" /> </a>
<a href="#"><img class="opacite_8" src="http://i45.servimg.com/u/f45/11/95/30/70/121.jpg" alt="" /> </a>
</div>
<h2>Sujets actifs, meilleurs posteurs</h2>
<div id="member_actif">
<span class="gensmall">
<a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a><br />
<a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a><br />
<a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>
</span>
</div>
</div>
<div style="clear:both;"></div>
</div>
</div>
</div>
<div style="clear:both;"></div>
</div>
<!-- FIN DU BLOC DE CONTENU -->
<!-- BOUTON DU BAS -->
<div class="tfa_boutons" id="bas_boutons">
<a href="#" onclick="Monter_Cacher('my_qeel_4'); return false"><span class="qeel_span"> Anniversaires</span></a>
<a href="#" onclick="Monter_Cacher('my_qeel_5'); return false"><span class="qeel_span"> Bonus</span></a>
</div>
</div>
<!-- FIN CODE DES ONGLETS -->
<div style="clear:both;"></div>
<!-- END disable_viewonline -->
<script type="text/javascript">
//<![CDATA[
function Monter_Cacher(id)
{
for(var i=1;i<=5;i++)
{
document.getElementById('my_qeel_'+i).style.display='none';
}
if(document.getElementById(id).style.display =='none')
{
document.getElementById(id).style.display = 'block';
}
}
Monter_Cacher('my_qeel_1');
//]]>
</script>
Le CSS que j'avais commencé à modifier pour l'adapter à mes besoins surtout au niveau des tailles et de la couleur mais à part cela, je n'y pas touché
- Code:
/* ---------------- QEEL -------------- */
#qeel_TFA_block #haut_boutons{
width: 100%;
margin: 0 auto;
text-align: center;
background-position: center;
}
/* SUPPRESSION DES MARGES POUR TOUS LES BOUTONS */
#my_qeel_1, #my_qeel_2, #my_qeel_3, #my_qeel_4,#my_qeel_5, #my_qeel_6{
margin: 0;
padding: 0;
}
/* CONTENEUR */
#qeel_TFA_block{
position: relative;
width: 1000px;
text-align: center;
margin: 0 auto;
padding: 0;
top: 5px;
bottom: 25px;
}
/* PLACER LES BOUTONS */
#qeel_TFA_block #haut_boutons a{
width: 180px;
margin: 0 auto;
text-align: center;
background-position: center;
position: relative;
top: 10px;
z-index: 3;
}
#qeel_TFA_block #gauche_boutons a{
width: 140px;
position: absolute;
top: 130px;
left: 0;
z-index: 3;
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
}
#qeel_TFA_block #droite_boutons a{
width: 140px;
position: absolute;
top: 130px;
right: 0;
z-index: 3;
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
#qeel_TFA_block #bas_boutons a{
width: 200px;
margin: 0;
position: relative;
top: -10px;
z-index: 3;
}
/* STYLE DES BOUTONS */
.tfa_boutons a{
margin: 0px;
padding: 7px;
text-decoration: none;
background:url('http://fr.quozpowa.com/QuozUpload/51082294061364297729fondsuj.png')no-repeat transparent;
border: 2px solid #b39975;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius:60px;
-moz-text-shadow: 0px 1px 0px #000;
-webkit-text-shadow: 0px 1px 0px #000;
text-shadow: 0px 1px 0px #000;
}
/* TEXTE DES BOUTONS */
.tfa_boutons a .qeel_span{
color: #e50016;
font-size: bold;
font: 18px Verdana;
letter-spacing:2px;
text-decoration: none;
}
/* BOUTONS AU SURVOL */
.tfa_boutons a:hover{
border: 2px solid #477aa5;
text-decoration: none !important;
}
/* BLOC DE CONTENU */
#container_tfa_my_qeel{
position: relative;
background-position: center;
text-align: left;
margin: 0 auto;
padding: 0;
background: url('http://fr.quozpowa.com/QuozUpload/70639728381364473212fondQEEL.png') transparent;
height: 250px;
width: 845px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius:20px;
border: 3px solid #b39975;
}
#TFA0, #TFA12, #TFA13, #TFA14, #TFA15, #TFA16, #TFA17, #TFA20{
text-align: center;
font: 16px Arial;
font-weight: bold;
color: #001634;
}
#TFA16{
background-color: transparent;
}
.contenty_tfa p{
font: 14px Arial;
color: #68aee9;
padding: 3px;
margin: 0 auto;
padding-top: 40px;
text-align: center;
}
/* STATISTIQUES */
.my_tfa_qeel_content{
width: 450px;
text-align: center;
margin: 0 auto;
padding: 0;
padding-top: 30px;
font: 16px Arial;
font-weight: bold;
color: #001634;
-moz-text-shadow: 0px 1px 0px #a1c9ff;
-webkit-text-shadow: 0px 1px 0px #a1c9ff;
text-shadow: 0px 1px 0px #a1c9ff;
}
/* TEXTES */
.my_tfa_qeel_content span{
width: 100%;
text-align: center;
font: 14px Arial;
font-weight: bold;
color:#000;
}
.my_tfa_qeel_content td{
text-align: center;
font: 14px Arial;
font-weight: bold;
color: 000;
}
.my_tfa_qeel_content td .row1{
background: transparent;
text-align: center;
font: 14px Arial;
font-weight: bold;
color: #000;
}
.my_tfa_qeel_content .row1 span{
text-align: center;
font: 14px Arial;
font-weight: bold;
}
/* GROUPES */
.my_groupes{
width: 500px;
height: 215px;
margin: 0 auto;
padding: 0;
padding-top: 30px;
background:url('http://fr.quozpowa.com/QuozUpload/51082294061364297729fondsuj.png')no-repeat transparent;
}
.my_groupes ul{
margin: 0;
padding: 0;
}
.my_groupes_gauche{
width: 190px;
float: left;
margin: 0 auto;
padding: 0;
}
.my_groupes_droite{
width: 190px;
float: right;
margin: 0 auto;
padding: 0;
}
.my_groupes_gauche li, .my_groupes_droite li{
list-style: none;
width: 190px;
height: 30px;
background:url('http://fr.quozpowa.com/QuozUpload/87749156631364476082fondgrp.png') no-repeat transparent;
text-align: center;
margin-bottom: 5px;
padding: 0;
padding-top:6px;
}
.my_groupes_gauche li a, .my_groupes_droite li a{
font: 18px Verdana;
text-decoration: none;
-moz-text-shadow: 0px 1px 0px #000;
-webkit-text-shadow: 0px 1px 0px #000;
text-shadow: 0px 1px 0px #000;
}
.my_groupes_gauche li a:hover, .my_groupes_droite li a:hover{
text-transform: uppercase;
text-decoration: none !important;
}
/* ONGLET ANNIVERSAIRES */
.who_anniversaire{
width: 510px;
margin: auto;
margin-top: 20px;
border: 2px solid #b39975;
background:url('http://fr.quozpowa.com/QuozUpload/51082294061364297729fondsuj.png') no-repeat transparent;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
}
.who_anniversaire_hauteur{
width: 480px;
margin: auto;
height: 190px;
overflow-y: auto;
margin: 10px auto;
}
/* ONGLET QUI EST LA */
#who_is_qeel{
width: 560px;
position: relative;
margin: 0 auto;
padding: 0;
padding-top: 20px;
}
#who_is_gauche{
width: 260px;
border: 2px solid #b39975;
background:url('http://fr.quozpowa.com/QuozUpload/51082294061364297729fondsuj.png') no-repeat transparent;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
float: left;
margin: 0 auto;
text-align: left;
}
#who_is_droite{
width: 260px;
border: 2px solid #b39975;
background:url('http://fr.quozpowa.com/QuozUpload/51082294061364297729fondsuj.png') no-repeat transparent;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
float: right;
margin: 0 auto;
text-align: left;
}
.who_is_hauteur{
width:240px;
margin: 0 auto;
height: 190px;
overflow-y: auto;
margin: 10px auto;
}
/* ------ ONGLET BONUS --------- */
#bonus_content{
width: 95%;
position: relative;
margin: auto;
padding: 0;
}
/* LES PARTENAIRES */
#tfa_partenaire_haut{
position: relative;
width: 100%;
margin:auto;
padding: 0;
text-align: center;
}
#tfa_partenaire_haut h2{
color: #4e91c8;
font: 18px Verdana;
letter-spacing:1px;
-moz-text-shadow: 0px 1px 0px #000;
-webkit-text-shadow: 0px 1px 0px #000;
text-shadow: 0px 1px 0px #000;
}
#tfa_partenaire_haut h2:first-letter{
color: #780014 !important;
font-weight: bold;
font-size: 20px;
}
/* SLIDE PARTENAIRE HAUT */
#slide_tfa_partenaires {
width: 468px;
height: 60px;
margin: auto;
padding: 0;
position: relative;
overflow: hidden;
}
/* LIEN SLIDE */
#slide_tfa_partenaires a {
text-decoration: none;
}
/* BANIERES DU SLIDE */
#slide_tfa_partenaires a img {
width: 468px;
height: 60px;
margin: auto;
padding: 0;
}
/* PLACER LES ICONES AVANT-APRES */
#prev4 {
position: absolute;
top: 52px;
left: 10px;
cursor: pointer;
}
#next4 {
position: absolute;
top: 52px;
right: 10px;
cursor: pointer;
}
#member_actif{
width: 350px;
border: 2px solid #072a54;
background: url(http://i45.servimg.com/u/f45/11/95/30/70/2420.png);
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
margin: 5px auto 0;
padding: 5px;
}
#member_actif a.gensmall {
color: #000;
text-decoration: none;
font: 14px Arial;
}
Et le code java
- Code:
jQuery(document).ready( function(){
jQuery(".tfa_boutons a").hover(function() {
jQuery(this).animate({ backgroundColor: "#91dae5"}, 600);
},
function() {
jQuery(this).animate({ backgroundColor: "#286cb8"}, 400);
});
jQuery(".my_groupes_gauche li").hover(function() {
jQuery(this).animate({ backgroundColor: "#91dae5"}, 600);
},
function() {
jQuery(this).animate({ backgroundColor: "#286cb8"}, 400);
});
jQuery(".my_groupes_droite li").hover(function() {
jQuery(this).animate({ backgroundColor: "#91dae5"}, 600);
},
function() {
jQuery(this).animate({ backgroundColor: "#286cb8"}, 400);
});
jQuery("a .qeel_span").hover(function() {
jQuery(this).animate({ color: "#0056e5"}, 400);
},
function() {
jQuery(this).animate({ color: "#e50016"}, 500);
});
jQuery(".bas-tfagroup a.lien_bas_group").hover(function() {
jQuery(this).animate({ color: "#0087e5"}, 400);
},
function() {
jQuery(this).animate({ color: "#e50016"}, 500);
});
jQuery('.opacite_8').each(function() {
jQuery(this).css('opacity', 0.6);
jQuery(this).hover(function() {
jQuery(this).stop().animate({ opacity: 1.0 }, 700);
},
function() {
jQuery(this).stop().animate({ opacity: 0.7 }, 700);
});
});
jQuery('#slide_tfa_partenaires').cycle({
fx: 'fade',
speed: '2500',
pause: '0',
next: '#next4',
prev: '#prev4'
});
});
J'arrive bien à le séparer du bloc Bonus mais ensuite je n'arrive à créer un bloc : Sujets actifs/Top20 pour le mettre à l'intérieur
vous pouvez le voir ici : ffftest
Merci pour votre aide
Dernière édition par Azya le Dim 31 Mar 2013 - 11:04, édité 2 fois
Azya- ***
-
Messages : 151
Inscrit(e) le : 21/10/2011 -
Re: Réglages code pour QEEL
par Azya Ven 29 Mar 2013 - 14:37
bonjour à tous,
En reprenant mon code après une bonne nuit de repos, j'ai réussi à mettre mes petites bulles comme je voulais
Par contre, j'ai un sérieux problème au niveau du réglage du CSS ou du HT, je n'en sais rien du tout à vrai dire
J'ai le contenu de ma bulle groupes dans toutes les autres bulles du moins il est toujours visible alors qu'il ne devrait pas l'être
Pour plus de commodité pour retravailler mon QEEL, j'ai modifié les noms aussi bien dans le java que dans le CSS
Voilà le HT
Le CSS que j'ai modifié avec les noms du HT
Et le java avec les noms modifiés
L'adresse de mon forum test
ForumtestFFF
En reprenant mon code après une bonne nuit de repos, j'ai réussi à mettre mes petites bulles comme je voulais
Par contre, j'ai un sérieux problème au niveau du réglage du CSS ou du HT, je n'en sais rien du tout à vrai dire
J'ai le contenu de ma bulle groupes dans toutes les autres bulles du moins il est toujours visible alors qu'il ne devrait pas l'être
Pour plus de commodité pour retravailler mon QEEL, j'ai modifié les noms aussi bien dans le java que dans le CSS
Voilà le HT
- Code:
<!-- BEGIN disable_viewonline -->
<div id="HQEEL" style="width: 100%; text-align: center;"><img src="http://fr.quozpowa.com/QuozUpload/20349135071364474959catQEEL.png" alt="" /></div>
<div id="TtQeel">
<!-- BOUTON DU HAUT -->
<div class="boutons" id="hboutons" >
<a href="#" onclick="Monter_Cacher('my_qeel_1'); return false"><span class="qeel_span"> Les données FFFistes </span></a>
<a href="#" onclick="Monter_Cacher('my_qeel_2'); return false"><span class="qeel_span"> Quel FFFiste est présent ? </span></a>
</div>
<!-- BOUTON DE GAUCHE -->
<div class="boutons" id="gauboutons">
<a href="#" onclick="Monter_Cacher('my_qeel_3'); return false"><span class="qeel_span">Partenaires</span></a>
</div>
<!-- BOUTON DE DROITE -->
<div class="boutons" id="dboutons">
<a href="#" onclick="Monter_Cacher('my_qeel_4'); return false"><span class="qeel_span">Sujets actifs/Top20</span></a>
</div>
<!-- DEBUT CONTENU -->
<div id="container_my_qeel">
<!--MY QEEL1:Les données FFFistes -->
<div id="my_qeel_1">
<div class="contenty">
<div class="my_qeel_content">
<div id="totposts">{TOTAL_POSTS}
<script type="text/javascript">
document.getElementById('totposts').innerHTML=document.getElementById('totposts').innerHTML.replace(/Nos membres ont posté un total de /,"Les FFFistes sont très prolixes et ont posté à tout va un total de ");
</script> </div>
<br />
<div id="totus">{TOTAL_USERS}
<script type="text/javascript">
document.getElementById('totus').innerHTML=document.getElementById('totus').innerHTML.replace(/Nous avons /,"FFFiste compte à ce jour ");
document.getElementById('totus').innerHTML=document.getElementById('totus').innerHTML.replace(/membres enregistrés/,"FFfistes. ");
document.getElementById('totus').innerHTML=document.getElementById('totus').innerHTML.replace(/membre enregistré/,"FFFiste. ");
</script> </div>
<div id="Newus">{NEWEST_USER}
<script type="text/javascript">
document.getElementById('Newus').innerHTML=document.getElementById('Newus').innerHTML.replace(/L'utilisateur enregistré le plus récent est /,"Le dernier FFFiste avoir rejoint nos terres se nomme ");
</script> </div>
<br />
<span id="totuson">{TOTAL_USERS_ONLINE}</span>
<script type="text/javascript">
document.getElementById('totuson').innerHTML=document.getElementById('totuson').innerHTML.replace(/Il y a en tout /,"Actuellement, en ligne, nous sommes ");
document.getElementById('totuson').innerHTML=document.getElementById('totuson').innerHTML.replace(/utilisateurs en ligne/,"Futurs FFFistes en herbe ");
document.getElementById('totuson').innerHTML=document.getElementById('totuson').innerHTML.replace(/utilisateur en ligne/,"Futur FFFiste en herbe ");
document.getElementById('totuson').innerHTML=document.getElementById('totuson').innerHTML.replace(/Enregistrés/,"FFFistes ");
document.getElementById('totuson').innerHTML=document.getElementById('totuson').innerHTML.replace(/Enregistré/,"FFFiste");
document.getElementById('totuson').innerHTML=document.getElementById('totuson').innerHTML.replace(/Invisible et/,"Illustre inconnu et ");
document.getElementById('totuson').innerHTML=document.getElementById('totuson').innerHTML.replace(/Invisibles et/,"Illustres inconnus et ");
document.getElementById('totuson').innerHTML=document.getElementById('totuson').innerHTML.replace(/Invités/,"Hôtes de passage qui ont décidé de camper un peu plus longtemps. ");
document.getElementById('totuson').innerHTML=document.getElementById('totuson').innerHTML.replace(/Invité/,"Hôte de passage qui a décidé de camper un plus longtemps. ");
</script>
<br />
<span id="Recordus">{RECORD_USERS}</span>
<script type="text/javascript">document.getElementById('Recordus').innerHTML=document.getElementById('Recordus').innerHTML.replace(/Le record du nombre d'utilisateurs en ligne est de/,"Le nombre de FFFistes à être ensemble est de ");</script>
</div>
</div>
</div>
<!-- MY QEEL2:Quels(lle(s)) FFFiste(s) est(sont) présent(s) ? -->
<div id="my_qeel_2">
<div class="contenty">
<div id="quiqeel">
<div id="quig">
<div class="quih">
<span id="presents">{LOGGED_IN_USER_LIST}</span>
<script type="text/javascript">document.getElementById('presents').innerHTML=document.getElementById('presents').innerHTML.replace(/Utilisateurs enregistrés/,"FFFistes présents sur leurs Terres ");</script>
</div>
</div>
<div id="quidr">
<div class="quih">
<table id="membconnec">{L_CONNECTED_MEMBERS}
<script type="text/javascript">document.getElementById('membconnec').innerHTML=document.getElementById('membconnec').innerHTML.replace(/Membres connectés/,"FFFistes qui sont passées sur leurs Terres");</script>
</table>
</div>
</div>
<div style="clear:both;"></div>
</div>
</div>
</div>
<!-- MY QEEL3:Partenaires -->
<div id="my_qeel_3">
<div class="contenty">
<div id="bonus">
<div id="parthaut">
<h2>Nos partenaires</h2>
<!-- BOUTONS AVANT-APRES -->
<span id="prev4"><img src="http://i45.servimg.com/u/f45/11/95/30/70/prev10.png" alt="prev" /></span>
<span id="next4"><img src="http://i45.servimg.com/u/f45/11/95/30/70/next10.png" alt="next" /></span>
<!-- SLIDE PARTENAIRES -->
<div id="slidepart">
<!-- LES ADRESSES ET BANNIERES -->
<a href="#"><img class="opacite_8" src="http://i45.servimg.com/u/f45/11/95/30/70/513.jpg" alt="" /> </a>
<a href="#"><img class="opacite_8" src="http://i45.servimg.com/u/f45/11/95/30/70/315.jpg" alt="" /> </a>
<a href="#"><img class="opacite_8" src="http://i45.servimg.com/u/f45/11/95/30/70/222.jpg" alt="" /> </a>
<a href="#"><img class="opacite_8" src="http://i45.servimg.com/u/f45/11/95/30/70/416.jpg" alt="" /> </a>
<a href="#"><img class="opacite_8" src="http://i45.servimg.com/u/f45/11/95/30/70/121.jpg" alt="" /> </a>
</div>
<h2>Nos nouveaux partenaires</h2>
</div>
<div style="clear:both;"></div>
</div>
</div>
</div>
<!-- MY QEEL4:Sujets actifs/Top20 -->
<div id="my_qeel_4">
<div class="contenty">
<div id="sujets actifs">
<div id="member_actif">
<span class="gensmall">
<a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a><br />
<a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a><br />
<a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>
</span>
</div>
<div style="clear:both;"></div>
</div>
</div>
</div>
<!-- MY QEEL5 - ANNIVERSAIRES -->
<div id="my_qeel_5">
<div class="contenty">
<div class="anniversaire">
<div class="anniversaireh">
<!-- LES ANNIVERSAIRES -->
<table>
{L_WHOSBIRTHDAY_TODAY}
<span id="anni">
{L_WHOSBIRTHDAY_WEEK}
<script type="text/javascript">document.getElementById('anni').parentNode.innerHTML=document.getElementById('anni').parentNode.innerHTML.replace(/Membres fêtant leur anniversaire aujourd'hui/,"Les employés fêtant leur anniversaire aujourd'hui sont").replace(/Membres fêtant leur anniversaire dans les ([0-9]+) prochains jours/,"Les employés fêtant bientôt leur anniversaire").replace(/Aucun membre ne fête son anniversaire aujourd'hui/,"Aucun employé ne fête son anniversaire aujourd'hui").replace(/Aucun membre ne fête son anniversaire dans les ([0-9]+) prochains jours/,"Aucun employé ne fête son anniversaire dans les prochains jours");</script>
</span>
</table>
<br clear="all" />
</div>
</div>
</div>
</div>
<!-- MYQEEL:Groupes 6-->
<div id="my_qeel_6">
<div class="contenty">
<div class="groupes">
<div class="groupesg">
<ul>
<li><a href="#lien_groupe" style="color: #AB0000;">Groupe 1</a></li>
<li><a href="#lien_groupe" style="color: #859C00;">Groupe 2</a></li>
<li><a href="#lien_groupe" style="color: #0395A8;">Groupe 3</a></li>
<li><a href="#lien_groupe" style="color: #647A4C;">Groupe 4</a></li>
</ul>
</div>
<div class="groupesd">
<ul>
<li><a href="#lien_groupe" style="color: #805C00;">Groupe 5</a></li>
<li><a href="#lien_groupe" style="color: #7D3DA8;">Groupe 6</a></li>
<li><a href="#lien_groupe" style="color: #BA045C;">Groupe 7</a></li>
<li><a href="#lien_groupe" style="color: #333333;">Groupe 8</a></li>
</ul>
</div>
<div style="clear:both;"></div>
</div>
</div>
</div>
<!-- BOUTON DU BAS -->
<div class="boutons" id="bboutons">
<a href="#" onclick="Monter_Cacher('my_qeel_5'); return false"><span class="qeel_span"> Anniversaires</span></a>
<a href="#" onclick="Monter_Cacher('my_qeel_6'); return false"><span class="qeel_span"> Groupes</span></a>
</div>
</div>
<!-- FIN CODE DES ONGLETS -->
<div style="clear:both;"></div>
<!-- END disable_viewonline -->
<script type="text/javascript">
//<![CDATA[
function Monter_Cacher(id)
{
for(var i=1;i<=5;i++)
{
document.getElementById('my_qeel_'+i).style.display='none';
}
if(document.getElementById(id).style.display =='none')
{
document.getElementById(id).style.display = 'block';
}
}
Monter_Cacher('my_qeel_1');
//]]>
</script>
Le CSS que j'ai modifié avec les noms du HT
- Code:
/* ---------------- QEEL -------------- */
#TtQeel #hboutons{
width: 100%;
margin: 0 auto;
text-align: center;
background-position: center;
}
/* SUPPRESSION DES MARGES POUR TOUS LES BOUTONS */
#my_qeel_1, #my_qeel_2, #my_qeel_3, #my_qeel_4,#my_qeel_5,#my_qeel_6{
margin: 0;
padding: 0;
}
/* CONTENEUR */
#TtQeel{
position: relative;
width: 1000px;
text-align: center;
margin: 0 auto;
padding: 0;
top: 5px;
bottom: 25px;
}
/* PLACER LES BOUTONS */
#TtQeel #hboutons a{
width: 180px;
margin: 0 auto;
text-align: center;
background-position: center;
position: relative;
top: 10px;
z-index: 3;
}
#TtQeel #gauboutons a{
width: 140px;
position: absolute;
top: 130px;
left: 0;
z-index: 3;
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
}
#TtQeel #dboutons a{
width: 140px;
position: absolute;
top: 130px;
right: 0;
z-index: 3;
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
#TtQeel #bboutons a{
width: 200px;
margin: 0;
position: relative;
top: -10px;
z-index: 3;
}
/* STYLE DES BOUTONS */
.boutons a{
margin: 0px;
padding: 7px;
text-decoration: none;
background:url('http://fr.quozpowa.com/QuozUpload/51082294061364297729fondsuj.png')no-repeat transparent;
border: 2px solid #b39975;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius:60px;
-moz-text-shadow: 0px 1px 0px #000;
-webkit-text-shadow: 0px 1px 0px #000;
text-shadow: 0px 1px 0px #000;
}
/* TEXTE DES BOUTONS */
.boutons a .qeel_span{
color: #e50016;
font-size: bold;
font: 18px Verdana;
letter-spacing:2px;
text-decoration: none;
}
/* BOUTONS AU SURVOL */
.boutons a:hover{
border: 2px solid #477aa5;
text-decoration: none !important;
}
/* BLOC DE CONTENU */
#container_my_qeel{
position: relative;
background-position: center;
text-align: left;
margin: 0 auto;
padding: 0;
background: url('http://fr.quozpowa.com/QuozUpload/70639728381364473212fondQEEL.png') transparent;
height: 250px;
width: 845px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius:20px;
border: 3px solid #b39975;
}
#totposts, #totus, #Newus, #presents, #Recordus, #membconnec, #totuson, #anni{
text-align: center;
font: 16px Arial;
font-weight: bold;
color: #001634;
}
#membconnec{
background-color: transparent;
}
.contenty p{
font: 14px Arial;
color: #68aee9;
padding: 3px;
margin: 0 auto;
padding-top: 40px;
text-align: center;
}
/* SUJETS ACTIFS */
.sujets actifs{
width: 510px;
margin: auto;
margin-top: 20px;
border: 2px solid #b39975;
background:url('http://fr.quozpowa.com/QuozUpload/51082294061364297729fondsuj.png') no-repeat transparent;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
}
/* STATISTIQUES */
.my_qeel_content{
width: 450px;
text-align: center;
margin: 0 auto;
padding: 0;
padding-top: 30px;
font: 16px Arial;
font-weight: bold;
color: #001634;
-moz-text-shadow: 0px 1px 0px #a1c9ff;
-webkit-text-shadow: 0px 1px 0px #a1c9ff;
text-shadow: 0px 1px 0px #a1c9ff;
}
/* TEXTES */
.my_qeel_content span{
width: 100%;
text-align: center;
font: 14px Arial;
font-weight: bold;
color:#000;
}
.my_qeel_content td{
text-align: center;
font: 14px Arial;
font-weight: bold;
color: 000;
}
.my_qeel_content td .row1{
background: transparent;
text-align: center;
font: 14px Arial;
font-weight: bold;
color: #000;
}
.my_qeel_content .row1 span{
text-align: center;
font: 14px Arial;
font-weight: bold;
}
/* GROUPES */
.groupes{
width: 500px;
height: 215px;
margin: 0 auto;
padding: 0;
padding-top: 30px;
background:url('http://fr.quozpowa.com/QuozUpload/51082294061364297729fondsuj.png')no-repeat transparent;
overflow-y: auto;
}
.groupes ul{
margin: 0;
padding: 0;
}
.groupesg{
width: 190px;
float: left;
margin: 0 auto;
padding: 0;
}
.groupesd{
width: 190px;
float: right;
margin: 0 auto;
padding: 0;
}
.groupesg li, .groupesd li{
list-style: none;
width: 190px;
height: 30px;
background:url('http://fr.quozpowa.com/QuozUpload/87749156631364476082fondgrp.png') no-repeat transparent;
text-align: center;
margin-bottom: 5px;
padding: 0;
padding-top:6px;
}
.groupesg li a, .groupesd li a{
font: 18px Verdana;
text-decoration: none;
-moz-text-shadow: 0px 1px 0px #000;
-webkit-text-shadow: 0px 1px 0px #000;
text-shadow: 0px 1px 0px #000;
}
.groupesg li a:hover, .groupesd li a:hover{
text-transform: uppercase;
text-decoration: none !important;
}
/* ONGLET ANNIVERSAIRES */
.anniversaire{
width: 510px;
margin: auto;
margin-top: 20px;
border: 2px solid #b39975;
background:url('http://fr.quozpowa.com/QuozUpload/51082294061364297729fondsuj.png') no-repeat transparent;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
}
.anniversaireh{
width: 480px;
margin: auto;
height: 190px;
overflow-y: auto;
margin: 10px auto;
}
/* ONGLET QUI EST LA */
#quiqeel{
width: 560px;
position: relative;
margin: 0 auto;
padding: 0;
padding-top: 20px;
}
#quig{
width: 260px;
border: 2px solid #b39975;
background:url('http://fr.quozpowa.com/QuozUpload/51082294061364297729fondsuj.png') no-repeat transparent;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
float: left;
margin: 0 auto;
text-align: left;
}
#quidr{
width: 260px;
border: 2px solid #b39975;
background:url('http://fr.quozpowa.com/QuozUpload/51082294061364297729fondsuj.png') no-repeat transparent;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
float: right;
margin: 0 auto;
text-align: left;
}
.quih{
width:240px;
margin: 0 auto;
height: 190px;
overflow-y: auto;
margin: 10px auto;
}
/* ------ ONGLET BONUS --------- */
#bonus{
width: 95%;
position: relative;
margin: auto;
padding: 0;
}
/* LES PARTENAIRES */
#parthaut{
position: relative;
width: 100%;
margin:auto;
padding: 0;
text-align: center;
}
#parthaut h2{
color: #4e91c8;
font: 18px Verdana;
letter-spacing:1px;
-moz-text-shadow: 0px 1px 0px #000;
-webkit-text-shadow: 0px 1px 0px #000;
text-shadow: 0px 1px 0px #000;
}
#parthaut h2:first-letter{
color: #780014 !important;
font-weight: bold;
font-size: 20px;
}
/* SLIDE PARTENAIRE HAUT */
#slidepart{
width: 468px;
height: 60px;
margin: auto;
padding: 0;
position: relative;
overflow: hidden;
}
/* LIEN SLIDE */
#slidepart a {
text-decoration: none;
}
/* BANIERES DU SLIDE */
#slidepart a img {
width: 468px;
height: 60px;
margin: auto;
padding: 0;
}
/* PLACER LES ICONES AVANT-APRES */
#prev4 {
position: absolute;
top: 52px;
left: 10px;
cursor: pointer;
}
#next4 {
position: absolute;
top: 52px;
right: 10px;
cursor: pointer;
}
Et le java avec les noms modifiés
- Code:
jQuery(document).ready( function(){
jQuery(".boutons a").hover(function() {
jQuery(this).animate({ backgroundColor: "#91dae5"}, 600);
},
function() {
jQuery(this).animate({ backgroundColor: "#286cb8"}, 400);
});
jQuery(".groupesg li").hover(function() {
jQuery(this).animate({ backgroundColor: "#91dae5"}, 600);
},
function() {
jQuery(this).animate({ backgroundColor: "#286cb8"}, 400);
});
jQuery(".groupesd li").hover(function() {
jQuery(this).animate({ backgroundColor: "#91dae5"}, 600);
},
function() {
jQuery(this).animate({ backgroundColor: "#286cb8"}, 400);
});
jQuery("a .qeel_span").hover(function() {
jQuery(this).animate({ color: "#0056e5"}, 400);
},
function() {
jQuery(this).animate({ color: "#e50016"}, 500);
});
jQuery(".bas-tfagroup a.lien_bas_group").hover(function() {
jQuery(this).animate({ color: "#0087e5"}, 400);
},
function() {
jQuery(this).animate({ color: "#e50016"}, 500);
});
jQuery('.opacite_8').each(function() {
jQuery(this).css('opacity', 0.6);
jQuery(this).hover(function() {
jQuery(this).stop().animate({ opacity: 1.0 }, 700);
},
function() {
jQuery(this).stop().animate({ opacity: 0.7 }, 700);
});
});
jQuery('#slidepart').cycle({
fx: 'fade',
speed: '2500',
pause: '0',
next: '#next4',
prev: '#prev4'
});
});
L'adresse de mon forum test
ForumtestFFF
Azya- ***
-
Messages : 151
Inscrit(e) le : 21/10/2011 -
Re: Réglages code pour QEEL
par Azya Sam 30 Mar 2013 - 20:48
Bonsoir à tous
J'ai presque réussi, mon contenu n'apparait plus dans les autres parties mais juste mes bulles du bas : Anniversaire et groupes
donc si quelqu'un peut m'aider parce que là je patauge sévère pour voir ce qui me manque
Mon HT
Mon CSS
Et le javascript
Merci pour l'aide que vous pourrez me fournir
J'ai presque réussi, mon contenu n'apparait plus dans les autres parties mais juste mes bulles du bas : Anniversaire et groupes
donc si quelqu'un peut m'aider parce que là je patauge sévère pour voir ce qui me manque
Mon HT
- Code:
<!-- BEGIN disable_viewonline -->
<div id="HQEEL" style="width: 100%; text-align: center;"><img src="http://fr.quozpowa.com/QuozUpload/20349135071364474959catQEEL.png" alt="" /></div>
<div id="TtQeel">
<!-- BOUTON DU HAUT -->
<div class="boutons" id="hboutons" >
<a href="#" onclick="Monter_Cacher('bul1'); return false"><span class="qeel_span"> Les données FFFistes </span></a>
<a href="#" onclick="Monter_Cacher('bul2'); return false"><span class="qeel_span"> Quel FFFiste est présent? </span></a>
</div>
<!-- BOUTON DE GAUCHE -->
<div class="boutons" id="gauboutons">
<a href="#" onclick="Monter_Cacher('bul3'); return false"><span class="qeel_span">Partenaires</span></a>
</div>
<!-- BOUTON DE DROITE -->
<div class="boutons" id="dboutons">
<a href="#" onclick="Monter_Cacher('bul4'); return false"><span class="qeel_span">Sujets actifs/Top20</span></a>
</div>
<!-- DEBUT CONTENU -->
<div id="contenantbul">
<!--BUL1:Les données FFFistes -->
<div id="bul1">
<div class="ensemble">
<div class="stat">
<div id="totposts">{TOTAL_POSTS}
<script type="text/javascript">
document.getElementById('totposts').innerHTML=document.getElementById('totposts').innerHTML.replace(/Nos membres ont posté un total de /,"Les FFFistes sont très prolixes et ont posté à tout va un total de, ");
</script> </div>
<br />
<div id="totus">{TOTAL_USERS}
<script type="text/javascript">
document.getElementById('totus').innerHTML=document.getElementById('totus').innerHTML.replace(/Nous avons /,"FFFiste compte à ce jour ");
document.getElementById('totus').innerHTML=document.getElementById('totus').innerHTML.replace(/membres enregistrés/,"FFfistes. ");
document.getElementById('totus').innerHTML=document.getElementById('totus').innerHTML.replace(/membre enregistré/,"FFFiste. ");
</script> </div>
<div id="Newus">{NEWEST_USER}
<script type="text/javascript">
document.getElementById('Newus').innerHTML=document.getElementById('Newus').innerHTML.replace(/L'utilisateur enregistré le plus récent est /,"Le dernier FFFiste avoir rejoint nos terres se nomme");
</script> </div>
<br />
<span id="totuson">{TOTAL_USERS_ONLINE}</span>
<script type="text/javascript">
document.getElementById('totuson').innerHTML=document.getElementById('totuson').innerHTML.replace(/Il y a en tout /,"Actuellement, en ligne, nous sommes ");
document.getElementById('totuson').innerHTML=document.getElementById('totuson').innerHTML.replace(/utilisateurs en ligne/,"Futurs FFFistes en herbe à visiter nos terres");
document.getElementById('totuson').innerHTML=document.getElementById('totuson').innerHTML.replace(/utilisateur en ligne/,"Futur FFFiste en herbe à visiter nos terres");
document.getElementById('totuson').innerHTML=document.getElementById('totuson').innerHTML.replace(/Enregistrés/,"FFFistes ");
document.getElementById('totuson').innerHTML=document.getElementById('totuson').innerHTML.replace(/Enregistré/,"FFFiste");
document.getElementById('totuson').innerHTML=document.getElementById('totuson').innerHTML.replace(/Invisible et/,"Illustre inconnu et ");
document.getElementById('totuson').innerHTML=document.getElementById('totuson').innerHTML.replace(/Invisibles et/,"Illustres inconnus et ");
document.getElementById('totuson').innerHTML=document.getElementById('totuson').innerHTML.replace(/Invités/,"Hôtes de passage qui ont décidé de camper un peu plus longtemps. ");
document.getElementById('totuson').innerHTML=document.getElementById('totuson').innerHTML.replace(/Invité/,"Hôte de passage qui a décidé de camper un plus longtemps. ");
</script>
<br />
<span id="Recordus">{RECORD_USERS}</span>
<script type="text/javascript">document.getElementById('Recordus').innerHTML=document.getElementById('Recordus').innerHTML.replace(/Le record du nombre d'utilisateurs en ligne est de/,"Le nombre de FFFistes à être ensemble est de ");</script>
</div>
</div>
</div>
<!-- BUL2:Quel FFFiste est présent ? -->
<div id="bul2">
<div class="ensemble">
<div id="quiqeel">
<div id="quig">
<div class="quih">
<span id="presents">{LOGGED_IN_USER_LIST}</span>
<script type="text/javascript">document.getElementById('presents').innerHTML=document.getElementById('presents').innerHTML.replace(/Utilisateurs enregistrés/,"FFFistes présents sur leurs Terres ");</script>
</div>
</div>
<div id="quidr">
<div class="quih">
<table id="membconnec">{L_CONNECTED_MEMBERS}
<script type="text/javascript">document.getElementById('membconnec').innerHTML=document.getElementById('membconnec').innerHTML.replace(/Membres connectés/,"FFFistes qui sont passées sur leurs Terres");</script>
</table>
</div>
</div>
<div style="clear:both;"></div>
</div>
</div>
</div>
<!-- BUL3:Partenaires -->
<div id="bul3">
<div class="ensemble">
<div id="partenaires">
<div id="parthaut">
<h2>Nos partenaires</h2>
<!-- BOUTONS AVANT-APRES -->
<span id="prec4"><img src="http://i45.servimg.com/u/f45/11/95/30/70/prev10.png" alt="prev" /></span>
<span id="next4"><img src="http://i45.servimg.com/u/f45/11/95/30/70/next10.png" alt="next" /></span>
<!-- SLIDE PARTENAIRES -->
<div id="slidepart">
<!-- LES ADRESSES ET BANNIERES -->
<a href="#"><img class="opacite_8" src="http://i45.servimg.com/u/f45/11/95/30/70/513.jpg" alt="" /> </a>
<a href="#"><img class="opacite_8" src="http://i45.servimg.com/u/f45/11/95/30/70/315.jpg" alt="" /> </a>
<a href="#"><img class="opacite_8" src="http://i45.servimg.com/u/f45/11/95/30/70/222.jpg" alt="" /> </a>
<a href="#"><img class="opacite_8" src="http://i45.servimg.com/u/f45/11/95/30/70/416.jpg" alt="" /> </a>
<a href="#"><img class="opacite_8" src="http://i45.servimg.com/u/f45/11/95/30/70/121.jpg" alt="" /> </a>
</div>
<h2>Nos nouveaux partenaires</h2>
</div>
<div style="clear:both;"></div>
</div>
</div>
</div>
<!-- BUL4:Sujets actifs/Top20 -->
<div id="bul4">
<div class="ensemble">
<div id="sujetsactifs">
<span class="gensmall">
<a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a><br />
<a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a><br />
<a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>
</span>
</div>
<div style="clear:both;"></div>
</div>
</div>
<!-- BUL5 - ANNIVERSAIRES -->
<div id="bul5">
<div class="ensemble">
<div class="anniversaire">
<div class="anniversaireh">
<!-- LES ANNIVERSAIRES -->
<table>
{L_WHOSBIRTHDAY_TODAY}
<span id="anni">
{L_WHOSBIRTHDAY_WEEK}
<script type="text/javascript">document.getElementById('anni').parentNode.innerHTML=document.getElementById('anni').parentNode.innerHTML.replace(/Membres fêtant leur anniversaire aujourd'hui/,"Les employés fêtant leur anniversaire aujourd'hui sont").replace(/Membres fêtant leur anniversaire dans les ([0-9]+) prochains jours/,"Les employés fêtant bientôt leur anniversaire").replace(/Aucun membre ne fête son anniversaire aujourd'hui/,"Aucun employé ne fête son anniversaire aujourd'hui").replace(/Aucun membre ne fête son anniversaire dans les ([0-9]+) prochains jours/,"Aucun employé ne fête son anniversaire dans les prochains jours");</script>
</span>
</table>
<br clear="all" />
</div>
</div>
</div>
</div>
<!-- BUL6:Groupes-->
<div id="bul6">
<div class="ensemble">
<div class="groupes">
<div class="groupesg">
<ul>
<li><a href="#lien_groupe" style="color: #AB0000;">Groupe 1</a></li>
<li><a href="#lien_groupe" style="color: #859C00;">Groupe 2</a></li>
<li><a href="#lien_groupe" style="color: #0395A8;">Groupe 3</a></li>
<li><a href="#lien_groupe" style="color: #647A4C;">Groupe 4</a></li>
</ul>
</div>
<div class="groupesd">
<ul>
<li><a href="#lien_groupe" style="color: #805C00;">Groupe 5</a></li>
<li><a href="#lien_groupe" style="color: #7D3DA8;">Groupe 6</a></li>
<li><a href="#lien_groupe" style="color: #BA045C;">Groupe 7</a></li>
<li><a href="#lien_groupe" style="color: #333333;">Groupe 8</a></li>
</ul>
</div>
<div style="clear:both;"></div>
</div>
</div>
</div>
<!-- BOUTON DU BAS -->
<div class="boutons" id="bboutons">
<a href="#" onclick="Monter_Cacher('bul5'); return false"><span class="qeel_span"> Anniversaires</span></a>
<a href="#" onclick="Monter_Cacher('bul6'); return false"><span class="qeel_span"> Groupes</span></a>
</div>
</div>
<!-- FIN CODE DES ONGLETS -->
<div style="clear:both;"></div>
<!-- END disable_viewonline -->
<script type="text/javascript">
//<![CDATA[
function Monter_Cacher(id)
{
for(var i=1;i<=6;i++)
{
document.getElementById('bul'+i).style.display='none';
}
if(document.getElementById(id).style.display =='none')
{
document.getElementById(id).style.display = 'block';
}
}
Monter_Cacher('bul1');
//]]>
</script>
Mon CSS
- Code:
/*|__________ INDEX_BODY__________*/
/*--- QEEL---*/
/*Ossature*/
#TtQeel{
position: relative;
width: 1000px;
text-align: center;
margin: 0 auto;
padding: 0;
top: 5px;
bottom: 25px;
}
#TtQeel #hboutons{
width: 100%;
margin: 0 auto;
text-align: center;
background-position: center;
}
#bul1, #bul2, #bul3, #bul4, #bul5, #bul6{
margin: 0;
padding: 0;
}
/*Boutons*/
#TtQeel #hboutons a{
width: 180px;
margin: 0 auto;
text-align: center;
background-position: center;
position: relative;
top: 10px;
z-index: 3;
}
#TtQeel #gauboutons a{
width: 140px;
position: absolute;
top: 130px;
left: 0;
z-index: 3;
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
}
#TtQeel #dboutons a{
width: 140px;
position: absolute;
top: 130px;
right: 0;
z-index: 3;
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
#TtQeel #bboutons a{
width: 200px;
margin: 0;
position: relative;
top: -10px;
z-index: 3;
}
.boutons a{
margin: 0px;
padding: 7px;
text-decoration: none;
background:url('http://fr.quozpowa.com/QuozUpload/51082294061364297729fondsuj.png')no-repeat transparent;
border: 2px solid #b39975;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius:60px;
-moz-text-shadow: 0px 1px 0px #000;
-webkit-text-shadow: 0px 1px 0px #000;
text-shadow: 0px 1px 0px #000;
}
.boutons a .qeel_span{
color: #e50016;
font-size: bold;
font: 18px Verdana;
letter-spacing:2px;
text-decoration: none;
}
.boutons a:hover{
border: 2px solid #477aa5;
text-decoration: none !important;
}
/*Bulles*/
#contenantbul{
position: relative;
background-position: center;
text-align: left;
margin: 0 auto;
padding: 0;
background: url('http://fr.quozpowa.com/QuozUpload/70639728381364473212fondQEEL.png') transparent;
height: 250px;
width: 845px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius:20px;
border: 3px solid #b39975;
}
#totposts, #totus, #Newus, #presents, #Recordus, #membconnec, #totuson, #anni{
text-align: center;
font: 16px Arial;
font-weight: bold;
color: #001634;
}
#membconnec{
background-color: transparent;
}
.ensemble p{
font: 14px Arial;
color: #68aee9;
padding: 3px;
margin: 0 auto;
padding-top: 40px;
text-align: center;
}
/* Les données FFFistes*/
.stat{
width: 450px;
text-align: center;
margin: 0 auto;
padding: 0;
padding-top: 30px;
font: 16px Arial;
font-weight: bold;
color: #001634;
-moz-text-shadow: 0px 1px 0px #a1c9ff;
-webkit-text-shadow: 0px 1px 0px #a1c9ff;
text-shadow: 0px 1px 0px #a1c9ff;
}
.stat span{
width: 100%;
text-align: center;
font: 14px Arial;
font-weight: bold;
color:#000;
}
.stat td{
text-align: center;
font: 14px Arial;
font-weight: bold;
color: 000;
}
.stat td .row1{
background: transparent;
text-align: center;
font: 14px Arial;
font-weight: bold;
color: #000;
}
.stat .row1 span{
text-align: center;
font: 14px Arial;
font-weight: bold;
}
/* Sujets actifs,Top20*/
#sujetsactifs{
width: 350px;
border: 2px solid #072a54;
background: url('http://fr.quozpowa.com/QuozUpload/51082294061364297729fondsuj.png');
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
margin: 5px auto 0;
padding: 5px;
}
#sujetsactifs a.gensmall {
color: #000;
text-decoration: none;
font: 14px Arial;
}
/*Groupes*/
.groupes{
width: 500px;
height: 215px;
margin: 0 auto;
padding: 0;
padding-top: 30px;
background:url('http://fr.quozpowa.com/QuozUpload/51082294061364297729fondsuj.png')no-repeat transparent;
overflow-y: auto;
}
.groupes ul{
margin: 0;
padding: 0;
}
.groupesg{
width: 190px;
float: left;
margin: 0 auto;
padding: 0;
}
.groupesd{
width: 190px;
float: right;
margin: 0 auto;
padding: 0;
}
.groupesg li, .groupesd li{
list-style: none;
width: 190px;
height: 30px;
background:url('http://fr.quozpowa.com/QuozUpload/87749156631364476082fondgrp.png') no-repeat transparent;
text-align: center;
margin-bottom: 5px;
padding: 0;
padding-top:6px;
}
.groupesg li a, .groupesd li a{
font: 18px Verdana;
text-decoration: none;
-moz-text-shadow: 0px 1px 0px #000;
-webkit-text-shadow: 0px 1px 0px #000;
text-shadow: 0px 1px 0px #000;
}
.groupesg li a:hover, .groupesd li a:hover{
text-transform: uppercase;
text-decoration: none !important;
}
/* Anniversaires*/
.anniversaire{
width: 510px;
margin: auto;
margin-top: 20px;
border: 2px solid #b39975;
background:url('http://fr.quozpowa.com/QuozUpload/51082294061364297729fondsuj.png') no-repeat transparent;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
}
.anniversaireh{
width: 480px;
margin: auto;
height: 190px;
overflow-y: auto;
margin: 10px auto;
}
/*Qui est là*/
#quiqeel{
width: 560px;
position: relative;
margin: 0 auto;
padding: 0;
padding-top: 20px;
}
#quig{
width: 260px;
border: 2px solid #b39975;
background:url('http://fr.quozpowa.com/QuozUpload/51082294061364297729fondsuj.png') no-repeat transparent;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
float: left;
margin: 0 auto;
text-align: left;
}
#quidr{
width: 260px;
border: 2px solid #b39975;
background:url('http://fr.quozpowa.com/QuozUpload/51082294061364297729fondsuj.png') no-repeat transparent;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
float: right;
margin: 0 auto;
text-align: left;
}
.quih{
width:240px;
margin: 0 auto;
height: 190px;
overflow-y: auto;
margin: 10px auto;
}
/* Partenaires*/
#partenaires{
width: 95%;
position: relative;
margin: auto;
padding: 0;
}
#parthaut{
position: relative;
width: 100%;
margin:auto;
padding: 0;
text-align: center;
}
#parthaut h2{
color: #4e91c8;
font: 18px Verdana;
letter-spacing:1px;
-moz-text-shadow: 0px 1px 0px #000;
-webkit-text-shadow: 0px 1px 0px #000;
text-shadow: 0px 1px 0px #000;
}
#parthaut h2:first-letter{
color: #780014 !important;
font-weight: bold;
font-size: 20px;
}
/* Slidepart */
#slidepart{
width: 468px;
height: 60px;
margin: auto;
padding: 0;
position: relative;
overflow: hidden;
}
#slidepart a {
text-decoration: none;
}
#slidepart a img {
width: 468px;
height: 60px;
margin: auto;
padding: 0;
}
/*Flèches */
#prec4 {
position: absolute;
top: 52px;
left: 10px;
cursor: pointer;
}
#next4 {
position: absolute;
top: 52px;
right: 10px;
cursor: pointer;
}
/*|__________ FIN INDEX_BODY__________*/
Et le javascript
- Code:
jQuery(document).ready( function(){
jQuery(".boutons a").hover(function() {
jQuery(this).animate({ backgroundColor: "#91dae5"}, 600);
},
function() {
jQuery(this).animate({ backgroundColor: "#286cb8"}, 400);
});
jQuery(".groupesg li").hover(function() {
jQuery(this).animate({ backgroundColor: "#91dae5"}, 600);
},
function() {
jQuery(this).animate({ backgroundColor: "#286cb8"}, 400);
});
jQuery(".groupesd li").hover(function() {
jQuery(this).animate({ backgroundColor: "#91dae5"}, 600);
},
function() {
jQuery(this).animate({ backgroundColor: "#286cb8"}, 400);
});
jQuery("a .qeel_span").hover(function() {
jQuery(this).animate({ color: "#0056e5"}, 400);
},
function() {
jQuery(this).animate({ color: "#e50016"}, 500);
});
jQuery(".bas-group a.lien_bas_group").hover(function() {
jQuery(this).animate({ color: "#0087e5"}, 400);
},
function() {
jQuery(this).animate({ color: "#e50016"}, 500);
});
jQuery('.opacite_8').each(function() {
jQuery(this).css('opacity', 0.6);
jQuery(this).hover(function() {
jQuery(this).stop().animate({ opacity: 1.0 }, 700);
},
function() {
jQuery(this).stop().animate({ opacity: 0.7 }, 700);
});
});
jQuery('#slidepart').cycle({
fx: 'fade',
speed: '2500',
pause: '0',
next: '#next4',
prec: '#prec4'
});
});
Merci pour l'aide que vous pourrez me fournir
Azya- ***
-
Messages : 151
Inscrit(e) le : 21/10/2011 -
Re: Réglages code pour QEEL
par Scoubifitz Dim 31 Mar 2013 - 9:29
bonjour,
il manque un "div" de fermeture juste avant la balise "BOUTON DU BAS" ...
il manque un "div" de fermeture juste avant la balise "BOUTON DU BAS" ...
Scoubifitz- Membre actif
-
Messages : 3687
Inscrit(e) le : 18/03/2008 -
Re: Réglages code pour QEEL
par Azya Dim 31 Mar 2013 - 11:03
Bonjour Scoubifitz,
merci de ton coup d’œil, c'est nickel ! Je vais pouvoir régler tout cela tranquillement maintenant
:thanks:
merci de ton coup d’œil, c'est nickel ! Je vais pouvoir régler tout cela tranquillement maintenant
:thanks:
Azya- ***
-
Messages : 151
Inscrit(e) le : 21/10/2011 -
Sujets similaires» Soucis dans les réglages du QEEL
» Code pour un QEEL.
» Code pour QEEL.
» Code pour mettre une image de fond sur le bandeau du QEEL
» Problème avec le code Javascript pour le feu d'artifice (code pour les fêtes)
» Code pour un QEEL.
» Code pour QEEL.
» Code pour mettre une image de fond sur le bandeau du QEEL
» Problème avec le code Javascript pour le feu d'artifice (code pour les fêtes)
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum