Réduire la hauteur des barres "Catégories" et augmenter la police de leurs titres

[Invité]

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.

[SoraNoHime]

Bonsoir

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.

[Invité]

Merci beaucoup pour votre réponse.

Mais il est possible de la supprimer comme d'y insérez une image etc...

Est-il aussi possible de masquer ses barres de catégories pour les remplacer par les images de son choix ?
Si oui, comment faire ?

[SoraNoHime]

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 ?

[Invité]

Mon template index_box est celui d'origine.

[SoraNoHime]

PA > Affichage > Template > index_box :

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;}

[Invité]

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 :

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

Ensuite une impression écran de ce que j'obtiens :


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.

[SoraNoHime]

Dans ce cas remplacez votre index_box ainsi

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.

[Invité]

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...