Changer les catégories

[mama3802]

Bonjour,

J'aimerais personnaliser le haut de mes catégories mais je ne sais pas comment faire. Voila ce que je voudrais changer: https://i.servimg.com/u/f45/15/15/84/77/forum12.png

Merci d'avance =)

[Matriochka]

Bonjour,

De quelles manière voulez-vous les personnaliser exactement ?

[mama3802]

En mettant une image

[Matriochka]

Dans ce cas, il vous suffit de remplacer le titre de votre catégorie par votre image.

Rendez-vous dans PA » Général » Forum » Catégories et forum, éditez vos catégories à l’aide du rouage orangé et remplacez leur titre par une image :

Code:

<img src="url_de_votre_image" />

[mama3802]

Je l'ai déjà fait pour les titres des catégories mais je veux changer le haut comme sur ce forum par exemple: http://douceolympe.1fr1.net/
Je suppose qu'il faut en passer par des codes mais je ne sais pas lesquels.

[mama3802]

UP =)

[Nicoge]

Je sais qu'il faut modifier dans le template index-box mais je sais plus quoi exactement. Je vais regarder pour pouvoir vous aidez, je vous tient au courant...

EDIT :

Je vais vous donner quelques truc je pense que cela devrait fonctionner.

D'abord il faut définir une taille précise en px pour la largeur du forum dans PA-> Général -> Configurations
Vous trouverez "Structure des pages" et il y a :

Code:

Largeur du forum (nombre ou %) :

Pour l'exemple j'ai mis 1000.

Voici les codes CSS à insérer dans PA -> Affichage -> Couleur -> Feuille de style CSS

Code:

#backcat {
text-transform: lowercase;
font-family: 'Coolvetica', 'Trebuchet MS';
font-size: 20px;
letter-spacing: 3px;
background: transparent url(URL DE L'IMAGE) no-repeat center;
height: XXXpx;
border: 0px;
align: center;
}

.positiontitre {
float: left;
margin-top: 20px;
margin-left: 100px;
}

.topictitle, h1, h2 {
color: #333;
font-size: 11px;
font-weight: 700;
align: center;
}


Remplacer dans le code ci-dessus URL DE L'IMAGE par l'adresse de l'image que vous souhaitez mettre en fond (qui reviendra pour chaque titre de catégorie). Pour plus de facilité, je vous conseille de mettre une image dont la largeur est celle de votre forum (Celle que vous avez régler plus haut).
Remplacer aussi les "XXX" par la hauteur de l'image que vous voulez mettre en fond.
Dans .positiontitre, la taille du margin-left dépendra de l'image que vous metterez pour le titre de la catégorie. Exemple, ici, si l'image que je metterai pour les catégorie fait 800 px de long et que la largeur du forum est de 1000px, le taille du margin left est de 100 px pour que l'image soit centrée.

Ensuite, dans le template "index_box", remplacer

Code:


<!-- 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>
     
  </tr>
  <!-- END tablehead -->


Par

Code:

 <!-- BEGIN catrow --><!-- BEGIN tablehead --><div id="backcat" height="XXXpx"><h2><div class="positiontitre">{catrow.tablehead.L_FORUM}</div></h2></div><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
  <!-- END tablehead -->

Encore une fois, remplacer les XXX par la hauteur de l'image de fond.

Enfin Pour les titre de catégorie (dont j'ai parler avec le margin-left un peu plus haut), remplacer le titre de chaque Catégorie par

Code:

<img src="URL DE L'IMAGE" />

En remplacent cette fois par l'URL de l'image pour le titre de la catégorie.

ATTENTION: Toutes les images pour les titres de catégories doivent avoir la même longueur et la même hauteur sinon les marges ne seront pas juste !

Voilà, je suis désolé si je suis pas très clair mais n'hésiter pas à me poser des question et à me dire si cela fonctionne et si c'est ce que vous cherchez.

Nicoge

[mama3802]

Merci c'est gentil =)
Je vais essayer

[mama3802]

J'ai essayer et ça marche bien, merci =)
Par contre j'ai une autre question, est ce que vous savez comment faire la même chose mais en bas des catégories, ici: http://img83.xooimage.com/files/5/f/d/forum-3376192.png

[Nicoge]

Pour le bas,

Voici d'abord le code à insérer dans le CSS

Code:

#bas {
letter-spacing: inherit;
background: transparent url(URL DE L'IMAGE) no-repeat center;
height: XXXpx;
border: 0px;
}

Même chose que pour le haut, remplacer par l'adresse de votre image (de préférence de la même largeur que celle du forum) ainsi que les XXX par la hauteur de l'image.

Et dans le Template, remplacer

Code:

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

Par

Code:

 <!-- BEGIN tablefoot -->
<tr align="center"><div id="bas" height="XXXpx"> </div></tr></table><!-- END tablefoot --><!-- END catrow -->

En remplacent les XXX par la hauteur de l'image

Normalement ça devrait fonctionner.

[mama3802]

Parfait merci =)