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

    Sui'
    Sui'
    MasculinAge : 29Messages : 1865

    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 *-*
    [Html & CSS] Personnaliser vos titre de forum/catégorie - Page 12 657955SignatureSuicopie
    Sui' Art's
    Luxury
    Luxury
    FémininAge : 28Messages : 3

    Mer 28 Déc 2016 - 21:27

    Merci beaucoup ! :aww:
    VincentWeever
    VincentWeever
    MasculinAge : 23Messages : 57

    Mar 10 Jan 2017 - 20:08

    Merci de partage.
    lounythithi
    lounythithi
    MasculinAge : 25Messages : 14

    Ven 20 Jan 2017 - 3:21

    Merci :)
    lounythithi
    lounythithi
    MasculinAge : 25Messages : 14

    Sam 21 Jan 2017 - 1:46

    Merci ^^
    Lexucio
    Lexucio
    MasculinAge : 27Messages : 33

    Jeu 26 Jan 2017 - 9:00

    Merci ^^
    Meriadoc
    Meriadoc
    MasculinAge : 31Messages : 12

    Sam 28 Jan 2017 - 0:03

    Merci !
    Sherinn
    Sherinn
    FémininAge : 26Messages : 9

    Lun 13 Fév 2017 - 16:57

    Merci !
    Piloufas
    Piloufas
    MasculinAge : 31Messages : 1

    Mer 22 Fév 2017 - 18:45

    merci
    avatar
    Invictus
    FémininAge : 36Messages : 11

    Mar 14 Mar 2017 - 17:55

    merci pour le tuto
    Jenova
    Jenova
    MasculinAge : 26Messages : 153

    Ven 17 Mar 2017 - 14:56

    merci =)



    [Html & CSS] Personnaliser vos titre de forum/catégorie - Page 12 I3k3
    Cannelle Cannelle
    Cannelle Cannelle
    MasculinAge : 22Messages : 33

    Lun 3 Avr 2017 - 11:01

    Merci !
    Athéna
    Athéna
    FémininAge : 60Messages : 29

    Ven 21 Avr 2017 - 16:01

    Coucou et merci ^^



    "L'esprit est un instrument de musique avec une certaine gamme de tons,
    au-deLà desquels s'étend un silence infini."
    John:
    John:
    MasculinAge : 28Messages : 56

    Mar 30 Mai 2017 - 0:51

    Très beau tout ça!
    Kizuro hoki
    Kizuro hoki
    MasculinAge : 25Messages : 45

    Jeu 8 Juin 2017 - 21:17

    Merci !
    Lénalee01
    Lénalee01
    FémininAge : 31Messages : 20

    Jeu 22 Juin 2017 - 16:47

    sympathique comme tout
    Tluth
    Tluth
    MasculinAge : 24Messages : 1

    Ven 25 Aoû 2017 - 23:16

    Merci d'avance
    Youva Mouder
    Youva Mouder
    MasculinAge : 22Messages : 4

    Jeu 14 Sep 2017 - 13:04

    Merci !!
    Kovu
    Kovu
    FémininAge : 20Messages : 256

    Dim 17 Sep 2017 - 14:44

    merci !
    benficagirl
    benficagirl
    FémininAge : 35Messages : 442

    Dim 15 Oct 2017 - 14:52

    merci
    Necrolythia
    Necrolythia
    FémininAge : 33Messages : 574

    Dim 22 Oct 2017 - 20:20

    coucou, j'aime bien merci



    [Html & CSS] Personnaliser vos titre de forum/catégorie - Page 12 KKEVK8u
    MinahBuffyDixon
    MinahBuffyDixon
    FémininAge : 32Messages : 41

    Sam 18 Nov 2017 - 19:50

    Merci



    [Html & CSS] Personnaliser vos titre de forum/catégorie - Page 12 Tumblr_static_ainoari1
    .Lucifer.
    .Lucifer.
    MasculinAge : 48Messages : 183

    Dim 19 Nov 2017 - 9:27

    Merci !



    [Html & CSS] Personnaliser vos titre de forum/catégorie - Page 12 978358Divine
    Zackeyn
    Zackeyn
    MasculinAge : 30Messages : 7

    Lun 4 Déc 2017 - 17:01

    Merci. :)
    Manoirr
    Manoirr
    MasculinAge : 26Messages : 5

    Dim 21 Jan 2018 - 0:23

    Merci !
    Kickdash
    Kickdash
    MasculinAge : 30Messages : 23

    Lun 22 Jan 2018 - 1:31

    merci
    Contenu sponsorisé


      La date/heure actuelle est Jeu 5 Aoû 2021 - 18:53