AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


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

    Partagez
    avatar
    Sui'
    MasculinAge : 26Messages : 1865

    le Dim 29 Aoû 2010 - 17:58

    Rappel du premier message :


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




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

    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



    Merci beaucoup Woo pour ce kit *-*

    Sui' Art's
    avatar
    Maï-li
    FémininAge : 26Messages : 30

    le Jeu 31 Oct 2013 - 7:18

    merci Very Happy
    avatar
    petite Effie
    FémininAge : 26Messages : 19

    le Dim 3 Nov 2013 - 16:53

    merci
    avatar
    Elorin
    FémininAge : 26Messages : 19

    le Ven 8 Nov 2013 - 22:38

    Merci beaucoup ♥
    avatar
    BloodyMonster
    MasculinAge : 24Messages : 23

    le Dim 10 Nov 2013 - 17:01

    Merci ! **



    avatar
    .SaKou.
    FémininAge : 22Messages : 57

    le Mar 12 Nov 2013 - 17:34

    Merci =O



    avatar
    Griezmann
    MasculinAge : 23Messages : 7

    le Dim 17 Nov 2013 - 10:35

    Merci
    avatar
    Naïshy
    FémininAge : 16Messages : 65

    le Dim 24 Nov 2013 - 17:37

    Merci beaucoooooup :3
    avatar
    hurudy
    MasculinAge : 38Messages : 40

    le Sam 21 Déc 2013 - 20:22

    Merci pour le partage Wink
    avatar
    Ayamcoei
    FémininAge : 22Messages : 6

    le Lun 23 Déc 2013 - 14:50

    Merci !
    avatar
    Neymar
    MasculinAge : 20Messages : 138

    le Lun 30 Déc 2013 - 12:29

    Thx pour ce partage ! =)
    avatar
    Rococo
    MasculinAge : 23Messages : 28

    le Dim 5 Jan 2014 - 12:48

    Je vais l'essayer, merci.
    avatar
    smoukii
    FémininAge : 26Messages : 25

    le Ven 17 Jan 2014 - 9:18

    Meurchi beaucoup °0°
    avatar
    Mimisu
    FémininAge : 23Messages : 9

    le Sam 18 Jan 2014 - 7:31

    danke
    avatar
    Eykillyn
    FémininAge : 21Messages : 19

    le Sam 18 Jan 2014 - 19:00

    Thanks :3
    avatar
    Allison01
    FémininAge : 34Messages : 200

    le Sam 18 Jan 2014 - 19:43

    Je suis curieuse de voir cela donc merci Very Happy
    avatar
    Loud Clash
    MasculinAge : 25Messages : 58

    le Ven 24 Jan 2014 - 3:34

    Merci
    avatar
    Vivaraise
    FémininAge : 21Messages : 35

    le Sam 25 Jan 2014 - 17:00

    Merci!



    avatar
    Hana Evali
    FémininAge : 28Messages : 174

    le Dim 26 Jan 2014 - 15:42

    merci beaucoup !





    Je joue
    • ♚ Kili
    • ♚Ianto Jones
    • ♚ Thor Odinson
    • ♚ James T. Kirk
    J'anime
    • ♚ Les intrigues
    • ♚ Les soirées CB
    • ♚ Les événements
    • ♚ Le flood/les jeux


    avatar
    senda95
    MasculinAge : 25Messages : 35

    le Mar 28 Jan 2014 - 2:53

    merci !
    avatar
    AwenWolf
    FémininAge : 30Messages : 76

    le Mar 4 Fév 2014 - 9:21

    Merci beaucoup, je vais essayer  <3
    avatar
    Jawilsia
    FémininAge : 26Messages : 143

    le Mar 4 Fév 2014 - 13:46

    Merci ! ^^
    avatar
    Chant
    FémininAge : 18Messages : 68

    le Dim 9 Fév 2014 - 0:44

    Merci, très utile.
    avatar
    Heine
    MasculinAge : 23Messages : 169

    le Dim 9 Fév 2014 - 11:50

    Merci beaucoup ! \o/



    Sayate
    FémininAge : 24Messages : 5

    le Mar 18 Fév 2014 - 15:38

    Thank's!
    avatar
    Vicko
    MasculinAge : 24Messages : 46

    le Jeu 20 Fév 2014 - 21:42

    merci
    Contenu sponsorisé


      La date/heure actuelle est Dim 16 Déc 2018 - 18:02