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.

-17%
Le deal à ne pas rater :
Continental Edison TV QLED 55” (139 cm) UHD 4K 3840×2160
299.99 € 359.99 €
Voir le deal

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

    Sui'
    Sui'
    MasculinAge : 32Messages : 1865

    Dim 29 Aoû 2010 - 17:58


    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 657955SignatureSuicopie
    Sui' Art's
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Jeu 28 Mar 2013 - 14:08

    [sujet délesté de ses réponses pour qu'il reste en place proprement]



    sign
    Tsumei
    Tsumei
    MasculinAge : 34Messages : 116

    Ven 29 Mar 2013 - 19:13

    Merci !
    #CHEVALISSE
    #CHEVALISSE
    FémininAge : 31Messages : 25

    Ven 29 Mar 2013 - 20:58

    j'aime
    Thiaskia
    Thiaskia
    FémininAge : 32Messages : 8

    Ven 29 Mar 2013 - 22:07

    merci d'avance :3
    Gingka Hagane
    Gingka Hagane
    MasculinAge : 26Messages : 25

    Sam 30 Mar 2013 - 11:26

    Merci
    Wild
    Wild
    FémininAge : 28Messages : 57

    Sam 30 Mar 2013 - 11:31

    Merci beaucoup



    [Html & CSS] Personnaliser vos titre de forum/catégorie Colft10
    NutellaAuChoco
    NutellaAuChoco
    FémininMessages : 11

    Sam 30 Mar 2013 - 18:54

    Merci beaucoup. ^^



    « Toute rose est proie de l'hiver. »
    petit lu
    petit lu
    FémininAge : 32Messages : 184

    Dim 31 Mar 2013 - 14:20

    Merci beaucoup ♥
    katia06
    katia06
    FémininAge : 55Messages : 203

    Dim 31 Mar 2013 - 16:10

    merci



    Miistracy
    Miistracy
    FémininAge : 31Messages : 13

    Dim 31 Mar 2013 - 22:46

    Thanks !
    Imala Amanecer
    Imala Amanecer
    FémininAge : 25Messages : 6

    Lun 1 Avr 2013 - 15:08

    Un grand merci ! :-)
    shadow5600
    shadow5600
    MasculinAge : 36Messages : 44

    Lun 1 Avr 2013 - 21:20

    merci pour ce tutoriel
    avatar
    TATACARO13
    FémininAge : 49Messages : 80

    Mer 3 Avr 2013 - 16:53

    merci



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

    [Html & CSS] Personnaliser vos titre de forum/catégorie 381658signatureBAU
    Reishi
    Reishi
    MasculinAge : 31Messages : 148

    Ven 5 Avr 2013 - 22:32

    Merci !
    Serere
    Serere
    FémininAge : 33Messages : 20

    Dim 7 Avr 2013 - 17:23

    Eeeet merci beaucoup pour ce code Very Happy



    | ! | "Serere" est un vieux pseudo que je n'utilise plus, donc ne soyez pas étonnés de voir écrit "Luka" (ou LukaDolls) sur mon avatar. Je ne veux pas déranger l'équipe administrative, donc je ne demanderais pas un changement de pseudo par mp, cela dit si l'un de vous passe par là et voit cette petite annonce, si ça ne le dérange pas de procéder à un changement de pseudo, ce serait agréable et je vous en serai reconnaissante, merci =) | ! |
    [Html & CSS] Personnaliser vos titre de forum/catégorie Signnuz
    Castielle
    Castielle
    FémininAge : 29Messages : 33

    Lun 8 Avr 2013 - 2:05

    Merci beaucoup :)
    Nenems
    Nenems
    FémininAge : 30Messages : 10

    Mer 10 Avr 2013 - 18:47

    merchi ~



    [Html & CSS] Personnaliser vos titre de forum/catégorie Tumblr_mjkkngkt6a1r02salo2_250
    Grande
    Grande
    FémininAge : 36Messages : 207

    Mer 10 Avr 2013 - 19:11

    Merci



    [Html & CSS] Personnaliser vos titre de forum/catégorie 171074gwenj10
    Nightbird83
    Nightbird83
    MasculinAge : 33Messages : 22

    Mer 10 Avr 2013 - 22:47

    Thank you ! C'est ce que je cherchais ^^
    Kurokaze
    Kurokaze
    FémininAge : 33Messages : 35

    Jeu 11 Avr 2013 - 22:41

    Je vais essayer, merci !
    Arthuragon
    Arthuragon
    MasculinAge : 26Messages : 61

    Jeu 11 Avr 2013 - 22:48

    Merci
    November-PoWa
    November-PoWa
    FémininAge : 28Messages : 16

    Jeu 18 Avr 2013 - 21:02

    mERCI
    Asio
    Asio
    FémininAge : 29Messages : 34

    Sam 20 Avr 2013 - 12:36

    Merci ^^



    [Html & CSS] Personnaliser vos titre de forum/catégorie Sanstitre6wx
    Hwan-Leo Flores
    Hwan-Leo Flores
    FémininAge : 31Messages : 275

    Sam 20 Avr 2013 - 14:31

    meurci



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


      La date/heure actuelle est Ven 13 Déc 2024 - 21:49