Soucis avec le code pour les onglets de mon forum

[kinou_priol]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 21/10/2014, mis en ligne d'un CSS et modification du template Index_Box pour faire des onglets
Lien du forum : http://hyrule.forum2jeux.com/

Description du problème

Bonjour,
je viens vers vous aujourd'hui suite a un petit soucis concernant la modification des noms de mes onglets.

j'ai regarder aujourd'hui, le sujet ci dessous à la recherche d'onglets pour mon forum RP :
https://forum.forumactif.com/t292853-code-script-onglets-categories

le style est exactement se que je recherche, mais impossible de renommé les onglets avec les noms de mes catégories...

Ma demande est donc : comment puis-je modifier le noms des onglets ?
et aussi part la suite retiré/ajouté des onglets ? (mieux vaut être prévoyant ^^)

voici mon CSS qui est un peu chaotique... je suis entrain de le finalisé (et faut aussi avoué que je suis un débutant en codage) :

Code:

a:link {text-decoration: none;}
a:hover{text-decoration: none !important;}
a { text-decoration: none; }
a:link { text-decoration: none; }
a:hover { text-decoration: none; }

a
{
outline: none;
}

-----
body {
margin-top: 100px;
background-repeat: no-repeat;
background-position: center top;
margin-left: 0px;
margin-top: 245px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #ffd9b8;
-moz-border-radius:10px;
}
               
a img:hover {
  padding:0px; 
  filter: alpha (opacity=60);
  -moz-opacity: 0.60;
  opacity: 0.60; }

  a img {
  padding:0px; 
  filter: alpha (opacity=100);
  -moz-opacity: 1.0;
  opacity: 1.0; }

.gradualfader {
border:10px}

a:link, a:visited
{
  text-decoration: none;
}

a:hover
{
  text-shadow: #4A4A4A 0px 0px 2px;
  text-decoration: none !important;
}

/* Page accueil */

#page_accueil  /* Toute la page accueil */
{
  margin: auto; /* Centre le tableau */
  text-align: center;
  background: url("http://nsa20.casimages.com/img/2010/09/11/10091102410440915.png") repeat;
  padding: 15px;
  border: 1px;
}

