Catégories en onglets
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Catégories en onglets
Bonsoir =)
Alors voila mon soucis j'aimerais que les catégories de mon forum (cf exemple bienvenue organisation ... ) se présente comme sur le forum donner en exemple, cad en onglet survolé.
http://www.berkeley-u.com/
J'ai lu les sujets posté sur le forum je n'ai pas trouvé le code, j'ai essayé avec le générateur :
http://shared-development.clanteam.com/onglets.php
Voila le résultat obtenu :
https://2img.net/h/oi51.tinypic.com/71sk8z.png
Il faut dire que j'ai touché aux templates suivantes auparavant :
index_body
index_box
overall_footer
overall_header
viewtopic_body
Voila mon css
et mon index box :
L'adresse de mon forum pour voir comment j'avais déjà touché au catégorie, mais j'aimerais pouvoir garder a l'intérieur des onglets les forums présentés tels quels
http://new-york-i-loveyou.forumactif.org/
Merci d'avance et si je ne suis pas claire je me ré expliquerais sans problèmes !
Alors voila mon soucis j'aimerais que les catégories de mon forum (cf exemple bienvenue organisation ... ) se présente comme sur le forum donner en exemple, cad en onglet survolé.
http://www.berkeley-u.com/
J'ai lu les sujets posté sur le forum je n'ai pas trouvé le code, j'ai essayé avec le générateur :
http://shared-development.clanteam.com/onglets.php
Voila le résultat obtenu :
https://2img.net/h/oi51.tinypic.com/71sk8z.png
Il faut dire que j'ai touché aux templates suivantes auparavant :
index_body
index_box
overall_footer
overall_header
viewtopic_body
Voila mon css
- Code:
.navtop {
top : 0px;
width : 100% ;
background-color : # ;
border-bottom : 0px STYLE #FFA34F
}
.mainmenu img { display: none; }
/* BORDURE FORUM */
.forumline{
background-color: #4B1414;
-moz-border-radius:1px;
border-bottom: 1px #4B1414 solid;
}
input,textarea, select {
border-radius: 9px 9px;
-moz-border-radius: 9px;}
.postbody {
display: block;
text-align:justify;
}
.postbody {
display: block;
padding-left: 15px;
padding-right: 15px;
text-align:justify;
}
.quote{
font-family: Arial;
font-size: 11px;
color: #000000;
background-color: #FFFFFF;
border: #AD8E88;
border-style: solid ;
border-left-width: 6px;
border-top-width: 0px;
border-right-width: 0px;
}
.code{
font-family: Arial;
font-size: 11px;
color: #000000;
background-color: #FFFFFF;
border: #AD8E88;
border-style: solid ;
border-left-width: 6px;
border-top-width: 0px;
border-right-width: 0px;
}
.spoiler{
font-family: Arial;
font-size: 11px;
color: #000000;
background-color: #FFFFFF;
border: #AD8E88;
border-style: solid ;
border-left-width: 6px;
border-top-width: 0px;
border-right-width: 0px;
}
i {color :#D49161;}
b {color :#B39DA4;}
u {color: #651111;border-bottom: 1px dashed #651111;}
u {text-decoration: none;}
.quote, .code, .spoiler {
-moz-border-radius: 9px;}
tr.post span.gensmall { display: none; }
body { background-repeat: no-repeat; background-position: top center; background-attachment: scroll }
a:hover {cursor:se-resize;}
a {font-variant: small-caps;}
tr.post span.gensmall { display: none; }
.postprofile dd, .postprofile dt {text-align: center;}
body{
cursor:crosshair;
}
a
{
text-decoration: none;
}
.bodylinewidth{
margin-left:18%;}
.quote { -moz-border-radius: 10px;}
.code { -moz-border-radius: 10px;}
a {
text-transform: lowercase ;
letter-spacing: 2px;}
.bodyline {-moz-border-radius:20px;}
.profilentour {
text-align:center;
padding:5px;
background-color:#913631;
-moz-border-radius:05px;
}
.postdetails.poster-profile a img {
margin: auto;
display: block;
margin-bottom: -10px;
}
.cate {
border-bottom: 5px solid #DFC4C0 ;
}
/* BORDURE TEXTE Dans cette section se trouve ... */
.def {
background-color: #793937;
border-bottom: 2px solid #793937;
border-left: 2px solid #793937;
border-top: 2px solid #793937;
border-right: 2px solid #793937;
-moz-border-radius : 10px ;
}
a.imginfo {
position: relative;
color: #7d7d7d;
text-decoration: none;
border-bottom: 0px #7d7d7d solid; /
}
a.imginfo span {
display: none;
}
a.imginfo:hover {
background: none;
z-index: 999;
cursor: help;
}
textarea, .textarea.post, input.post {
-moz-border-radius:10px;
}
.vignettes
{-moz-border-radius:5px;
background-color: ivory;
padding-right:05px;
padding-left:05px;
padding-bottom: 2px;
padding-top:2px;
font-size: 09px;}
.vignettes
{-moz-border-radius:5px;
background-color: ivory;
padding-right:05px;
padding-left:05px;
padding-bottom: 2px;
padding-top:2px;
font-size: 09px;}
.barre
{border-bottom: 5px solid ivory;}
a.forumlink {
display:block;
text-align: center;
border-bottom: 4px double #FFFFFF;
}
.forumline {
width:97%;
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px 10px 10px 10px;
padding:3px;
}
input.post, select { background-color : #F5F5BF; }
input.mainoption {background-color : #F5F5BF; font-weight : normal;}
input.liteoption {background-color : #F5F5BF;font-weight : normal;}
.vava:hover{ background-color: #F5F5BF;}
.profil_vava { background-color : #F5F5BF; }
.namecat {
background-image: url("http://img801.imageshack.us/img801/9338/barrecouleur.png");
padding-bottom:0px;
padding-top:5px;
padding-bottom:5px;
letter-spacing: 2px;
border-left : 1px solid #4B1414;
border-right : 1px solid #4B1414;
border-bottom : 0px solid #4B1414;
font-family: Georgia;
margin-left:60px;
margin-right:200px;
margin-top:-10px;
color: #B39A88;
margin-bottom:-20px;
border-top: 1px solid #4B1414;
border-radius: 60px 60px 0px 0px;;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-topleft:60px;
-moz-border-radius-bottomright:0px;
-moz-border-radius-topright:60px;
}
.linf {
background-color:#913631;
display:block;
text-align:center;
margin-top:-13px;
border:2px solid #881F30;
border-top:0px solid #881F30;
margin-left:20px;
margin-right:100px;
font-family:georgia;
font-size:11px;
-moz-border-radius: 0px 0px 40px 40px;
border-radius: 0px 0px 40px 40px;
padding:5px;
}
.cata {
background-image: url("http://i52.tinypic.com/24me4v6.png");
border:1px solid #913631;
border-bottom:0px solid white;
margin-bottom:5px;
-moz-border-radius:20px 20px 3px 3px;
border-radius:20px 20px 3px 3px;
padding:3px;
width:160px;}
.catb {
background-image: url("http://i52.tinypic.com/24me4v6.png");
-moz-border-radius:3px 3px 20px 20px;
border-radius:3px 3px 20px 20px;
border:1px solid #913631;
border-top:0px solid white;
padding:3px;
width:160px;}
.categ {
background-color:#913631;
padding:10px;
-moz-border-radius:60px 0px 60px 0px;
border-radius:60px 0px 60px 0px;
margin:10px;
border:2px solid #881F30;}
.postbody {display: block; padding-left: 15px; padding-right: 15px; line-height:16px; text-align:justify; font-size:12px;}
tr.post span.gensmall {display : none;}
a.forumlink {
color:#A85F5C;
font-family:georgia;
font-size:18px;
font-weight: normal;
letter-spacing:-1px;
text-align:center;
font-family:18px;
display:block;
}
.forum-sousforum {
color: #A85F5C;
border: 3px solid #A85F5C;
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: #A85F5C;
width: 50%;
text-align: center;
height: 14px;
font-size: 11px;
}
/* QEEL */
.onglet { background-color:#913631 ;
padding-right:4px;
text-transform:lowercase;
background-color: #913631;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
font-family: georgia;
font-weight: bold; text-align: center;
color: #d49161;}
.message { background-color:#913631;
width: 450px !important;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
font-family: georgia;
text-align: center;
color: #913631;}
.message { background-color: #913631;
background-image : url('http://i51.tinypic.com/25ahifq.jpg') ;
background-repeat : repeat ;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
font-family: georgia;
text-align: center;
color: #913631;}
/* CSS INFOBULLE */
a.imginfo {
position: relative;
color: #B8A8A5;
text-decoration: none;
border-bottom: 1px #B8A8A5 solid; /* on souligne le texte */
}
a.imginfo span {
display: none; /* on masque l'infobulle */
}
a.imginfo:hover {
background: none; /* correction d'un bug IE */
z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
cursor: help; /* on change le curseur par défaut en curseur d'aide */
}
a.imginfo:hover span {
display: inline; /* on 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: -100px; /* on positionne notre infobulle */
left: 100px;
width:450px; /*largeur de l'infobulle*/
background: white;
color: #B8A8A5;
padding: 1px;
border: 0px solid grey;
border-left: 2px solid #CCBB9D;
border-right: 3px solid #FFFFFF;
border-top: 3px solid #FFFFFF;
border-bottom: 2px solid #CCBB9D;
}
/* FICHES */
.fiche2 { font-style:normal ;color:#bd163b;letter-spacing:1px; text-shadow: #000000 1px 1px 2px;font-family: georgia; font-size: 32px; } /* TITRE DES FICHES */
.imghab {
opacity : 0.5 }
.imghab:hover{
opacity : 1 }
.pres1 {border: solid #592E28 05px; -moz-border-radius-topleft:40px; -moz-border-radius-topright:40px;width :435px;height:50px ;} /* NOM ET PRENOM CONTOUR */
et mon index box :
- Code:
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
<tr>
<td class="gensmall" align="right" valign="bottom">
<!-- BEGIN switch_user_logged_in -->
<a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a>
<!-- END switch_user_logged_in -->
</td>
</tr>
</table>
<!-- BEGIN catrow --><!-- BEGIN cathead -->
<table width="100%">
<tr>
<th colspan="2" nowrap="nowrap" width="100%" class="secondarytitle">
<div class="namecat"><h{catrow.cathead.LEVEL} class="hierarchy">{catrow.cathead.CAT_TITLE}</h{catrow.cathead.LEVEL}></div>
</th>
</tr>
</table><!-- END cathead -->
<table class="forumline" width="100%" style="position: relative;" border="0" cellspacing="0" cellpadding="0">
<!-- BEGIN forumrow -->
<tr>
<!-- BEGIN inc -->
<td class="{catrow.forumrow.inc.INC_CLASS}" width="15"><img src="{SPACER}" height="0" width="15" 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="1" valign="top" width="100%" height="05"><div class="categ"><table width="100%"><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></tr></table><table><tr><td width="100%">
<span class="genmed"><div style="text-align:justify;">{catrow.forumrow.FORUM_DESC}</span>
<!-- BEGIN switch_moderators_links --><!-- END switch_moderators_links --></td>
<td><!-- BEGIN forum_link_no --><td align="center" valign="middle" height="05"><div class="cata"><span class="gensmall">{catrow.forumrow.TOPICS} sujets || {catrow.forumrow.POSTS} messages</span></div><div class="catb"><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div></td><!-- END forum_link_no -->
</tr></table></div><table width="100%"><tr><td><div class="linf">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
</div></td></tr></table></td></tr>
<!-- BEGIN forum_link -->
<!-- END forum_link --><!-- END forumrow -->
<!-- BEGIN catfoot -->
<tr>
<!-- BEGIN inc -->
<td class="{catrow.catfoot.inc.INC_CLASS}" width="15"><img src="{SPACER}" height="0" width="30" /></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 --></table>
<!-- BEGIN tablefoot -->
<img src="{SPACER}" alt="" height="3" width="1" /><!-- END tablefoot --><!-- END catrow -->
L'adresse de mon forum pour voir comment j'avais déjà touché au catégorie, mais j'aimerais pouvoir garder a l'intérieur des onglets les forums présentés tels quels
http://new-york-i-loveyou.forumactif.org/
Merci d'avance et si je ne suis pas claire je me ré expliquerais sans problèmes !
Dernière édition par Luna-C le Dim 28 Aoû 2011 - 16:29, édité 1 fois
Re: Catégories en onglets
Bonjour
aller dans PA > Affichage > Structure & Hiérarchie et mettez sur Moyen séparer les catégories de l'index.
Est-ce mieux ?
Cordialement.
aller dans PA > Affichage > Structure & Hiérarchie et mettez sur Moyen séparer les catégories de l'index.
Est-ce mieux ?
Cordialement.
SoraNoHime- Membre actif
-
Messages : 6218
Inscrit(e) le : 10/06/2010
Re: Catégories en onglets
Alors déjà il faut qu'une partie soit visible (mais pas forcément accessible ) aux invités dans chaque catégorie.
Ensuite vous pouvez personnaliser en adaptant dans la css le .actif pour l'onglet actif et le .onglet pour les autres à votre gout ^^
Ensuite vous pouvez personnaliser en adaptant dans la css le .actif pour l'onglet actif et le .onglet pour les autres à votre gout ^^
SoraNoHime- Membre actif
-
Messages : 6218
Inscrit(e) le : 10/06/2010
Re: Catégories en onglets
Alors j'ai modifié mon template :
Mais du coup je n'arrive pas a euh comment m'expliquer faire correspondre les catégories justement je pense que c'est peut être ce que vous voulez dire par " Alors déjà il faut qu'une partie soit visible (mais pas forcément accessible ) aux invités dans chaque catégorie. "
je suis déolé j'ai un peu de mal avec ce tuto/code
- Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<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>
<table id="conteneur_onglets">
<tr>
<td OnMouseOver="change_categorie(1)">nom onglet 1</td>
<td OnMouseOver="change_categorie(2)">nom onglet 2</td>
<td OnMouseOver="change_categorie(3)">nom onglet 3</td>
<td OnMouseOver="change_categorie(4)">nom onglet 4</td>
<td OnMouseOver="change_categorie(5)">nom onglet 5</td>
<!-- <td OnMouseOver="change_categorie(Y)">nom onglet Y</td> -->
</tr>
</table>
<script type="text/javascript">
function change_categorie(numero)
{
if($('.categorie:eq('+(numero-1)+')').size() != 0)
{
$('.categorie').css("display","none");
$('#conteneur_onglets .actif').removeClass("actif");
$('#conteneur_onglets td:eq('+(numero-1)+')').addClass("actif");
$('.categorie:eq('+(numero-1)+')').fadeIn();
}
else
{
alert("Vous n'avez pas accès à cette catégorie")
}
}
$("document").ready(function()
{
if($(".categorie").size() > 1)
{
if($("#conteneur_onglets").is("table"))
{
$("#conteneur_onglets").css("display","table");
}
else
{
$("#conteneur_onglets").css("display","block");
}
}
change_categorie(1);
})
</script>
</div><!-- BEGIN catrow --><!-- BEGIN tablehead --><div class="categorie">
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
<th nowrap="nowrap" width="50">{L_TOPICS}</th>
<th nowrap="nowrap" width="50">{L_POSTS}</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">
<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}>
<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>
<td class="row3" align="center" valign="middle" height="50">
<span class="gensmall">{catrow.forumrow.TOPICS}</span>
</td>
<td class="row2" align="center" valign="middle" height="50">
<span class="gensmall">{catrow.forumrow.POSTS}</span>
</td>
<td class="row3 over" align="center" valign="middle" height="50">
<span class="gensmall">{catrow.forumrow.LAST_POST}</span>
</td>
</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 -->
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->
Mais du coup je n'arrive pas a euh comment m'expliquer faire correspondre les catégories justement je pense que c'est peut être ce que vous voulez dire par " Alors déjà il faut qu'une partie soit visible (mais pas forcément accessible ) aux invités dans chaque catégorie. "
je suis déolé j'ai un peu de mal avec ce tuto/code
Re: Catégories en onglets
Et en remplaçant le code de votre template :
- Code:
<table id="conteneur_onglets">
<tr>
<td OnMouseOver="change_categorie(1)">nom onglet 1</td>
<td OnMouseOver="change_categorie(2)">nom onglet 2</td>
<td OnMouseOver="change_categorie(3)">nom onglet 3</td>
<td OnMouseOver="change_categorie(4)">nom onglet 4</td>
<td OnMouseOver="change_categorie(5)">nom onglet 5</td>
<!-- <td OnMouseOver="change_categorie(Y)">nom onglet Y</td> -->
</tr>
</table>
<script type="text/javascript">
function change_categorie(numero)
{
if($('.categorie:eq('+(numero-1)+')').size() != 0)
{
$('.categorie').css("display","none");
$('#conteneur_onglets .actif').removeClass("actif");
$('#conteneur_onglets td:eq('+(numero-1)+')').addClass("actif");
$('.categorie:eq('+(numero-1)+')').fadeIn();
}
else
{
alert("Vous n'avez pas accès à cette catégorie")
}
}
$("document").ready(function()
{
if($(".categorie").size() > 1)
{
if($("#conteneur_onglets").is("table"))
{
$("#conteneur_onglets").css("display","table");
}
else
{
$("#conteneur_onglets").css("display","block");
}
}
change_categorie(1);
})
</script>
- Code:
<!-- DEBUT MODIF ONGLETS -->
<script type="text/javascript">
<!--
document.write('<div align="center" style="display:none;" id="conteneur_barre_onglet">
<ul class="conteneur_onglets">
<li onMouseOver="change_cat(1)" class="onglet actif" id="onglet_1">onglet 1</li>
<li onMouseOver="change_cat(2)" class="onglet " id="onglet_2">onglet 2</li>
<li onMouseOver="change_cat(3)" class="onglet " id="onglet_3">onglet 3</li>
<li onMouseOver="change_cat(4)" class="onglet " id="onglet_4">onglet 4</li>
<li onMouseOver="change_cat(5)" class="onglet " id="onglet_5">onglet 5</li>
<li onMouseOver="change_cat(6)" class="onglet " id="onglet_6">onglet 6</li>
</ul></div>');
var compteur_cat = 1;
function change_cat(numero)
{
if(document.getElementById('categorie_'+numero))
{
/* affichage de la bonne categorie */
$('table[id^=categorie_]').css('display','none');
$('table[id=categorie_'+numero+']').fadeIn();
/* affichage du bon onglet */
$('.actif').removeClass("actif");
$('.onglet[id=onglet_'+numero+']').addClass("actif");
}
}
function capture_cat()
{
if(compteur_cat == 1)
{
document.write('<table class="forumline" id="categorie_' + compteur_cat + '" >');
}
else
{
$('#conteneur_barre_onglet').css("display","block");
document.write('<table class="forumline" id="categorie_' + compteur_cat + '" style="display:none;">');
}
compteur_cat++;
}
//-->
</script>
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
<script type="text/javascript">
<!--
capture_cat();
//-->
</script>
<!-- FIN MODIF ONGLETS -->
SoraNoHime- Membre actif
-
Messages : 6218
Inscrit(e) le : 10/06/2010
Re: Catégories en onglets
cela m'indique " La balise a été fermée avant d'avoir été ouverte ou la balise n'a pas été ouverte. "
Re: Catégories en onglets
Vous avez du faire une erreur en copiant collant. Rendez-moi votre template que je vérifie ^^
SoraNoHime- Membre actif
-
Messages : 6218
Inscrit(e) le : 10/06/2010
Re: Catégories en onglets
- Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<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">
<!--
document.write('<div align="center" style="display:none;" id="conteneur_barre_onglet">
<ul class="conteneur_onglets">
<li onMouseOver="change_cat(1)" class="onglet actif" id="onglet_1">onglet 1</li>
<li onMouseOver="change_cat(2)" class="onglet " id="onglet_2">onglet 2</li>
<li onMouseOver="change_cat(3)" class="onglet " id="onglet_3">onglet 3</li>
<li onMouseOver="change_cat(4)" class="onglet " id="onglet_4">onglet 4</li>
<li onMouseOver="change_cat(5)" class="onglet " id="onglet_5">onglet 5</li>
<li onMouseOver="change_cat(6)" class="onglet " id="onglet_6">onglet 6</li>
</ul></div>');
var compteur_cat = 1;
function change_cat(numero)
{
if(document.getElementById('categorie_'+numero))
{
/* affichage de la bonne categorie */
$('table[id^=categorie_]').css('display','none');
$('table[id=categorie_'+numero+']').fadeIn();
/* affichage du bon onglet */
$('.actif').removeClass("actif");
$('.onglet[id=onglet_'+numero+']').addClass("actif");
}
}
function capture_cat()
{
if(compteur_cat == 1)
{
document.write('<table class="forumline" id="categorie_' + compteur_cat + '" >');
}
else
{
$('#conteneur_barre_onglet').css("display","block");
document.write('<table class="forumline" id="categorie_' + compteur_cat + '" style="display:none;">');
}
compteur_cat++;
}
//-->
</script>
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
<script type="text/javascript">
<!--
capture_cat();
//-->
</script>
<!-- FIN MODIF ONGLETS -->
</div><!-- BEGIN catrow --><!-- BEGIN tablehead --><div class="categorie">
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
<th nowrap="nowrap" width="50">{L_TOPICS}</th>
<th nowrap="nowrap" width="50">{L_POSTS}</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">
<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}>
<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>
<td class="row3" align="center" valign="middle" height="50">
<span class="gensmall">{catrow.forumrow.TOPICS}</span>
</td>
<td class="row2" align="center" valign="middle" height="50">
<span class="gensmall">{catrow.forumrow.POSTS}</span>
</td>
<td class="row3 over" align="center" valign="middle" height="50">
<span class="gensmall">{catrow.forumrow.LAST_POST}</span>
</td>
</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 -->
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->
voila merci de votre patience
Re: Catégories en onglets
- Code:
</div><!-- BEGIN catrow --><!-- BEGIN tablehead --><div class="categorie">
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
supprimez cette partie de votre template ^^
SoraNoHime- Membre actif
-
Messages : 6218
Inscrit(e) le : 10/06/2010
Re: Catégories en onglets
C'est mieux merci
Mais avec ce code je n'arrive pas a présenter mes onglets les uns a coté des autres comme dans le modéle forum berkley
Mais avec ce code je n'arrive pas a présenter mes onglets les uns a coté des autres comme dans le modéle forum berkley
Re: Catégories en onglets
Il vous suffit de personnaliser la css : dans
ajoutez: display:inline-block; avant }
et personnaliser l'onglet actif avec
- Code:
.onglet { background-color:#913631 ;
padding-right:4px;
text-transform:lowercase;
background-color: #913631;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
font-family: georgia;
font-weight: bold; text-align: center;
color: #d49161;}
ajoutez: display:inline-block; avant }
et personnaliser l'onglet actif avec
.actif {
vos propriétés
}
SoraNoHime- Membre actif
-
Messages : 6218
Inscrit(e) le : 10/06/2010
Re: Catégories en onglets
je suis vraiment nulle mais je ne sais pas du tout personnaliser
Re: Catégories en onglets
Je vous invite à parcourir ceci : CSS et propriétés
vous y trouverez comment faire vos personnalisation à l'intérieur des codes que je vous ai donné.
Cordialement.
vous y trouverez comment faire vos personnalisation à l'intérieur des codes que je vous ai donné.
Cordialement.
SoraNoHime- Membre actif
-
Messages : 6218
Inscrit(e) le : 10/06/2010
Re: Catégories en onglets
Merci beaucoup pour votre aide =D
Re: Catégories en onglets
Bonjour, Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à :
Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton A bientôt sur ForumActif |
SoraNoHime- Membre actif
-
Messages : 6218
Inscrit(e) le : 10/06/2010
Sujets similaires
» catégories en onglets + onglets sur la droite
» (Catégories par onglets) Titres de catégories en image.
» (Categories par onglet) .. Placement des onglets de catégories.
» Catégories par onglets et catégories comprimées
» onglets des catégories.
» (Catégories par onglets) Titres de catégories en image.
» (Categories par onglet) .. Placement des onglets de catégories.
» Catégories par onglets et catégories comprimées
» onglets des catégories.
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum