[Html & CSS] Personnaliser vos titre de forum/catégorie

Sui'

Age : 32Messages : 1865

Dim 29 Aoû 2010 - 17:58

Rappel du premier message :

#phpBB2

Hello N'Utopien/ N'Utopienne!!!

Aujourd'hui je vais vous expliquez comment personnaliser vos titre de catégorie/forum sa dépend de comment vous appelez sa xD.

Niveau: FacileAperçu: Ici | Optimiser Firefox & ChromeTuto by Sui' & Sparrow

|!| Droits du tutoriel réservés.

Partie 1
Template et Html

Commencer donc par allez sur votre panneau d'administration -> Affichage -> Template: Général -> Ouvrez le template Index_box.
Repérez cet partie du template: (la modification du template ce fera quasiment dans cet partie de code)

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}&nbsp;</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>
 <!-- END tablehead -->
 <!-- BEGIN cathead -->
 <tr>

Couper (copier le et supprimer le) le code correspondant au titre de votre catégorie, c'est à dire celui-la:

Code:

{catrow.tablehead.L_FORUM}

Placez le maintenant après ce code:

Code:

<!-- BEGIN tablehead -->

Ce qui vous donne sa:

Code:

<!-- BEGIN tablehead -->{catrow.tablehead.L_FORUM}<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">

Maintenant nous allons y ajouter le HTML mais sachez que maintenant que votre titre de catégorie est placez de la sorte vous pouvez y ajouter une image de fond, ou le personnalisé comme vous le souhaitez, ici je vais simplement vous expliquez l'exemple postez plus haut.

Commençons donc... nous allons d'abord encadrez le titre de notre catégorie/forum d'un span et lui ajouter une class, ce qui donnera sa:

Code:

<span class="titrecategorie">{catrow.tablehead.L_FORUM}</span>

Maintenant il va falloir s'occuper de l'encadrer et pour cela, nous allons encadrer le titre et le span avec une div ainsi qu'une classe, cependant il faudra fermer la balise div à la fin du template voila le résultat:

Code:

<div class="categorie"><span class="titrecategorie">{catrow.tablehead.L_FORUM}</span>

et fermer la div à la fin du template après ce code:

Code:

<!-- END catfoot -->
  <!-- BEGIN tablefoot -->
</table>

Ce qui vous donne sa dans son entièreté:

Code:

<!-- END catfoot -->
  <!-- BEGIN tablefoot -->
</table></div><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

Validez maintenant le Template et Publier en cliquant sur la croix verte.
Vous avez fini la partie "Template et HTML" passons maintenant à la suite .

Partie 2
Le CSS

Direction maintenant Affichage -> Couleur -> Feuille de Style CSS.
Collez maintenant ce code à la fin de votre CSS:

Code:

.categorie{
margin: 10px 0px;
border: 3px solid #FFF;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;}

.titrecategorie{
margin-left: 15px;
padding: 3px;
display: block;
width: 150px;
margin-top: -15px;
border-top: 2px solid #FFF;
border-right: 1px solid #FFF;
border-left: 1px solid #FFF;
background-color: #Même couleur de fond que votre forum;
color: #FFF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
text-align: center}

Important !: Dans la partie CSS "Titrecategorie" n'oubliez pas d'ajouter un background color de la même couleur que le fond de votre forum, si vous l'oubliez vous verrez la bordure passer derrière votre titre.

Valider maintenant votre CSS et prenez une glace :p car c'est terminer!!

En espérant que ce tutoriel soit clair et qu'il vous aident .

A bientôt!!

Vos commentaires et remerciements sont toujours bienvenus ^^

- Mettre/laisser un crédit vers Never-Utopia est obligatoire.
- Si vous avez des problèmes avec ce LS, venez poster ici.

Dernière édition par Sui' le Lun 4 Juil 2011 - 16:54, édité 7 fois

Asaliah

Age : 39Messages : 120

Dim 15 Juin 2014 - 19:19

merci !

Irisia Anderson

Age : 29Messages : 28

Mar 17 Juin 2014 - 20:44

Merci d'avance o/

Fricadella

Age : 26Messages : 12

Mar 17 Juin 2014 - 21:43

Curieuse x)

Boou

Age : 32Messages : 50

Dim 22 Juin 2014 - 20:05

Merci :3

Mircalla

Age : 31Messages : 17

Lun 30 Juin 2014 - 11:17

Merci *.* !

Mangédéfruiélégumeuh

Age : 27Messages : 83

Mar 1 Juil 2014 - 17:54

merci :)

Draly

Age : 32Messages : 120

Lun 14 Juil 2014 - 12:04

Merci.:p

Illiade

Age : 31Messages : 21

Mar 22 Juil 2014 - 19:32

J'espère que le tutoriel correspond à ce que je cherche, donc par curiosité, je poste. Merci en tous cas **

Invité

Mar 22 Juil 2014 - 21:24

Merci pour ce tuto ! :)

Madras

Age : 39Messages : 285

Sam 26 Juil 2014 - 14:09

Merci du partage

EricSouvaltzis

Age : 25Messages : 47

Lun 28 Juil 2014 - 4:17

Merci

AQW

Age : 30Messages : 225

Ven 1 Aoû 2014 - 2:31

Je vais testé ! Ca a l'air sympa. Merci !

AprilSparkle

Age : 29Messages : 19

Ven 1 Aoû 2014 - 22:08

Merci !

BlueGhost

Age : 23Messages : 138

Sam 9 Aoû 2014 - 22:48

Thanks you :)

DanJack

Age : 30Messages : 155

Dim 10 Aoû 2014 - 23:49

Merci beaucoup !

Cruelly

Age : 31Messages : 2605

Mer 13 Aoû 2014 - 2:09

merci

DixieM.

Age : 33Messages : 49

Mer 13 Aoû 2014 - 13:54

C'est toujours bien de savoir *-*
Merci !

kingyo-chan

Age : 28Messages : 61

Jeu 21 Aoû 2014 - 13:54

love o/

Caine Lornan

Age : 43Messages : 87

Dim 24 Aoû 2014 - 20:59

Very good ^^

Irissia87

Age : 37Messages : 124

Jeu 28 Aoû 2014 - 10:37

merci pour ce tuto!

zbou

Age : 30Messages : 83

Sam 30 Aoû 2014 - 17:23

Merci

SEVAN

Age : 32Messages : 46

Dim 31 Aoû 2014 - 15:32

merci ! o/

Skitty

Age : 28Messages : 50

Lun 1 Sep 2014 - 1:41

Merci =)

Tsumi

Age : 27Messages : 39

Lun 1 Sep 2014 - 15:10

Merci ^^

picka234

Age : 59Messages : 636

Mer 17 Sep 2014 - 11:14

merci

Contenu sponsorisé