Réduire la hauteur des barres "Catégories" et augmenter la police de leurs titres
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
Réduire la hauteur des barres "Catégories" et augmenter la police de leurs titres
Bonjour,
Concernant mes barres "Catégories", je souhaiterai :
- Réduire la hauteur des barres.
- Augmenter la taille des caractères des titres, et si possible en changer la police.
Par avance merci.
Concernant mes barres "Catégories", je souhaiterai :
- Réduire la hauteur des barres.
- Augmenter la taille des caractères des titres, et si possible en changer la police.
Par avance merci.
Dernière édition par Bobers le Sam 7 Mai 2011 - 14:48, édité 1 fois
Invité- Invité
Re: Réduire la hauteur des barres "Catégories" et augmenter la police de leurs titres
Bonsoir
mettez ceci dans votre css
le 50 est la taille à régler selon vos gouts
Il faut savoir par contre que si vous utilisez une police qu'un membre n'a pas dans son ordinateur elle s'affichera par défaut par celle que vous avez mise dans votre panneau d'affichage.
Pour la taille de vos barres, elle s'adapte justement à la taille du texte du titre. Mais il est possible de la supprimer comme d'y insérez une image etc...
Cordialement.
mettez ceci dans votre css
- Code:
/*titre des catégories*/
.secondarytitle, .secondarytitle h2{
font-size: 50px;
font-family: nom exact de la police;
}
le 50 est la taille à régler selon vos gouts
Il faut savoir par contre que si vous utilisez une police qu'un membre n'a pas dans son ordinateur elle s'affichera par défaut par celle que vous avez mise dans votre panneau d'affichage.
Pour la taille de vos barres, elle s'adapte justement à la taille du texte du titre. Mais il est possible de la supprimer comme d'y insérez une image etc...
Cordialement.
SoraNoHime- Membre actif
-
Messages : 6218
Inscrit(e) le : 10/06/2010
Re: Réduire la hauteur des barres "Catégories" et augmenter la police de leurs titres
Merci beaucoup pour votre réponse.
Si oui, comment faire ?
Est-il aussi possible de masquer ses barres de catégories pour les remplacer par les images de son choix ?Mais il est possible de la supprimer comme d'y insérez une image etc...
Si oui, comment faire ?
Invité- Invité
Re: Réduire la hauteur des barres "Catégories" et augmenter la police de leurs titres
Tout a fait ^^ en changeant un peu le template index_box et en mettant de la css.
Si vous avez changé déjà ce template, pouvez vous me le fournir ?
Si vous avez changé déjà ce template, pouvez vous me le fournir ?
SoraNoHime- Membre actif
-
Messages : 6218
Inscrit(e) le : 10/06/2010
Re: Réduire la hauteur des barres "Catégories" et augmenter la police de leurs titres
Mon template index_box est celui d'origine.
Invité- Invité
Re: Réduire la hauteur des barres "Catégories" et augmenter la police de leurs titres
PA > Affichage > Template > index_box :
Changez tout votre template par celui-ci
Puis rajoutez ceci dans votre CSS :
Changez tout votre template par celui-ci
- 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>
<!-- BEGIN catrow --><!-- BEGIN tablehead --><table 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" class="dersuj"><div style="width:150px;"> </div></th>
</tr>
<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">
<table width=100%><tr><td class="row1 over" width=65% align="left" valign="top">
<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 class="row1 over" width=35% align="right" valign="top">
<div class="haut"><span class="gensmall"><font size="1">Sujets : {catrow.forumrow.TOPICS}, Messages : {catrow.forumrow.POSTS}</font></span></div>
</td></tr></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"><div style="width:150px;">
<span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>
</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 -->
Puis rajoutez ceci dans votre CSS :
- Code:
/*Titre des catégories*/
.secondarytitle{
background-image: url('url de votre image');
background-repeat: no-repeat;
background-color: transparent;
height:taille de votre image en hauteurpx;
width:taille de votre image en longeurpx;}
.dersuj{
background-color: transparent;
background-image:none;}
.secondarytitle h2 {
height:hauteur de l'image px;
width: longeur px;}
SoraNoHime- Membre actif
-
Messages : 6218
Inscrit(e) le : 10/06/2010
Re: Réduire la hauteur des barres "Catégories" et augmenter la police de leurs titres
Encore merci Macema.
J'ai recopié le CSS tel quel en ajoutant les liens de mes images.
Par contre j'ai quelque peu modifié le code du template que vous m'avez donné, afin de refaire des colonnes pour "Sujets" et "Messages" (ces colonnes n'étant plus visibles avec votre code).
Voici donc mon code template actuel :
Le "1" et le "2" sont les deux images qu'il faut que je mette pour ma barre catégorie. Or la 1 continue sur mes colonnes "Sujets" et "Messages".
J'aimerai que ma présentation soit comme ci-dessous :
Avec donc 4 images à la place des 2 précédentes.
Par avance merci.
J'ai recopié le CSS tel quel en ajoutant les liens de mes images.
Par contre j'ai quelque peu modifié le code du template que vous m'avez donné, afin de refaire des colonnes pour "Sujets" et "Messages" (ces colonnes n'étant plus visibles avec votre code).
Voici donc mon code 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}
</span>
<!-- END switch_user_logged_in -->
</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>
<!-- END switch_user_logged_in -->
<br><a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
</td>
</tr>
</table>
<!-- BEGIN catrow --><!-- BEGIN tablehead --><table width="100%" border="0" cellspacing="0" 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" class="dersuj"><div style="width:150px;"> </div></th>
</tr>
<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">
<table width=100%><tr><td class="row1 over" width=65% align="left" valign="top">
<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}><br><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></td>
</tr></table>
<td class="row3" align="center" valign="middle" height="50">
<div style="width:70px;"><span class="gensmall">{catrow.forumrow.TOPICS}</span></div>
</td>
<td class="row2" align="center" valign="middle" height="50">
<div style="width:70px;"><span class="gensmall">{catrow.forumrow.POSTS}</span></div>
</td>
<td class="row3 over" align="center" valign="middle" height="50">
<div style="width:150px;"><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>
</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 -->
Le "1" et le "2" sont les deux images qu'il faut que je mette pour ma barre catégorie. Or la 1 continue sur mes colonnes "Sujets" et "Messages".
J'aimerai que ma présentation soit comme ci-dessous :
Avec donc 4 images à la place des 2 précédentes.
Par avance merci.
Invité- Invité
Re: Réduire la hauteur des barres "Catégories" et augmenter la police de leurs titres
Dans ce cas remplacez votre index_box ainsi
et dans votre css mettez :
Cordialement.
- 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="50" class="sujet">{L_TOPICS}</th>
<th nowrap="nowrap" width="50" class="message">{L_POSTS}</th>
<th nowrap="nowrap" width="150" class="dersuj"><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><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>
<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 -->
et dans votre css mettez :
- Code:
.secondarytitle{
background-image: url('adress de votre image');
background-repeat: no-repeat;
background-color: transparent;
height:taille de votre image en hauteurpx;
width:taille de votre image en longeurpx;}
.sujet{
background-image: url('adress de votre image');
background-repeat: no-repeat;
background-color: transparent;
height:taille de votre image en hauteurpx;
width:taille de votre image en longeurpx;}
.message{
background-image: url('adress de votre image');
background-repeat: no-repeat;
background-color: transparent;
height:taille de votre image en hauteurpx;
width:taille de votre image en longeurpx;}
.dersuj{
background-image: url('adress de votre image');
background-repeat: no-repeat;
background-color: transparent;
height:taille de votre image en hauteurpx;
width:taille de votre image en longeurpx;}
Cordialement.
SoraNoHime- Membre actif
-
Messages : 6218
Inscrit(e) le : 10/06/2010
Re: Réduire la hauteur des barres "Catégories" et augmenter la police de leurs titres
Merci encore, j'obtiens exactement le résultat souhaité.
J'en profite pour vous transmettre le lien d'un nouveau sujet, où je fais une demande pour masquer ma barre "Qui est en ligne ?" afin de la remplacer par une image, un peu le même principe qu'ici donc :
https://forum.forumactif.com/t304073-masquer-la-barre-qui-est-en-ligne-et-la-remplacer-par-une-image
Peut-être pourrez-vous m'aider...
J'en profite pour vous transmettre le lien d'un nouveau sujet, où je fais une demande pour masquer ma barre "Qui est en ligne ?" afin de la remplacer par une image, un peu le même principe qu'ici donc :
https://forum.forumactif.com/t304073-masquer-la-barre-qui-est-en-ligne-et-la-remplacer-par-une-image
Peut-être pourrez-vous m'aider...
Invité- Invité
Sujets similaires
» Hauteur des barres de titre de catégories
» Augmenter la hauteur des catégories sur l'index du forum
» Barres et titres de catégories
» Augmenter la taille de la police des titres et la mettre en gras
» Réduire la Hauteur des rangées (cellules) contenues dans les catégories
» Augmenter la hauteur des catégories sur l'index du forum
» Barres et titres de catégories
» Augmenter la taille de la police des titres et la mettre en gras
» Réduire la Hauteur des rangées (cellules) contenues dans les 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