Sujets similaires

Bonjour !

J'ai un petit problème pour les onglets des catégories de mon forum. En effet j'ai réussi à les installer mais je n'arrive pas à modifier leur apparence ! Je me débrouille à peu près en codage (si si ..) mais là j'avoue que je sèche ..
Voici mon template index_box:

Code:: <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
<tr>
<td valign="bottom">

<span class="gensmall">{LAST_VISIT_DATE}<br />
{CURRENT_TIME}<br />
</span>

<div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
</td>
<td class="gensmall" align="right" valign="bottom">

<a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a>
<a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>

<a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
</td>
</tr>
</table>
<div class="my_cat"> <ul></ul> </div>

<div class="my_cat_body">

<table class="my_modified_table" width="100%" border="0" cellspacing="1" cellpadding="0">
<div class="my_forum_name">{catrow.tablehead.L_FORUM}</div>



<tr>
<td colspan="3" class="my_title" align="center"><div class="myfoo_title"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div><img src="{SPACER}" alt="" height="5" width="1" /></td>
</tr><br />
<tr>
<td class="my_img" valign="top"><img src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="" /></td>
<td class="my_disc" width="300" valign="top" >{catrow.forumrow.FORUM_DESC}</td>
<td class="my_stats" width="200" valign="top">
<div class="Topic_et_posts">Topics: {catrow.forumrow.TOPICS} | Posts: {catrow.forumrow.POSTS}<br /></div>
<div class="dernier_post">{catrow.forumrow.LAST_POST}<br /></div>

</td>
</tr>


</table><img src="{SPACER}" alt="" height="5" width="1" />
</div>

J'ai rajouté des propriétés pour pouvoir les modifier via le CSS que voici :

Code:: /*PA*/

