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 2 657955SignatureSuicopie
    Sui' Art's
    Arthanys
    Arthanys
    FémininAge : 32Messages : 7

    Sam 20 Avr 2013 - 16:22

    Merci beaucoup !
    Zeloo
    Zeloo
    FémininAge : 28Messages : 65

    Sam 20 Avr 2013 - 17:24

    Merci beaucoup !



    [Html & CSS] Personnaliser vos titre de forum/catégorie - Page 2 0110
    LuxAeterna
    LuxAeterna
    FémininAge : 45Messages : 99

    Sam 20 Avr 2013 - 18:57

    Merci
    Pancake2
    Pancake2
    FémininAge : 29Messages : 5

    Sam 20 Avr 2013 - 19:08

    Thanks ! o/



    [Html & CSS] Personnaliser vos titre de forum/catégorie - Page 2 N_u_10
    samael
    samael
    MasculinAge : 46Messages : 15

    Lun 22 Avr 2013 - 17:51

    merci
    Isteriae
    Isteriae
    FémininAge : 29Messages : 16

    Mar 23 Avr 2013 - 12:54

    Merci
    Ryoma
    Ryoma
    MasculinAge : 37Messages : 420

    Mar 23 Avr 2013 - 16:09

    Merci beaucoup.
    Ailee
    Ailee
    FémininAge : 28Messages : 32

    Mer 24 Avr 2013 - 18:22

    Merci :)



    [Html & CSS] Personnaliser vos titre de forum/catégorie - Page 2 Aileebybolt-3c9cfb1
    Illusion
    Illusion
    FémininAge : 26Messages : 16

    Jeu 25 Avr 2013 - 20:11

    Merci d'avance *-*



    ► And I can think of a thousand reasons why. I don't believe in you. I don't believe in you and I.
    I'm not yours - Angus & Julia Stone
    ► I want to fly, can you take me far away ? Give me a star to reach for. Tell me what it takes. And I’ll go so high... Stitch my wings.
    Wing$ - Macklemore x Ryan Lewis
    Truffe
    Truffe
    FémininAge : 34Messages : 12

    Jeu 25 Avr 2013 - 23:13

    Merci beaucoup ee
    Aurore13
    Aurore13
    FémininAge : 36Messages : 48

    Lun 29 Avr 2013 - 13:31

    Merci beaucoup =)
    Ema Skye
    Ema Skye
    FémininAge : 26Messages : 134

    Mar 30 Avr 2013 - 12:00

    Merci
    Anonymous
    Invité

    Jeu 2 Mai 2013 - 17:45

    Merci du partage !
    July05
    July05
    FémininAge : 32Messages : 35

    Jeu 2 Mai 2013 - 21:38

    Merci !
    Laven
    Laven
    FémininAge : 34Messages : 9

    Ven 3 Mai 2013 - 13:39

    Merci =)
    ptite_perle
    ptite_perle
    FémininAge : 61Messages : 128

    Ven 3 Mai 2013 - 21:41

    Merci



    [Html & CSS] Personnaliser vos titre de forum/catégorie - Page 2 Signature
    Zooé
    Zooé
    FémininAge : 27Messages : 66

    Sam 4 Mai 2013 - 12:11

    merci!!!
    Ariess
    Ariess
    MasculinAge : 25Messages : 44

    Sam 4 Mai 2013 - 13:44

    Merci à toi ! Very Happy



    [Html & CSS] Personnaliser vos titre de forum/catégorie - Page 2 XhCUWz4
    Kamui Kyuuji
    Kamui Kyuuji
    MasculinAge : 32Messages : 30

    Sam 4 Mai 2013 - 13:58

    Merci à vous.
    avatar
    Angel Tiger
    MasculinAge : 24Messages : 76

    Sam 4 Mai 2013 - 14:01

    Merci !
    GotfalD
    GotfalD
    MasculinAge : 28Messages : 54

    Lun 6 Mai 2013 - 23:26

    Merci !



    [Html & CSS] Personnaliser vos titre de forum/catégorie - Page 2 130519104311690148
    Cyanna
    Cyanna
    FémininAge : 37Messages : 59

    Mar 7 Mai 2013 - 3:38

    Merci merci =3
    Kokoro Kuni
    Kokoro Kuni
    FémininAge : 36Messages : 14

    Mar 7 Mai 2013 - 9:20

    Thanks
    Zirconium
    Zirconium
    FémininAge : 33Messages : 11

    Mar 7 Mai 2013 - 23:36

    Merci !
    Nyarlathotep
    Nyarlathotep
    FémininAge : 52Messages : 62

    Mer 8 Mai 2013 - 11:02

    Bonjour et merci Very Happy



    [Html & CSS] Personnaliser vos titre de forum/catégorie - Page 2 Nya01a10
    Contenu sponsorisé


      La date/heure actuelle est Jeu 12 Déc 2024 - 8:45