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

Voir le sujet précédent Voir le sujet suivant Aller en bas

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

Message par Invité le Mar 3 Mai 2011 - 20:21

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


Dernière édition par Bobers le Sam 7 Mai 2011 - 14:48, édité 1 fois

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

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

Message par SoraNoHime le Mar 3 Mai 2011 - 20:27

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.

SoraNoHime
+ Hyperactif +

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

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

Message par Invité le Mar 3 Mai 2011 - 21:57

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 ?

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

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

Message par SoraNoHime le Mar 3 Mai 2011 - 22:00

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 ?

SoraNoHime
+ Hyperactif +

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

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

Message par Invité le Mer 4 Mai 2011 - 10:07

Mon template index_box est celui d'origine.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

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

Message par SoraNoHime le Mer 4 Mai 2011 - 10:24

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

SoraNoHime
+ Hyperactif +

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

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

Message par Invité le Jeu 5 Mai 2011 - 18:15

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.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.
  • 0

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

Message par SoraNoHime le Ven 6 Mai 2011 - 8:18

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.

SoraNoHime
+ Hyperactif +

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

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

Message par Invité le Sam 7 Mai 2011 - 14:48

Merci encore, j'obtiens exactement le résultat souhaité. Wink

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 :

http://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é


Invité a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum