AccueilDernières imagesRechercherS'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.

Le Deal du moment : -68%
-68% Bougie Bijou à 12,90€ ...
Voir le deal
12.90 €

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

    Sui'
    Sui'
    MasculinAge : 32Messages : 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 4 657955SignatureSuicopie
    Sui' Art's
    Louna Luna
    Louna Luna
    FémininAge : 29Messages : 147

    Jeu 6 Juin 2013 - 12:41

    Merci !
    strjd
    strjd
    MasculinAge : 50Messages : 19

    Sam 8 Juin 2013 - 10:57

    Intéressant ça.

    Merci
    Trés❍r
    Trés❍r
    FémininAge : 30Messages : 92

    Dim 9 Juin 2013 - 13:48

    Merci d'avance :)
    Nathouille
    Nathouille
    FémininAge : 33Messages : 70

    Ven 14 Juin 2013 - 17:11

    Merci =)
    Zibeline
    Zibeline
    FémininAge : 39Messages : 84

    Sam 15 Juin 2013 - 7:39

    merci beaucoup pour ce tut Very Happy
    Parking
    Parking
    FémininAge : 29Messages : 29

    Sam 15 Juin 2013 - 9:01

    Merci :3
    Lexi
    Lexi
    FémininAge : 26Messages : 38

    Dim 16 Juin 2013 - 13:38

    Génial ! Merci !


    Dernière édition par Lexi le Mer 19 Juin 2013 - 10:06, édité 1 fois
    Eldiir
    Eldiir
    FémininAge : 38Messages : 33

    Mer 19 Juin 2013 - 3:41

    Merci!
    Malizia.
    Malizia.
    FémininAge : 28Messages : 90

    Mer 19 Juin 2013 - 15:38

    Thanks ! ♥
    ninouee
    ninouee
    FémininAge : 43Messages : 143

    Jeu 20 Juin 2013 - 20:25

    merci!



    [Html & CSS] Personnaliser vos titre de forum/catégorie - Page 4 Robert12
    avatar
    Miyoshi
    FémininAge : 30Messages : 54

    Ven 21 Juin 2013 - 18:44

    Envie de voir ça. \o/ 
    Et merci par avance !
    lieno
    lieno
    FémininAge : 30Messages : 8

    Mar 25 Juin 2013 - 9:02

    Merci !
    Eyko@
    Eyko@
    FémininAge : 25Messages : 30

    Sam 29 Juin 2013 - 12:12

    merci !
    Kânon
    Kânon
    FémininAge : 36Messages : 30

    Sam 29 Juin 2013 - 19:38

    merci
    RainboWolf
    RainboWolf
    FémininAge : 27Messages : 102

    Sam 29 Juin 2013 - 21:47

    Merci pour ça. :3
    AlexeB
    AlexeB
    FémininAge : 29Messages : 165

    Jeu 18 Juil 2013 - 6:45

    Merci :heart:
    riffraff
    riffraff
    MasculinAge : 46Messages : 112

    Jeu 18 Juil 2013 - 15:52

    merci!
    Bee Chrome
    Bee Chrome
    MasculinAge : 29Messages : 70

    Jeu 25 Juil 2013 - 16:22

    :)



    [Html & CSS] Personnaliser vos titre de forum/catégorie - Page 4 223618SignatureLelouch2
    Diie
    Diie
    FémininAge : 32Messages : 9

    Ven 26 Juil 2013 - 0:38

    Ce tuto a l'air intéressant !
    Azuriel
    Azuriel
    FémininAge : 29Messages : 130

    Ven 26 Juil 2013 - 6:38

    Merci ~
    Elodie potter
    Elodie potter
    FémininAge : 37Messages : 106

    Ven 26 Juil 2013 - 15:09

    merci
    Argy
    Argy
    FémininAge : 26Messages : 98

    Lun 29 Juil 2013 - 11:33

    Merci !
    louha
    louha
    FémininAge : 37Messages : 219

    Lun 29 Juil 2013 - 14:45

    Merci !
    Narutokage
    Narutokage
    MasculinAge : 26Messages : 17

    Ven 9 Aoû 2013 - 23:37

    Thank's



    [Html & CSS] Personnaliser vos titre de forum/catégorie - Page 4 Kakash10
    Selenka
    Selenka
    FémininAge : 32Messages : 37

    Mer 14 Aoû 2013 - 22:49

    Bonjour et merci beaucoup!
    Contenu sponsorisé


      La date/heure actuelle est Ven 13 Déc 2024 - 16:59