body {
background-color: #161a1b;
background-image: url("http://xn--80aqafcrtq.cc/img/2/1/0/210563.jpg");
background-attachment: scroll;
scrollbar-face-color: #000000;
scrollbar-highlight-color: #444444;
scrollbar-shadow-color: #000000;
scrollbar-3dlight-color: #333333;
scrollbar-arrow-color: #444444;
scrollbar-track-color: #000000;
scrollbar-darkshadow-color: #222222;
}
font,th,td,p {
font-family: Verdana,Arial,Helvetica,sans-serif }
a img {
border: none;
}
a:link,a:active,a:visited {
color : #344342;
}
a:hover{
text-decoration: underline;
color : #0C0D14;
}
hr{
height: 0px;
border: solid #020504 0px;
border-top-width: 1px;
}
.bodyline{
background-color: #;
border: 1px # solid;
}
.bodylinewidth {
width:55%}
.forumline{
background-color: #2e3239;
border: 2px # solid;
}
td.row1{
background-color: #0E1211;
}
td.row2{
background-color: #0E1211;
}
td.row3{
background-color: #020504;
}
td.rowpic {
background-color: #000000;
background-image: url(".");
}
th {
color: #C6C09D;
font-size: 11px;
font-weight : bold;
background-color: #;
height: 25px;
background-image: url("http://xn--80aqafcrtq.cc/img/2/1/0/210563.jpg");
}
td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom {
background-image: url(".");
background-color:#000000;
border: #000000;
border-style: solid;
height: 48px;
}
td.cat,td.catHead,td.catBottom {
height: 29px;
border-width: 0px 0px 0px 0px;
}
th.thHead,th.thSides,th.thTop,th.thLeft,th.thRight,th.thBottom,th.thCornerL,th.thCornerR {
font-weight: bold;
border: #020504;
border-style: solid;
height: 28px;
}
td.row3Right,td.spaceRow {
background-color: #020504;
border: #000000;
border-style: solid;
}
td.pourcentback {
background-color : #161a1b;
}
th.thHead,td.catHead {
font-size: 12px;
border-width: 1px 1px 0px 1px;
}
th.thSides,td.catSides,td.spaceRow {
border-width: 0px 1px 0px 1px;
}
th.thRight,td.catRight,td.row3Right {
border-width: 0px 1px 0px 0px;
}
th.thLeft,td.catLeft {
border-width: 0px 0px 0px 1px;
}
th.thBottom,td.catBottom {
border-width: 0px 1px 1px 1px;
}
th.thTop {
border-width: 1px 0px 0px 0px;
}
th.thCornerL {
border-width: 1px 0px 0px 1px;
}
th.thCornerR {
border-width: 1px 1px 0px 0px;
}
.maintitle{
font-weight: bold;
font-size: 22px;
font-family: Arial,Verdana,Arial,Helvetica,sans-serif;
text-decoration: none;
line-height : 120%;
color : #97aae6;
}
.gen {
font-size : 12px;
}
.genmed {
font-size : 11px;
}
.gensmall {
font-size : 10px;
}
.gen,.genmed,.gensmall {
color : #97aae6;
}
a.gen,a.genmed,a.gensmall {
color: #A6A483;
text-decoration: none;
}
a.gen:hover,a.genmed:hover,a.gensmall:hover{
color: #0C0D14;
text-decoration: underline;
}
.mainmenu{
font-size : 11px;
color : #97aae6 }
a.mainmenu{
text-decoration: none;
color : #A6A483;
}
a.mainmenu:hover{
text-decoration: underline;
color : #0C0D14;
}
.cattitle{
font-weight: bold;
font-size: 12px ;
letter-spacing: 1px;
color : #A6A483}
a.cattitle{
text-decoration: none;
color : #A6A483;
}
a.cattitle:hover{
text-decoration: underline;
}
.forumlink{
font-weight: bold;
font-size: 12px;
color : #A6A483;
}
a.forumlink {
text-decoration: none;
color : #A6A483;
}
a.forumlink:hover{
text-decoration: underline;
color : #0C0D14;
}
.nav{
font-weight: bold;
font-size: 11px;
color : #97aae6;
}
a.nav{
text-decoration: none;
color : #A6A483;
}
a.nav:hover{
text-decoration: underline;
}
.topictitle,h1,h2{
font-weight: bold;
font-size: 11px;
color : #97aae6;
}
a.topictitle:link{
text-decoration: none;
color : #A6A483;
}
a.topictitle:visited{
text-decoration: none;
color : #5a86ce;
}
a.topictitle:hover{
text-decoration: underline;
color : #0C0D14;
}
.name{
font-size : 11px;
color : #97aae6;
}
.postdetails{
font-size : 10px;
color : #97aae6;
}
.postbody{
font-size : 12px;
line-height: 18px}
a.postlink:link{
text-decoration: none;
color : #A6A483 }
a.postlink:visited{
text-decoration: none;
color : #5a86ce;
}
a.postlink:hover{
text-decoration: underline;
color : #0C0D14}
.code{
font-family: Courier,CourierNew,sans-serif;
font-size: 11px;
color: #4174c7;
background-color: #1f2427;
border: #111111;
border-style: solid;
border-left-width: 1px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px}
.quote{
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 11px;
color: #586166;
line-height: 125%;
background-color: #1f2427;
border: #111111;
border-style: solid;
border-left-width: 1px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px}
.copyright{
font-size: 10px;
font-family: Verdana,Arial,Helvetica,sans-serif;
color: #586166;
letter-spacing: -1px;
}
a.copyright{
color: #586166;
text-decoration: none;
}
a.copyright:hover {
color: #97aae6;
text-decoration: underline;
}
.coloradmin {
color: #618ee9}
.colormod {
color: #C6C09D}
img{
border:0}
input,textarea, select {
color : #97aae6;
font: normal 11px Verdana,Arial,Helvetica,sans-serif;
border-color : #97aae6;
}
input.post, textarea.post, select {
background-color : #111111;
}
input {
text-indent : 2px;
}
input.button {
background-color : #000000;
color : #97aae6;
font-size: 11px;
font-family: Verdana,Arial,Helvetica,sans-serif;
}
input.mainoption {
background-color : #1f2427;
font-weight : bold;
}
input.liteoption {
background-color : #1f2427;
font-weight : normal;
}
.helpline {
background-color: #000000;
border-style: none;
}
input {
background-color: #000000;
}
.statistiques{
border:0px;
background-image: url("LIEN IMAGE DU HAUT");
background-repeat: no-repeat;
background-position: center;
height:270px;}

.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;}
@import url("form_ie.css");
/*MESSAGE SUJET*/
.postbody { text-align:justify; padding: 20px; display:block;}

.statistiques{
text-shadow:1px 1px 0 #aaa
font-family: Enchanted Prairie Dog
font-style:italic
display:block;
background-color: #171C1B;
margin:5px;
padding:5px;
color: #000000 !important;
text-align: center;
text-transform: uppercase;
text-decoration: none;
border: 2px solid #FFB6C1;
-moz-border-radius:10px;
-webkit-border-radius:10px;border:0px;
background-image: url("Ihttp://img15.hostingpics.net/pics/153011qeel1.png");
background-repeat: no-repeat;
background-position: left;
height:270px;}

.groupes{
text-shadow:1px 1px 0 #aaa
font-family: Enchanted Prairie Dog
font-style:italic
display:block;
background-color: #171C1B;
margin:5px;
padding:5px;
color: #171C1B !important;
text-align: center;
text-transform: uppercase;
text-decoration: none;
border: 2px solid #FFB6C1;
-moz-border-radius:10px;
-webkit-border-radius:10px;
background-color:#030806;border: 1px #67586e 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;}
/* TITRE CATEGORIE */
a {
text-decoration:none;
}
a:link {text-decoration: none;}
a:hover{text-decoration: none !important;}
a:active
{
text-decoration: none;
}

.hauteur {
height: 180px;
overflow: auto;
}

div.infobulle {
position: relative;
cursor:pointer; /*donne au curseur la forme de petite main, comme sur un lien*/
}

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

}
div.infobulle:hover div{
display: block; /* ceci affiche l'infobulle */
position: absolute;}

.postbody {
display: block;
text-align:justify;
} /*--- Cette partie correspond à la justification automatique des messages*/

/*--- Cette partie sert à modifier l'espace entre l'image de catégorie et les catégories*/

th.secondarytitle h2 img { display: inline!important;
margin-top: 0px;
margin-bottom: 0px;
margin-left: -10px;
margin-right: -10px;
width: 752px}
th.secondarytitle h2 .txt-title { display: none; }

.messages_sujets_derniers_sujets {
margin-left: 5px; /*espace entre le bord gauche et la bordure*/
padding-top: 5px; /*espace entre le texte et la bordure du haut*/
padding-left: 5px; /*espace entre le texte et la bordure gauche*/
padding-bottom: 5px; /*espace entre le texte et la bordure du bas*/
padding-right:5px; /*espace entre le texte et la bordure droite*/
border-top: VALEURpx solid #FFFFFF;
border-left: VALEURpx solid #FFFFFF;
border-bottom: VALEURpx solid #FFFFFF;
-moz-border-radius-topleft: 10px; /*arrondir l'angle gauche du haut*/
-moz-border-radius-bottomleft: 10px;/*arrondir l'angle gauche du bas*/
}

/*affichage derniers messages*/
.derniers_sujets {
padding: 5px; /*espace entre le texte et la bordure*/
margin: 5px; /*espace entre le bord et la bordure*/
border: 2px dashed #000000;
-moz-border-radius-topleft: 10px; /*arrondir l'angle gauche du haut*/
-moz-border-radius-bottomright: 10px; /*arrondir l'angle droit du bas*/
text-align: center;
}

/*CATEGORIES EN ONGLET*/

.my_modified_table{
width: 80%;
margin-left: 10%;
margin-right: 10%;
margin-top: 5px !important;

font-family: Verdana;
}

.my_forum_name{
display:none;
}

.Topic_et_posts{
font-size: 13px;
border-bottom:1px dotted goldenrod; /*couleur bordure gauche*/
}

.dernier_post{
font-size: 15px;
}

.my_img{
width: 10%;
margin-left: 50px;
}
.my_disc{
width: 50%;
text-align:center;
}
.my_stats{

width: 20%;
text-align:center;
}

.myfoo_title{
text-align:center;
width: 35%;
padding-top: 5px;
padding-left: 3px;
padding-bottom: 5px;
padding-right: 3px;
-moz-border-radius: 6px;
border: 1px solid darkslategray;
}
.my_title{
text-align:center;
font-size: 14px;
font-family: Arial;
}

.my_cat_body{
border: 1px solid #EEE;
-moz-border-radius: 3px;

}

.my_cat ul{
margin:0;
padding: 0;
width: 800px !important;
}
.my_cat li{
margin-left: 2px;
}
.my_cat_style{
border-top: 1px #666 solid;
border-left: 1px #666 solid;
border-right: 1px #666 solid;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
text-align:center;
font-size: 11px;
padding-left:10px;
padding-right:10px;
display:inline;
background-color: chocolate;
width: 200px;
font-family: Arial;
font-weight: bold;

}
.my_cat a{
text-decoration: none !important;
color: #000;
}

Mais là encore je n'obtient pas le résultat escompté ..

J'ai fais un schéma pour vous montrer ce que je cherche, si ce n'est pas assez explicite j'ai un exemple direct sur un forum Smile

Spoiler:

(les couleurs sont les premières qui me sont passées sous la main Laughing

)

voici l'adresse de mon forum test pour que vous voyez où j'en suis : http://forumtestqb-2.activebb.net/

Merci d'avance et désolée pour le temps que cela risque de vous prendre x)

bonne soirée !

Bonjour !

Pour qu'on puisse t'aider, il vaudrait mieux que tu nous montres ce que tu as tenté (plutôt que de nous donner l'intégralité de ton CSS) et qu'est ce qui, exactement, ne marche pas. Si tu as utilisé un tuto, donnes nous le lien '_'

Actuellement, je ne vois aucun rapport entre ton illustration et le résultat, du coup difficile de savoir ce qu'il y a à corriger.

Bonjour !

Tout d'abord merci pour la réponse !
Ensuite, ce que j'ai tenté est sur le forum test, il n'y a pas plus x) Je n'ai pas utilisé de tuto cependant x)

Ce que je cherche surtout à faire c'est les onglets disposés comme sur le schéma, ainsi que le graph du haut de la catégorie, que je ne vois pas comment on peut installer en ayant des onglets :m
Ensuite pour les catégories j'ai déjà travaillé sur cette disposition donc ce n'est que secondaire Smile

Merci encore !

Bonjour,

Je ne saisis toujours pas le problème, a fortiori si tu n'utilises aucun tutoriel, tu dois être capable de te débrouiller seul si tu n'as pas besoin d'aide, non ? A quoi servent ces onglets ? Si tu cherches à utiliser le système de catégories en onglets (ie un clic sur un onglet permet de changer de catégorie), il te faudra utiliser le tutoriel de Vic_Le_Faucheur sur Never Utopia, vu qu'il en est l'auteur et que le script est un peu trop complexe pour être reproduit seul à partir de zéro.

Si ce n'est qu'une question d'aspect visuel en plaçant des liens sous formes d'onglets, un bête tableau te suffira O.o

Enfin, pour les images en haut de catégorie, il doit bien y avoir un tuto sur CSSActif qui pourra répondre à ta question, genre celui-ci ou bien celui-ci.

Bonjour !

Je suis désolée, mais c'est bon l'idée est tombée à l'eau, pardon de t'avoir pris du temps pour rien et encore merci d'avoir essayé !

Bonne journée !

Hello (:
Doit-on comprendre que ce sujet peut être archivé ?
Merci d'avance de ta réponse Apparence onglets et catégories 926145

Bonjour :

Effectivement, le sujet peut être archivé !

Merci encore ! Apparence onglets et catégories 926145

OK, je classe. Very Happy

Apparence onglets et catégories

Apparence onglets et catégories

Sujets similaires

Sujets similaires

Partenaires Or