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.

-20%
Le deal à ne pas rater :
-20% sur le Lot de 2 écrans PC GIGABYTE 27″ LED M27Q
429 € 539 €
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 3 657955SignatureSuicopie
    Sui' Art's
    Titia6128
    Titia6128
    FémininAge : 30Messages : 2

    Jeu 9 Mai 2013 - 17:01

    Merci !
    milloo
    milloo
    FémininAge : 31Messages : 21

    Jeu 9 Mai 2013 - 17:18

    J'adore ! Merci
    tytynono
    tytynono
    MasculinAge : 56Messages : 6

    Sam 11 Mai 2013 - 18:19

    Merci
    Amiko
    Amiko
    FémininAge : 32Messages : 51

    Sam 11 Mai 2013 - 21:35

      Merci !
    Elorri
    Elorri
    FémininAge : 34Messages : 13

    Mer 15 Mai 2013 - 16:38

    Merci!
    Feng.Yi
    Feng.Yi
    FémininAge : 109Messages : 30

    Ven 17 Mai 2013 - 4:26

    Merci!
    Lakxi
    Lakxi
    FémininAge : 31Messages : 40

    Ven 17 Mai 2013 - 18:26

    perfect ! merci
    Cocow'
    Cocow'
    FémininAge : 26Messages : 11

    Sam 18 Mai 2013 - 4:12

    Merci beaucouuup pour ce tutoriel ! Very Happy
    Taylor ♥
    Taylor ♥
    FémininAge : 25Messages : 11

    Sam 18 Mai 2013 - 18:01

    Merci :)
    Haaken
    Haaken
    FémininAge : 30Messages : 43

    Dim 19 Mai 2013 - 20:01

    Merci d'avance =D
    Sephy
    Sephy
    FémininAge : 30Messages : 139

    Mer 22 Mai 2013 - 22:53

    merciii :3
    Dark6nika
    Dark6nika
    FémininAge : 30Messages : 118

    Ven 24 Mai 2013 - 18:59

    Effet très intéressante ! Merci beaucoup !! ;3



    Zooé
    Zooé
    FémininAge : 26Messages : 66

    Sam 25 Mai 2013 - 12:31

    Michi!!
    Elewy
    Elewy
    FémininAge : 24Messages : 23

    Sam 25 Mai 2013 - 15:41

    Merci Very Happy



    [Html & CSS] Personnaliser vos titre de forum/catégorie - Page 3 Dragon11
    TUC
    TUC
    FémininAge : 36Messages : 103

    Dim 26 Mai 2013 - 19:38

    merci (:



    [Html & CSS] Personnaliser vos titre de forum/catégorie - Page 3 Tumblr_msx9fygOsJ1qlujrso1_250 [Html & CSS] Personnaliser vos titre de forum/catégorie - Page 3 Tumblr_msx9fygOsJ1qlujrso2_250 [Html & CSS] Personnaliser vos titre de forum/catégorie - Page 3 Tumblr_msx9fygOsJ1qlujrso3_250 [Html & CSS] Personnaliser vos titre de forum/catégorie - Page 3 Tumblr_msx9fygOsJ1qlujrso4_250
    Capouccino
    Capouccino
    FémininAge : 26Messages : 204

    Dim 26 Mai 2013 - 21:04

    Merci :3



    "Espérer l'inespérable c'est croire en l'impossible."
    Alaplaya1
    Alaplaya1
    FémininAge : 31Messages : 18

    Dim 26 Mai 2013 - 21:43

    Merci Very Happy !
    Nezumi
    Nezumi
    MasculinAge : 33Messages : 16

    Jeu 30 Mai 2013 - 13:05

    merci :)
    Jay-89
    Jay-89
    FémininAge : 35Messages : 93

    Jeu 30 Mai 2013 - 14:05

    Merci !
    [W]endy
    [W]endy
    FémininAge : 33Messages : 117

    Ven 31 Mai 2013 - 23:37

    Merci (:
    Asgardian
    Asgardian
    MasculinAge : 33Messages : 21

    Sam 1 Juin 2013 - 3:53

    merci
    Alphax
    Alphax
    MasculinAge : 28Messages : 52

    Dim 2 Juin 2013 - 14:00

    Très utile merci.



    [Html & CSS] Personnaliser vos titre de forum/catégorie - Page 3 Sans_t10
    Stiou
    Stiou
    FémininAge : 30Messages : 42

    Dim 2 Juin 2013 - 16:32

    J'ai l'impression de passer mon temps à dire merci pour vos super tuto mais ... Merci !



    [Html & CSS] Personnaliser vos titre de forum/catégorie - Page 3 Dany12
    Chocolakato
    Chocolakato
    FémininAge : 33Messages : 837

    Lun 3 Juin 2013 - 21:11

    Merci beaucouuup !



    x_Titia
    x_Titia
    FémininAge : 33Messages : 92

    Mar 4 Juin 2013 - 20:28

    Je vais essayer de mettre ça en place! :) Merci du partage!
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 21:17