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 :
Coffret Collection Poster Pokémon EV8.5 ...
Voir le deal

    [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 10 657955SignatureSuicopie
    Sui' Art's
    Sly King
    Sly King
    FémininAge : 28Messages : 75

    Ven 15 Mai 2015 - 23:43

    Merci *-*
    Youp
    Youp
    FémininAge : 29Messages : 579

    Sam 16 Mai 2015 - 8:50

    Niiiiih merci !



    [Html & CSS] Personnaliser vos titre de forum/catégorie - Page 10 262632clip20160315at092522
    SweetYoshi
    SweetYoshi
    FémininAge : 26Messages : 18

    Mer 27 Mai 2015 - 23:37

    Merci :)))
    avatar
    Psiconda
    FémininAge : 39Messages : 18

    Jeu 28 Mai 2015 - 18:36

    Merci d'avance =)
    Elf-of-Nature
    Elf-of-Nature
    FémininAge : 30Messages : 156

    Mar 9 Juin 2015 - 20:45

    Merci bien :-)



    [Html & CSS] Personnaliser vos titre de forum/catégorie - Page 10 216988Renardssigna
    Ju' de fruits
    Ju' de fruits
    FémininAge : 31Messages : 82

    Lun 15 Juin 2015 - 12:23

    Mercii !



    Artémis Walker
    Artémis Walker
    FémininAge : 28Messages : 54

    Ven 19 Juin 2015 - 16:51

    Super merci J'adore ton travaille vraiment.

    J'ai juste un petit soucis que je n'arrive pas à corrigé. J'ai bien un nombre paire mais les forums du milieux ne sont pas aligné.



    [Html & CSS] Personnaliser vos titre de forum/catégorie - Page 10 Neveru10
    avatar
    Hop80
    MasculinAge : 35Messages : 138

    Dim 5 Juil 2015 - 18:24

    merci
    rosebleudu10
    rosebleudu10
    FémininAge : 34Messages : 189

    Lun 27 Juil 2015 - 13:54

    merci
    Aine Michiyo
    Aine Michiyo
    FémininAge : 29Messages : 27

    Mar 11 Aoû 2015 - 11:59

    Merci ~
    Anonymous
    Invité

    Mar 11 Aoû 2015 - 13:24

    Merci. (´∇ノ`*)ノ
    Laakoh
    Laakoh
    FémininAge : 34Messages : 41

    Mar 11 Aoû 2015 - 17:57

    Merci :love:
    LaLigneVerte
    LaLigneVerte
    MasculinAge : 25Messages : 6

    Mar 18 Aoû 2015 - 0:31

    Thanks !
    Kraiyz
    Kraiyz
    MasculinAge : 27Messages : 29

    Dim 13 Sep 2015 - 10:47

    Merci :)
    Nishiki
    Nishiki
    FémininAge : 26Messages : 325

    Mer 14 Oct 2015 - 21:39

    merci



    [Html & CSS] Personnaliser vos titre de forum/catégorie - Page 10 Head19
    .Mei
    .Mei
    FémininAge : 27Messages : 18

    Dim 18 Oct 2015 - 22:25

    Merci !
    sweetheart.
    sweetheart.
    FémininAge : 37Messages : 120

    Lun 23 Nov 2015 - 21:22

    Merci



    Un bisou pour Invité


    Un bisou pour...
    Invité
    Mystigri
    Mystigri
    FémininAge : 21Messages : 97

    Lun 7 Déc 2015 - 18:48

    Merci !



    nath
    nath
    MasculinAge : 34Messages : 20

    Mer 9 Déc 2015 - 14:23

    merci c'est super
    Antithée
    Antithée
    FémininAge : 27Messages : 69

    Ven 11 Déc 2015 - 18:20

    Merci !
    Ehlènoha
    Ehlènoha
    FémininAge : 35Messages : 27

    Sam 12 Déc 2015 - 19:50

    Merci !
    Tanchi
    Tanchi
    Age : 33Messages : 373

    Ven 18 Déc 2015 - 19:49

    Merci du partage x)



    [Html & CSS] Personnaliser vos titre de forum/catégorie - Page 10 335854plop
    lacoste
    lacoste
    MasculinAge : 30Messages : 30

    Mar 22 Déc 2015 - 22:04

    merci
    joypolis
    joypolis
    MasculinAge : 35Messages : 387

    Ven 29 Jan 2016 - 22:28

    Merci :)



    [Html & CSS] Personnaliser vos titre de forum/catégorie - Page 10 653140Sanstitre003
    Nartiifiice
    Nartiifiice
    FémininAge : 26Messages : 88

    Sam 30 Jan 2016 - 11:33

    merci
    Contenu sponsorisé


      La date/heure actuelle est Ven 13 Déc 2024 - 15:52