.case
{
  background: url("http://nsa15.casimages.com/img/2010/04/19/100419054922575590.png") repeat;
  padding: 5px;
  border: 0px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

a.navigation
{
  background: url("http://nsa15.casimages.com/img/2010/07/15/100715101126275775.png");
  color: #666666;
  text-align: center;
  display: block;
  border-left: 3px solid #381F13;
  border-right: 3px solid #381F13;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

a.navigation:hover, a.navigation:hover:visited
{
  background: url("http://nsa15.casimages.com/img/2010/04/19/100419054922575590.png");
  color: #eeeeee;
  display: block;
}
.defilement
{
  overflow: auto;
  width: 360px;
  height: 380px;
}

/* Onglets */
.onglet
{
    display: inline-block;
    margin-left: 3px;
    margin-right: 3px;
    padding: 3px;
    border: 1px solid black;
    border-radius-topright: 10px;
    -moz-border-radius-topright: 10px;
    -webkit-border-radius-topright: 10px;
    border-radius-topleft: 10px;
    -moz-border-radius-topleft: 10px;
    -webkit-border-radius-topleft: 10px;
    cursor:pointer;
}

.onglet_0
{
  background: url("http://nsa20.casimages.com/img/2010/09/11/10091102410440915.png") repeat;
  border-bottom: 1px solid black;
}

.onglet_1
{
  background: url("http://nsa14.casimages.com/img/2010/04/19/100419054823223389.png") repeat;
  border-bottom: 0px;
  padding-bottom: 4px;
  text-shadow: #4A4A4A 0px 0px 3px;
}

.contenu_onglet
{
  background: url("http://nsa14.casimages.com/img/2010/04/19/100419054823223389.png") repeat;
  border: 1px solid black;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  margin-top: -1px;
  padding: 5px;
  display: none;
}

/* Infobulle */
a.infobulle
{
  position: relative;
}

a.infobulle span
{
  display: none; /* ceci masque l'infobulle */
}

a.infobulle:hover
{
  background: none; /* correction d'un bug IE */
  z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
}

a.infobulle:hover span
{
  display: inline; /* ceci affiche l'infobulle */
  position: absolute;
  white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
  top: -150px; /* on positionne notre infobulle */
  left: -50px;
  background: url("http://nsa15.casimages.com/img/2010/04/19/100419054922575590.png") repeat; /* arrière-plan de l'infobulle */
  padding: 3px;

  /* bordures de votre infobulle*/
  border: 1px solid black;
  border-left: 1px solid black;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

/* Forum */

/* Liens des catégories*/
a.forumlink:link, a.forumlink:visited
{
  background: url("http://nsa15.casimages.com/img/2010/04/19/100419054922575590.png");
  font-family: serif;
  background-color: #ffd9b8;
  text-align: center;
  font-size: 100%;
  display: block;
  border: 1px solid #381F13;
  border-left: 5px solid #381F13;
  border-right: 5px solid #381F13;
  border-bottom: 3px double #381F13;
  background-image:url(http://i39.servimg.com/u/f39/17/36/68/57/titre11.jpg);
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;}

.postdetails.poster-profile a img {
-moz-border-radius-bottomleft:12px;
-moz-border-radius-bottomright:12px;
-moz-border-radius-topleft:12px;
-moz-border-radius-topright:12px;
border: 2px solid #000000;
}

a.forumlink:hover, a.forumlink:hover:visited
{
  background: url("http://nsa15.casimages.com/img/2010/07/15/100715101126275775.png");
  color: #381F13;
  display: block;
}

/* Description du forum */
.forum-description
{
  background: url("http://nsa15.casimages.com/img/2010/04/19/100419054922575590.png");
  margin: auto;
  padding: 10px;
  color: #000000;
  width: 80%;
  border: 1px solid #381F13;
  -moz-border-radius: 14px;
  -webkit-border-radius: 14px;
  font-size: 12px;
}

/* Sous-forums */
.forum-sousforum
{
  background: url("http://nsa15.casimages.com/img/2010/04/19/100419054922575590.png");
  color: #000000;
  border: 1px solid #381F13;
  border-top: 0px !important;
  -moz-border-radius-bottomleft: 14px;
  -moz-border-radius-bottomright: 14px;
  -webkit-border-bottom-right-radius: 14px;
  -webkit-border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
  border-bottom-left-radius: 14px;
  margin: auto;
  padding: 4px;
  color: #000000;
  width: 50%;
  text-align: center;
  height: auto;
  font-size: 11px;
}

/* QEEL */

#qeel
.statistiques{
border:0px;
background-image: url("http://img41.imageshack.us/img41/8692/lignept.png");
background-repeat: no-repeat;
background-position: center;
height:270px;}
.text {
color#000000;
cursor:pointer;
}

.groupes{
background-color:#FFFFFF;border: 1px #D0D0D0 dotted;
-moz-border-radius : 5px 5px 5px 5px;
height:40px;padding-right:12px;padding-left:14px;padding-bottom:3px;
font-size:15px;font-weight: bold;text-align:center;
text-decoration: none !important;}
.text {
color#333333;
cursor:pointer;
}

#cat_Forum et Blog,#cat_Membre et Flood,#cat_Mangas et ScanTrad,#cat_Animés et Dramas { padding-top:4px; }
.spoiler_content { display: block; }
.hidden .spoiler_content { display: none; }

.cat_forum {
background-color: #000000;
margin: auto;
margin-bottom:auto;
width:1200px;
}

.onglet {
display:inline-block;
margin-top:30px;
text-decoration:none; !important
cursor:pointer;
border :none;
}

.onglet li {
float:left;
list-style-type:none;
margin-bottom:-22px;
text-decoration:none; !important
cursor:pointer;
}

.onglet li:hover {
text-decoration:none; !important
cursor:pointer;
}

.onglet li a {
display:block;
text-decoration:none; !important
list-style-type: none;
cursor:pointer;
}

.onglet li a: hover {
text-decoration:none;
list-style-type:none;
cursor:pointer;
}

.onglet_actif {
background: url('http://i65.servimg.com/u/f65/15/35/95/61/i_back10.png') no-repeat;
width:180px; /*Largeur de l'onglet étant actif*/
height:25px; /*Hauteur de l'onglet étant actif*/
cursor:pointer;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
-webkit-border-top-left-radius: 10px; /* pour Chrome */
-webkit-border-top-right-radius: 10px; /* pour Chrome */
text-shadow: #4A4A4A 0px 0px 3px;
padding: 5px 20px;
margin: 0;
}

.onglet_nactif {
background:url('http://hitskin.com/themes/16/19/06/i_back_title.png') no-repeat; /*URL de l'onglet étant inactif*/
width:180px; /*Largeur de l'onglet étant inactif*/
height:25px; /*Hauteur de l'onglet étant inactif*/
cursor:pointer;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
-webkit-border-top-left-radius: 10px; /* pour Chrome */
-webkit-border-top-right-radius: 10px; /* pour Chrome */
padding: 5px 20px;
margin: 0;
}

.infobulle{
position: relative;
z-index: 0;}

.infobulle:hover{
background-color: transparent;
z-index: 50;}

.infobulle span{
position: absolute;
background-color: #000000;
padding: 5px;
left: -1000px;
visibility: hidden;
color: none;}

.infobulle span img{
border: 2px;
padding: 5px;}

.infobulle:hover span{
visibility: visible;
top: 70px;
left: 35px;
width: 200px ;
color:#FF0000;
border: 2px solid #381F13;}

#chatbox_header .cattitle strong { display: none; }
#chatbox_header .cattitle:before { content: "Hyrule-Box"; }
.code
{
-moz-border-radius: 15px;
padding-left: 10px;
}
.quote
{
-moz-border-radius: 15px;
padding-left: 10px;
}
.button2{ -moz-border-radius: 5px;}
.bodyline{ -moz-border-radius: 10px;}
input,textarea, select {
border-radius: 10px 10px;
-moz-border-radius: 10px;
padding-left: 3px;
}

.forumline{
background-color: #381F13;
border: 3px solid
-moz-border-radius: 0px 0px 10px 10px ;
border-bottom: 6px #381F13 solid;
border-top: 2px #381F13 dotted;
border-right: 2px #381F13 dotted;
border-left: 2px #381F13 dotted;
width: 100% !important;}

.bodyline{
border: #8A3A15 6px solid;
-moz-border-radius: 10px;
background-image:url("http://img411.imageshack.us/img411/3259/fondback.png");
}

mon template, Index_Box (le seul a être modifier) :

Code:

<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
<tr>
<td valign="bottom">
<!-- BEGIN switch_user_logged_in -->
<span class="gensmall">{LAST_VISIT_DATE}
 
{CURRENT_TIME}
 
</span>
<!-- END switch_user_logged_in -->
<div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
</td>
<td class="gensmall" align="right" valign="bottom">
<!-- BEGIN switch_user_logged_in -->
<a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a>
 
<a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>
 
<!-- END switch_user_logged_in -->
<a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
</td>
</tr>
</table>
 
<!-- DEBUT MODIF ONGLETS -->
 
<script type="text/javascript">
<!--
 
var i = 0;
 
document.write('<div align="center">
<ul class="onglet">
 
 
<li onClick="change_cat(0);" class="onglet_actif" id="cat_0">Forum et Blog</li>
<li onClick="change_cat(1);" class="onglet_nactif" id="cat_1">Membre et Flood</li>
<li onClick="change_cat(2);" class="onglet_nactif" id="cat_2">Mangas et ScanTrad</li>
<li onClick="change_cat(3);" class="onglet_nactif" id="cat_3">Animés et Dramas</li>
 
 
 
</ul>
</div>
');
 
var compteur_cat = 0;
 
var anc_cat = 0;
 
var nom_cat = new Array('0','1','2','3');
 
 
function change_cat(numero)
{
 document.getElementById(nom_cat[anc_cat]).style.display = 'none';
 document.getElementById(nom_cat[numero]).style.display = 'block';
 document.getElementById('cat_'+nom_cat[anc_cat]).className = 'onglet_nactif';
 document.getElementById('cat_'+nom_cat[numero]).className ='onglet_actif';
 anc_cat = numero;
}
 
function capture_cat()
{
if(nom_cat[compteur_cat] == nom_cat[0])
{document.write('<table class="forumline" id="' + nom_cat[compteur_cat] + '" >');
}
else{
 document.write('<table class="forumline" id="' + nom_cat[compteur_cat] + '" style="display:none;">');
}
compteur_cat++;
}
 
//-->
</script>
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
 
<script type="text/javascript">
<!--
capture_cat();
//-->
</script>
 
<!-- FIN MODIF ONGLETS -->
 
<tr>
<th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
<th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>
</tr>
<!-- END tablehead -->
<!-- BEGIN cathead -->
<tr>
<!-- BEGIN inc -->
<td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
<!-- END inc -->
<td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
<h{catrow.cathead.LEVEL} class="hierarchy">
<span class="cattitle">
<a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
</span>
</h{catrow.cathead.LEVEL}>
</td>
<td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
</tr>
<!-- END cathead -->
<!-- BEGIN forumrow -->
<tr>
<!-- BEGIN inc -->
<td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
<!-- END inc -->
<td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</td>
<td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
<table width="100%"><tbody><tr><td><h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
 
            </span>
        </h{catrow.forumrow.LEVEL}></td><td style="padding-left: 40px; text-align: right;" class="gensmall">{catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets.</td></tr></tbody></table>
<span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
<span class="gensmall">
<!-- BEGIN switch_moderators_links -->
{catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
<!-- END switch_moderators_links -->
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
</span>
</td>
<!-- BEGIN forum_link_no -->
<td class="row3 over" align="center" valign="middle" height="50">
<span class="gensmall">{catrow.forumrow.LAST_POST}</span>
</td>
<!-- END forum_link_no -->
<!-- BEGIN forum_link -->
<td class="row3" colspan="3" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.forum_link.HIT_COUNT}</span></td>
<!-- END forum_link -->
</tr>
<!-- END forumrow -->
<!-- BEGIN catfoot -->
<tr>
<!-- BEGIN inc -->
<td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
<!-- END inc -->
<td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
</tr>
<!-- END catfoot -->
<!-- BEGIN tablefoot -->
<img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

J'utilise Phpbb2 et Google Chrome, merci d'avance pour votre aide.

PS : j'ai remarquer également que l'avatar du dernier posteur a disparut et j'arrive pas a le remettre...

[kinou_priol]

up ! et upinet :p

[kinou_priol]

UP!UP!UPlat boum!

[kinou_priol]

Toad ! enfin je veux dire UP !

PS : je commence a être a court de jeu de mots là, répondez SVP ><

[[Nihil]]

Bonsoir,

Sans avoir fait de tests pour ma part, as tu tenté de modifier cette partie là pour changer le nom de tes onglets ?

Code:

<li onClick="change_cat(0);" class="onglet_actif" id="cat_0">Forum et Blog</li>
<li onClick="change_cat(1);" class="onglet_nactif" id="cat_1">Membre et Flood</li>
<li onClick="change_cat(2);" class="onglet_nactif" id="cat_2">Mangas et ScanTrad</li>
<li onClick="change_cat(3);" class="onglet_nactif" id="cat_3">Animés et Dramas</li>


[AenigmA]

Bonjour,
Comme le dit dit Nihil c'est dans cette partie où l'on change le nom des onglets (exemple)

<li onClick="change_cat(0);" class="onglet_actif" id="cat_0">Forum et Blog</li>
<li onClick="change_cat(1);" class="onglet_nactif" id="cat_1">Membre et Flood</li>
<li onClick="change_cat(2);" class="onglet_nactif" id="cat_2">Mangas et ScanTrad</li>
<li onClick="change_cat(3);" class="onglet_nactif" id="cat_3">Animés et Dramas</li>
Si tu rajoutes une catégorie c'est sous cette forme
<li onClick="change_cat(4);" class="onglet_nactif" id="cat_4">Nom nouvelle Cat</li>
Plus cette ligne à modifier (ligne 51)
var nom_cat = new Array('0','1','2','3');
Par
var nom_cat = new Array('0','1','2','3','4');

[kinou_priol]

merci je viens de réussir ^^
c'est juste qu'il faut que je mette des noms court ^^

et merci pour la commande de rajout

résolu !