Image de fond des titres de 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 • Partagez •
Image de fond des titres de catégories
- Encore moi

J'aimerais savoir comment faire pour faire un fond de titre de catégorie arrondi comme sur ce forum ? Ou au moins savoir comment le modifier.
Merci d'avance

Dernière édition par Ian-Fan le Mer 17 Nov 2010 - 21:16, édité 1 fois
Invité- Invité
Re: Image de fond des titres de catégories
Bonsoir,
C'est simplement une image avec un arrondi :
https://redcdn.net/ihimizer/img186/8813/sanstitre1vmi.png

C'est simplement une image avec un arrondi :
https://redcdn.net/ihimizer/img186/8813/sanstitre1vmi.png

Arlem- Membre actif
- Messages : 2550
Inscrit(e) le : 30/06/2009
Re: Image de fond des titres de catégories
J'aimerais savoir où mettre l'image voulu. Dans les templates ? Le CSS ?
Invité- Invité
Re: Image de fond des titres de catégories
P.A > affichage > Gestion des images > mode avancé >
Tu as alors trois champs :
- Image du fond des titres
- Image du fond des catégories (gauche)
- Image du fond des catégories (droite)
C'est l'un de ces trois champs suivant la version de ton forum
++
Tu as alors trois champs :
- Image du fond des titres
- Image du fond des catégories (gauche)
- Image du fond des catégories (droite)
C'est l'un de ces trois champs suivant la version de ton forum

