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.

Le Deal du moment : -60%
-60% Batterie externe charge rapide 20 000 mAh
Voir le deal
15.97 €

    [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 11 657955SignatureSuicopie
    Sui' Art's
    Dorin
    Dorin
    FémininAge : 46Messages : 33

    Mar 9 Fév 2016 - 17:44

    Merci
    Zachary Wolf
    Zachary Wolf
    FémininAge : 29Messages : 57

    Mer 10 Fév 2016 - 14:00

    Merci
    blastrall
    blastrall
    MasculinAge : 27Messages : 41

    Mer 10 Fév 2016 - 19:33

    merci
    Geekoupa
    Geekoupa
    MasculinAge : 33Messages : 20

    Sam 20 Fév 2016 - 19:46

    Merci beaucoup =)
    wiise
    wiise
    FémininAge : 28Messages : 50

    Lun 29 Fév 2016 - 18:10

    Merci !



    [Html & CSS] Personnaliser vos titre de forum/catégorie - Page 11 140051NUban
    Lucrécya
    Lucrécya
    FémininAge : 28Messages : 39

    Jeu 10 Mar 2016 - 20:02

    Merchiii ! ♥
    Unleash
    Unleash
    MasculinAge : 21Messages : 85

    Lun 21 Mar 2016 - 14:08

    ty
    Coco-Lapin02
    Coco-Lapin02
    MasculinAge : 53Messages : 167

    Mar 22 Mar 2016 - 20:25

    Merci
    vengenz
    vengenz
    FémininAge : 30Messages : 5

    Mer 23 Mar 2016 - 16:25

    merci !
    Rizhskaya.
    Rizhskaya.
    MasculinAge : 28Messages : 42

    Jeu 24 Mar 2016 - 21:01

    Merci ! :)
    karimserk
    karimserk
    MasculinAge : 21Messages : 5

    Ven 25 Mar 2016 - 17:07

    Merci Beaucoup du partage
    Reids
    Reids
    FémininAge : 23Messages : 18

    Sam 16 Avr 2016 - 13:51

    Merci beaucoup ! Je veux lire ! Very Happy
    Pooni
    Pooni
    FémininAge : 23Messages : 39

    Jeu 21 Avr 2016 - 22:38

    Merci des astuces !
    Velcuum
    Velcuum
    MasculinAge : 22Messages : 41

    Sam 23 Juil 2016 - 12:07

    Miciiii :DDDD
    tamedmind
    tamedmind
    FémininAge : 20Messages : 19

    Jeu 28 Juil 2016 - 1:04

    Merci!
    avatar
    Divas/Marion
    FémininAge : 21Messages : 44

    Sam 30 Juil 2016 - 2:55

    Merci
    dean winchester
    dean winchester
    MasculinAge : 27Messages : 85

    Dim 23 Oct 2016 - 12:21

    merci
    Ervael
    Ervael
    MasculinAge : 37Messages : 18

    Jeu 27 Oct 2016 - 11:53

    Merci pour cette astuce :gentleman:



    on loading ham3
    FROSTendoloris
    FROSTendoloris
    FémininAge : 27Messages : 190

    Jeu 27 Oct 2016 - 13:11

    Merci Very Happy



    [Html & CSS] Personnaliser vos titre de forum/catégorie - Page 11 3oov
    Ryukaï
    Ryukaï
    MasculinAge : 23Messages : 629

    Jeu 27 Oct 2016 - 14:06

    merci Very Happy



    [Html & CSS] Personnaliser vos titre de forum/catégorie - Page 11 15796010 [Html & CSS] Personnaliser vos titre de forum/catégorie - Page 11 14749110
    Valens88
    Valens88
    MasculinAge : 33Messages : 9

    Dim 4 Déc 2016 - 20:45

    merci!
    sweetheart.
    sweetheart.
    FémininAge : 33Messages : 120

    Lun 5 Déc 2016 - 19:01

    Merci



    Un bisou pour Invité


    Un bisou pour...
    Invité
    Sangohan
    Sangohan
    MasculinAge : 24Messages : 6

    Sam 10 Déc 2016 - 14:06

    thx
    Dariel
    Dariel
    FémininAge : 51Messages : 69

    Sam 10 Déc 2016 - 20:19

    Sui' tout à toi :love:
    Merci de ta disponibilité

    :cow:



    C'est la vie Invité ! Pas le paradis.
    Jane Bingum
    Jane Bingum
    FémininAge : 23Messages : 83

    Mer 28 Déc 2016 - 3:17

    Merci!
    Contenu sponsorisé


      La date/heure actuelle est Jeu 5 Aoû 2021 - 19:39