Code pour catégories
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
Code pour catégories
Tout d'abord bonjour (ou plutôt bonsoir)
Alors voila, je ne trouve pas très jolie mes catégories (trop petite, illisible...):
Et j'aimerai plutot un truc de ce style (gros, belle écriture, une grande ligne de séparation entre le titre et la description, le nombre de messages et de sujets bien placé...) :
[image provenant du forum Kuroshitsuji RPG - V2]
Alors, maintenant, j'explique mon problème : j'ai essayé plein de codes (sur mon forum test) mais le résultat et disons... assez étrange =/ alors si vous pouviez m'aider ça serait trop trop trop trop trop trop trop trop trop trop trop trop trop trop trop trop trop trop trop trop.... gentil =3
Voila ma feuille CSS :
PS : j'aimerai aussi savoir comment il a fait pour avoir la description "à droite" et les liens "à gauche" :
et comment il a fait pour la description soit sur une pattern.
PS2 : le lien de mon fofo : http://graphxmania.forumgratuit.org/forum
le lien de Kuroshitsuji RPG - V2 : http://kuroshitsuji.forum-actif.info/
Merci d'avance ^^
Alors voila, je ne trouve pas très jolie mes catégories (trop petite, illisible...):
Et j'aimerai plutot un truc de ce style (gros, belle écriture, une grande ligne de séparation entre le titre et la description, le nombre de messages et de sujets bien placé...) :
[image provenant du forum Kuroshitsuji RPG - V2]
Alors, maintenant, j'explique mon problème : j'ai essayé plein de codes (sur mon forum test) mais le résultat et disons... assez étrange =/ alors si vous pouviez m'aider ça serait trop trop trop trop trop trop trop trop trop trop trop trop trop trop trop trop trop trop trop trop.... gentil =3
Voila ma feuille CSS :
- Spoiler:
- body
{background-position: top center;
}
/* CSS pour staff */
.tstaff{
font-size:1em;
}
.staff{
position: relative;
z-index: 0;
}
.staff:hover{
background-color: ##FEFEFE;
z-index: 999;
}
.staff span{
position: absolute;
background-color: #D8C5DB;
padding: 5px;
border: 2px solid #FFFFFF;
visibility: hidden;
text-transform: lowercase;
}
.staff span img{
border: 1px solid #D8C5DB;
padding: 2px;
}
.staff:hover span{
visibility: visible;
top: 100%;
left: 0px;
width: 100%px
}
/* Fin css pour staff */
a {
font-variant: small-caps;
}
th {
font-family:monospace; (police)
text-align: center; (pour aligner le texte)
}
a.forumlink {
font-family: monospace;
background-color: ; (couleur du fond)
display: block; (affiche sous forme de "bloc" si tu spécifies pas la largeur, il prendra toute la largeur)
font-weight: bold; (met la police en gras)
text-align: center;
border-bottom: 1px dashed #59465C; (ajoute une bordure en dessous)
color : #B56B4F; (couleur du titre du forum)
}
.spoiler_content { display: block; }
.hidden .spoiler_content { display: none; }
body
{
cursor: url("http://bannerqueens.com/cursor1.ani");
}
style
ul, li{
list-style: none;
}
.mon_onglet{
float: left;
padding: 2px 10px;
margin-right: 5px;
color: #333;
cursor: pointer;
margin: 1px;}
.mon_onglet:hover{
background: #transparent;}
.mon_onglet_selected{
float: left;
padding: 2px 10px;
margin-right: 5px;
color: #333;
margin: 2px;}
.clear{
clear: both;}
.mon_contenu{
color: #666;
background: url('adresse de l'image de fond');
border: 1px solid #F0B400;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
padding: 10px;}
#mes_contenus, #mes_onglets{
width: 100%;
}
.tablo {text-align:center;}
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: 5px; /* on positionne notre infobulle */
left: 15px;
background: #FFE494; /* arrière-plan de l'infobulle */
color: grey; /* texte dans l'infobulle */
padding: 3px;
/* bordures de votre infobulle*/
border: 2px solid #FFFFFF;
border-left: 2px solid #FFFFFF;
}
PS : j'aimerai aussi savoir comment il a fait pour avoir la description "à droite" et les liens "à gauche" :
et comment il a fait pour la description soit sur une pattern.
PS2 : le lien de mon fofo : http://graphxmania.forumgratuit.org/forum
le lien de Kuroshitsuji RPG - V2 : http://kuroshitsuji.forum-actif.info/
Merci d'avance ^^
Dernière édition par Shiooooo le Mer 19 Jan - 15:29, édité 1 fois
Re: Code pour catégories
Bonjour,
Je ne suis pas sûre de savoir tout faire dans cette présentation, mais déjà 2 points de départ:
> Pour placer "sujets et messages" consultez ce tutoriel : https://forum.forumactif.com/t261562-suppression-des-colonnes-sujets-et-messages
>Pour la taille de vos titres vous avez déjà:
En ce qui concerne les descriptions, je pense qu'il s'agit d'un tableau:
Le reste nécessite des modifications de templates pour déplacer les liens vers les niveaux inférieurs et ajouter un fond dans les derniers sujets. Je veux vérifier avant de vous dire des bêtises.
Cordialement.
Je ne suis pas sûre de savoir tout faire dans cette présentation, mais déjà 2 points de départ:
> Pour placer "sujets et messages" consultez ce tutoriel : https://forum.forumactif.com/t261562-suppression-des-colonnes-sujets-et-messages
>Pour la taille de vos titres vous avez déjà:
- Code:
a.forumlink {
font-family: monospace;
background-color: ; (couleur du fond)
display: block; (affiche sous forme de "bloc" si tu spécifies pas la largeur, il prendra toute la largeur)
font-weight: bold; (met la police en gras)
text-align: center;
border-bottom: 1px dashed #59465C; (ajoute une bordure en dessous)
color : #B56B4F; (couleur du titre du forum)
}
En ce qui concerne les descriptions, je pense qu'il s'agit d'un tableau:
- Code:
<table><tr><td style="background-image:"url de la pattern;">Description</td><td>liens des sujets</td></tr></table>
Le reste nécessite des modifications de templates pour déplacer les liens vers les niveaux inférieurs et ajouter un fond dans les derniers sujets. Je veux vérifier avant de vous dire des bêtises.
Cordialement.
Invité- Invité
Re: Code pour catégories
Alors d'abord, je te remercie de m'aider et même si tu ne sais pas tout faire, cela m'aide BEAUCOUUUUUPPPP =3
Secondo, j'ai juste quatre petits problèmes...
1. j'aimerai mettre les titres en italique
2. je n'arrive pas à faire que la bordure (ligne de séparation) entre le titre et la description fasse toute la catégorie, elle est seulement présente sous le nom de la catégorie
Ce que je souhaite :
Ce que j'ai réussi à faire (grâce à vous) ^^ :
3. le "sujet et message" et au même niveau que le titre alors que je souhaiterai qu'il soit en dessous de la ligne de séparation
J'aimerai que se soit comme ça :
Et voila ce que j'ai obtenue grâce au tuto :
4. je ne sais pas pourquoi mais quand j'entre votre code dans la descrition (le code pour la pattern), ça ne marche pas =/
Si je vous en demande trop, dites le moi ;3
Secondo, j'ai juste quatre petits problèmes...
1. j'aimerai mettre les titres en italique
2. je n'arrive pas à faire que la bordure (ligne de séparation) entre le titre et la description fasse toute la catégorie, elle est seulement présente sous le nom de la catégorie
Ce que je souhaite :
Ce que j'ai réussi à faire (grâce à vous) ^^ :
3. le "sujet et message" et au même niveau que le titre alors que je souhaiterai qu'il soit en dessous de la ligne de séparation
J'aimerai que se soit comme ça :
Et voila ce que j'ai obtenue grâce au tuto :
4. je ne sais pas pourquoi mais quand j'entre votre code dans la descrition (le code pour la pattern), ça ne marche pas =/
- Code:
a.forumlink {
font-family: georgia;
font-size: 20px;
background-color: ; (couleur du fond)
display: block; (affiche sous forme de "bloc" si tu spécifies pas la largeur, il prendra toute la largeur)
font-weight: bold; (met la police en gras)
text-align: center;
border-bottom: 5px solid #FFFFFF; (ajoute une bordure en dessous)
color : #B56B4F; (couleur du titre du forum)
}
Si je vous en demande trop, dites le moi ;3
Re: Code pour catégories
Bonjour
Pour l'italique il suffit de rajouter
Pour le reste je ne sais pas
edit
en fait pour la bordure il faut mettre
Pour l'italique il suffit de rajouter
- Code:
font-style: italic;
Pour le reste je ne sais pas
edit
en fait pour la bordure il faut mettre
- Code:
border-bottom: 1px dotted #000000; (ou la couleur de votre choix)
Re: Code pour catégories
Re,
J'ai modifié un peu le template, voici la nouvelle version du template Index_box :
Ensuite j'ai retouché votre CSS ... je crois que les messages entre parenthèses créaient des conflits.
Pour les descriptions, réessayez de placer ceci dans la description des forums :
J'espère qu'on s'approche du résultat avec tout ça .
J'ai modifié un peu le template, voici la nouvelle version du template Index_box :
- 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}<br />
{CURRENT_TIME}<br />
</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><br />
<a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
<!-- END switch_user_logged_in -->
<a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
</td>
</tr>
</table>
<!-- BEGIN catrow --><!-- BEGIN tablehead --><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="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}><table width="100%"><tbody><tr><td style="padding-left: 40px; text-align: right;" class="gensmall">Messages:{catrow.forumrow.POSTS} | | Sujets:{catrow.forumrow.TOPICS} </td></tr></tbody></table><center><span class="gensmall">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span></center><br />
<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 -->
</span>
</td>
<td class="row3 over" align="center" valign="middle" height="50">
<span class="gensmall"><div class="lastm">{catrow.forumrow.LAST_POST}</div></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 -->
Ensuite j'ai retouché votre CSS ... je crois que les messages entre parenthèses créaient des conflits.
- Code:
a.forumlink {
text-decoration: none;
font-family: georgia;
font-size: 20px;
font-weight: bold;
text-align: center;
border-bottom: 5px solid #FFFFFF;
color : #B56B4F;
display: block; }
.descrip {background-image: url("adresse de l'image");
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
margin-right: 4px;
display: block;
width: 500px;
height:75px;
padding:4px;}
.lastm { background-image: url("adresse de l'image");
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
margin-right: 4px;
display: block;
padding:4px;}
body
{background-position: top center;
}
.tstaff{
font-size:1em;
}
.staff{
position: relative;
z-index: 0;
}
.staff:hover{
background-color: ##FEFEFE;
z-index: 999;
}
.staff span{
position: absolute;
background-color: #D8C5DB;
padding: 5px;
border: 2px solid #FFFFFF;
visibility: hidden;
text-transform: lowercase;
}
.staff span img{
border: 1px solid #D8C5DB;
padding: 2px;
}
.staff:hover span{
visibility: visible;
top: 100%;
left: 0px;
width: 100%px
}
a {
font-variant: small-caps;
}
.spoiler_content { display: block; }
.hidden .spoiler_content { display: none; }
body
{
cursor: url("http://bannerqueens.com/cursor1.ani");
}
ul, li{
list-style: none;
}
.mon_onglet{
float: left;
padding: 2px 10px;
margin-right: 5px;
color: #333;
cursor: pointer;
margin: 1px;}
.mon_onglet:hover{
background: #transparent;}
.mon_onglet_selected{
float: left;
padding: 2px 10px;
margin-right: 5px;
color: #333;
margin: 2px;}
.clear{
clear: both;}
.mon_contenu{
color: #666;
background: url('adresse de l'image de fond');
border: 1px solid #F0B400;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
padding: 10px;}
#mes_contenus, #mes_onglets{
width: 100%;
}
a.infobulle {
position: relative;
}
a.infobulle span {
display: none;
}
a.infobulle:hover {
background: none;
z-index: 999;
}
a.infobulle:hover span {
display: inline;
position: absolute;
white-space: nowrap;
top: 5px;
left: 15px;
background: #FFE494;
color: grey;
border: 2px solid #FFFFFF;
border-left: 2px solid #FFFFFF;
}
body
{background-position: top center;
}
th {
font-family:monospace;
text-align: center;
}
.tablo {text-align:center;}
Pour les descriptions, réessayez de placer ceci dans la description des forums :
- Code:
<table cellSpacing="4"><tr><td class="descrip">description</td><td>lien<br />lien<br />lien<br />lien<br />lien<br /></td></tr></table>
J'espère qu'on s'approche du résultat avec tout ça .
Invité- Invité
Re: Code pour catégories
Merciiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii Isolde, tu es géniale !!!!!!!! C'est parfait, rien à dire =3 Et merci à toi aussi Jerelian, vous m'avez vraiment bien aidé !
Sujets similaires
» Pb code CSS pour arrondis des catégories
» Problème avec un code pour modifier l'affichage des catégories...
» Code pour catégories en onglets ne marche pas
» Code pour centrer les titres des catégories
» Code pour que les categories sois au milieu
» Problème avec un code pour modifier l'affichage des catégories...
» Code pour catégories en onglets ne marche pas
» Code pour centrer les titres des catégories
» Code pour que les categories sois au milieu
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