++
Re: Image de fond des titres de catégories
J'ai repris l'image uniquement pour tester ( elle sera bien entendu enlevée ) mais le problème étant que l'image reste dans la case, qui est trop petite. Peut-être faut-il passer par les templates ou le CSS ?
Invité- Invité
Re: Image de fond des titres de catégories
Non, il te faut harmoniser la largeur de ton forum à la largeur de l'image de fond des titres pour qu'elle rentre pile poil.
Enfin idéalement, d'abord tu fixes la largeur de ton forum, et après tu te fais une image de fond.
++
Enfin idéalement, d'abord tu fixes la largeur de ton forum, et après tu te fais une image de fond.
++
Re: Image de fond des titres de catégories
Le problème n'est pas la largeur mais là hauteur de la case du titre des catégories comme on peut le voir sur le forum.
EDIT. Je viens également de remarquer que l'image s'applique aussi dans les sujets comme vous pouvez le voir ici. && J'aimerais que ça ne s'applique qu'à la case du nom de catégorie.
EDIT. Je viens également de remarquer que l'image s'applique aussi dans les sujets comme vous pouvez le voir ici. && J'aimerais que ça ne s'applique qu'à la case du nom de catégorie.
Invité- Invité
Re: Image de fond des titres de catégories
Bonsoir,
Non, la modification se fait via le template index_box.
Voilà le code =>
- 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 width="100%" cellspacing="0px" cellpading="0px"><tr><td class="fondtitres">{catrow.tablehead.L_FORUM}</td><td></td><tr><tr><td colspan="2">
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<!-- 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><br />
</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>
<!-- BEGIN forum_link_no -->
<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>
<!-- 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 -->
</table></td></tr></table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->
Les explications =>
J'ai supprimé ceci:
- Code:
<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>
Et à la place j'ai mis ce tableau:
- Code:
<table width="100%" cellspacing="0px" cellpading="0px"><tr><td class="fondtitres">{catrow.tablehead.L_FORUM}</td><td></td><tr><tr><td colspan="2">
Dans la CSS =>
- Code:
.fondtitres{
width: largeur de l'image en px;
height: hauteur de l'image en px;
text-align: center;
align: center;
background: url('lien de l'image') center;
background-repeat: no-repeat;
}
Cordialement.
Re: Image de fond des titres de catégories
Merci beaucoup pour votre réponse mais cela ne fonctionne pas. Le problème étant que j'ai déjà modifié certaines choses dans ce template ... ( Catégories en onglets, suppression de certaines colonnes ). Je vous laisse voir ce que ça donne :ici.
Voilà mon template :
EDIT: Vous pourrez également voir que mes onglets sont toujours là mais que toutes mes catégories sont affichées en dessous .
Voilà mon template :
- Code:
<!-- DEBUT MODIF ONGLETS -->
<script type="text/javascript">
<!--
var i = 0;
document.write('<div align="center">
<ul class="onglet">
<li onMouseOver="change_cat(0);" class="onglet_actif" id="cat_0">un</li>
<li onMouseOver="change_cat(1);" class="onglet_nactif" id="cat_1">deux</li>
<li onMouseOver="change_cat(2);" class="onglet_nactif" id="cat_2">trois</li>
<li onMouseOver="change_cat(3);" class="onglet_nactif" id="cat_3">quatre</li>
<li onMouseOver="change_cat(4);" class="onglet_nactif" id="cat_4">cinq</li>
<li onMouseOver="change_cat(5);" class="onglet_nactif" id="cat_5">six</li>
<li onMouseOver="change_cat(6);" class="onglet_nactif" id="cat_6">sept</li>
<li onMouseOver="change_cat(7);" class="onglet_nactif" id="cat_7">huit</li>
</ul>
</div>
');
var compteur_cat = 0;
var anc_cat = 0;
var nom_cat = new Array('0','1','2','3','4','5','6','7');
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 -->
<br><table width="100%" cellspacing="0px" cellpading="0px"><tr><td class="fondtitres">{catrow.tablehead.L_FORUM}</td><td></td><tr><tr><td colspan="2">
<!-- 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 over" align="center" valign="middle" height="50">
<span class="gensmall">
<div class="sujets_messages"><b>{catrow.forumrow.TOPICS} sujets</b> | <b>{catrow.forumrow.POSTS} messages</b></div>
<div class="derniers_sujets">{catrow.forumrow.LAST_POST}</div></span>
</td>
<!-- BEGIN forum_link_no -->
<!-- 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 -->
EDIT: Vous pourrez également voir que mes onglets sont toujours là mais que toutes mes catégories sont affichées en dessous .
Invité- Invité
Re: Image de fond des titres de catégories
Il fallait préciser

Je vous ai donné un template correct, avec l'effet désiré. Si vous avez fait d'autres modifications, vous devez les adapter au code que je vous ai donné.
Après je n'ai jamais testé cet effet avec les catégories en onglet ..
Faut que je regarde de plus près, mais je vous invite à essayer quand même de votre côté en faisant les choses dans l'ordre

Cordialement.
Re: Image de fond des titres de catégories
Ca fait un petit moment que j'y suis, j'ai recommencé plusieurs fois ... mais je ne trouve pas de solutions.
J'ai suis même revenue au template par défaut, histoire de voir si c'était les onglets qui étaient en cause mais les modifications apportées ne me donne pas l'effet voulu.
J'ai suis même revenue au template par défaut, histoire de voir si c'était les onglets qui étaient en cause mais les modifications apportées ne me donne pas l'effet voulu.
Voilà mon template actuel :
- 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">
<table width="100%" cellspacing="0px" cellpading="0px"><tr><td class="fondtitres">{catrow.tablehead.L_FORUM}</td><td></td><tr><tr><td colspan="2">
<!-- 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><br />
</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>
<!-- BEGIN forum_link_no -->
<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>
<!-- 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 -->
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->
Invité- Invité
Re: Image de fond des titres de catégories
Je me permet un UP.
Invité- Invité
Re: Image de fond des titres de catégories
Ian-Fan a écrit:Je me permet un UP.
Invité- Invité
Invité- Invité
Re: Image de fond des titres de catégories
Bonsoir,
Il me faudrait les codes que vous avez utilisés pour faire vos onglets SANS la modification que je vous ai donné pour l'index box.
Je vais tenter d'appliquer la modification que je vous ai donnée aux catégories en onglets.
Cordialement.
Re: Image de fond des titres de catégories
- Merci pour votre réponse.
Voici le template.
- Code:
<!-- DEBUT MODIF ONGLETS -->
<script type="text/javascript">
<!--
var i = 0;
document.write('<div align="center">
<ul class="onglet">
<li onMouseOver="change_cat(0);" class="onglet_actif" id="cat_0">un</li>
<li onMouseOver="change_cat(1);" class="onglet_nactif" id="cat_1">deux</li>
<li onMouseOver="change_cat(2);" class="onglet_nactif" id="cat_2">trois</li>
<li onMouseOver="change_cat(3);" class="onglet_nactif" id="cat_3">quatre</li>
<li onMouseOver="change_cat(4);" class="onglet_nactif" id="cat_4">cinq</li>
<li onMouseOver="change_cat(5);" class="onglet_nactif" id="cat_5">six</li>
<li onMouseOver="change_cat(6);" class="onglet_nactif" id="cat_6">sept</li>
<li onMouseOver="change_cat(7);" class="onglet_nactif" id="cat_7">huit</li>
</ul>
</div>
');
var compteur_cat = 0;
var anc_cat = 0;
var nom_cat = new Array('0','1','2','3','4','5','6','7');
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 -->
<br><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}>
<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 over" align="center" valign="middle" height="50">
<span class="gensmall">
<div class="sujets_messages"><b>{catrow.forumrow.TOPICS} sujets</b> | <b>{catrow.forumrow.POSTS} messages</b></div>
<div class="derniers_sujets">{catrow.forumrow.LAST_POST}</div></span>
</td>
<!-- BEGIN forum_link_no -->
<!-- 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 -->
&& le CSS des onglets . Je ne sais pas si ce sera utile mais je vous le mets quand même.
- Code:
.text {
color:#FFFFFF; /*Couleur du texte de vos onglets*/
cursor:pointer;
}
#cat_un,#cat_deux,#cat_trois,#cat_quatre,#cat_cinq,#cat_six,#cat_sept,#cat_huit /*Noms des onglets*/ {
padding-top:4px;
}
.spoiler_content { display: block; }
.hidden .spoiler_content { display: none; }
.cat_forum {
background-color: #000000;
margin: auto;
margin-bottom:30px;
width:800px;
}
.onglet {
display:inline-block;
margin-top:30px;
text-decoration:none; !important
cursor:pointer;
}
.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-color : #FF0000; /*Couleur de l'onglet étant actif*/
width:40px; /*Largeur de l'onglet étant actif*/
height:10px; /*Hauteur de l'onglet étant actif*/
cursor:pointer;
color: #000000; /*Couleur du texte*/
font-style: normal; /*Police d'écriture*/
font-size: 10px; /*Taille du texte*/
padding: 5px; /*Pas de chevauchement des onglets*/
margin: 5px; /*Espace entre les onglets*/
}
.onglet_nactif {
background-color : #FF0000; /*Couleur de l'onglet étant inactif*/
width:40px; /*Largeur de l'onglet étant inactif*/
height:10px; /*Hauteur de l'onglet étant inactif*/
cursor:pointer;
color: #000000; /*Couleur du texte*/
font-style: normal; /*Police d'écriture*/
font-size: 10px; /*Taille du texte*/
padding: 5px; /*Pas de chevauchement des onglets*/
margin: 5px; /*Espace entre les onglets*/
}
Invité- Invité
Re: Image de fond des titres de catégories
Bonjour,
Et dans votre CSS, faudra remplacer l'autre par ceci =>
- Code:
<!-- DEBUT MODIF ONGLETS -->
<script type="text/javascript">
<!--
var i = 0;
document.write('<div align="center">
<ul class="onglet">
<li onMouseOver="change_cat(0);" class="onglet_actif" id="cat_0">un</li>
<li onMouseOver="change_cat(1);" class="onglet_nactif" id="cat_1">deux</li>
<li onMouseOver="change_cat(2);" class="onglet_nactif" id="cat_2">trois</li>
<li onMouseOver="change_cat(3);" class="onglet_nactif" id="cat_3">quatre</li>
<li onMouseOver="change_cat(4);" class="onglet_nactif" id="cat_4">cinq</li>
<li onMouseOver="change_cat(5);" class="onglet_nactif" id="cat_5">six</li>
<li onMouseOver="change_cat(6);" class="onglet_nactif" id="cat_6">sept</li>
<li onMouseOver="change_cat(7);" class="onglet_nactif" id="cat_7">huit</li>
</ul>
</div>
');
var compteur_cat = 0;
var anc_cat = 0;
var nom_cat = new Array('0','1','2','3','4','5','6','7');
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><td class="fondtitres">{catrow.tablehead.L_FORUM}</td><td></td><tr><tr><td colspan="2">
<!-- 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" style="width: 50px;">
<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 over" align="center" valign="middle" height="50">
<span class="gensmall">
<div class="sujets_messages"><b>{catrow.forumrow.TOPICS} sujets</b> | <b>{catrow.forumrow.POSTS} messages</b></div>
<div class="derniers_sujets">{catrow.forumrow.LAST_POST}</div></span>
</td>
<!-- BEGIN forum_link_no -->
<!-- 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 -->
</td></tr></table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->
Et dans votre CSS, faudra remplacer l'autre par ceci =>
- Code:
.fondtitres{
min-width: 450px;
min-height: 50px;
text-align: center;
align: center;
background: url('http://img186.imageshack.us/img186/8813/sanstitre1vmi.png') center;
background-repeat: no-repeat;
}
Re: Image de fond des titres de catégories
Super ça marche. Merci beaucoup
Seul petit hic. Il y a des espaces entres chaque colonne && chaque rangée. Comment les supprimer ?

Seul petit hic. Il y a des espaces entres chaque colonne && chaque rangée. Comment les supprimer ?
Invité- Invité
Re: Image de fond des titres de catégories
Je n'ai pas réussi à les enlever > < '
Désolée

Re: Image de fond des titres de catégories
Pas grave. Je vais me débrouiller autrement ^^
Merci beaucoup pour ton aide
Merci beaucoup pour ton aide


Invité- Invité
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