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.

-23%
Le deal à ne pas rater :
OCEANIC – Table de cuisson induction 3 foyers L60 x P52 cm
99.99 € 129.99 €
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 5 657955SignatureSuicopie
    Sui' Art's
    Wayz
    Wayz
    MasculinAge : 33Messages : 73

    Ven 23 Aoû 2013 - 18:40

    Merci.
    ShuwaPon
    ShuwaPon
    FémininAge : 29Messages : 80

    Ven 23 Aoû 2013 - 21:29

    Thanks!
    StarsDance
    StarsDance
    FémininAge : 25Messages : 4

    Lun 26 Aoû 2013 - 12:31

    Merci
    BROKENHEART.
    BROKENHEART.
    FémininAge : 32Messages : 6

    Mar 27 Aoû 2013 - 15:09

    merci
    Kahlan
    Kahlan
    FémininAge : 38Messages : 371

    Jeu 29 Aoû 2013 - 16:24

    Merci beaucoup ^^
    SNMitsuki
    SNMitsuki
    FémininAge : 27Messages : 63

    Jeu 29 Aoû 2013 - 23:30

    Merci !



    [Html & CSS] Personnaliser vos titre de forum/catégorie - Page 5 250032Sanstitre1
    Everald
    Everald
    FémininAge : 25Messages : 17

    Dim 1 Sep 2013 - 17:45

    Merci beaucoup huhu. :33
    L'Aveugle
    L'Aveugle
    FémininAge : 25Messages : 19

    Lun 2 Sep 2013 - 15:59

    Merci bien Wink



    [Html & CSS] Personnaliser vos titre de forum/catégorie - Page 5 929090Sanstitre
    Kraken
    Kraken
    FémininAge : 31Messages : 137

    Lun 2 Sep 2013 - 17:28

    Merci ♥
    A.Volk
    A.Volk
    FémininAge : 33Messages : 145

    Lun 2 Sep 2013 - 18:30

    Merci
    Nounette
    Nounette
    FémininAge : 28Messages : 17

    Mer 4 Sep 2013 - 23:26

    Merci, ça va vachement me servir (: !
    B.Davis
    B.Davis
    FémininAge : 26Messages : 15

    Jeu 5 Sep 2013 - 16:40

    merci.
    Kathee
    Kathee
    FémininAge : 31Messages : 680

    Ven 6 Sep 2013 - 0:56

    Merci





    Forum dérivé ouat
    dans un univers steampunk :heart:
    - Sayuri -
    - Sayuri -
    FémininAge : 36Messages : 31

    Ven 6 Sep 2013 - 9:57

    Un énorme merci. =]



    [Html & CSS] Personnaliser vos titre de forum/catégorie - Page 5 14063032
    Toshiki
    Toshiki
    FémininAge : 28Messages : 56

    Dim 8 Sep 2013 - 18:47

    thx !
    Tine
    Tine
    FémininAge : 26Messages : 37

    Dim 8 Sep 2013 - 19:19

    Merci. ^^
    Mitsu'ki
    Mitsu'ki
    FémininAge : 35Messages : 31

    Dim 8 Sep 2013 - 23:03

    Merci !



    [Html & CSS] Personnaliser vos titre de forum/catégorie - Page 5 1o27SvUHjU
    Seiden.
    Seiden.
    MasculinAge : 31Messages : 70

    Mar 17 Sep 2013 - 9:24

    C'est ce que je cherchais, merci! =D
    Kadence
    Kadence
    FémininAge : 43Messages : 58

    Mar 1 Oct 2013 - 21:42

    Merci =)
    neochrome_ltd
    neochrome_ltd
    MasculinAge : 42Messages : 63

    Mar 22 Oct 2013 - 13:34

    Merci
    Afterglow
    Afterglow
    FémininAge : 29Messages : 138

    Mar 29 Oct 2013 - 2:38

    Merci



    How do you get up from an all time low?
    FreeSpirit
    FreeSpirit
    MasculinAge : 28Messages : 167

    Mar 29 Oct 2013 - 16:32

    gracias
    Isalia
    Isalia
    FémininAge : 25Messages : 125

    Mar 29 Oct 2013 - 19:03

    Merci *-*
    HeartLessB
    HeartLessB
    FémininAge : 26Messages : 78

    Mar 29 Oct 2013 - 19:20

    merci du partage
    Fluff'
    Fluff'
    FémininAge : 37Messages : 55

    Mar 29 Oct 2013 - 23:26

    Merci en avance ^^
    Contenu sponsorisé


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