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 : -20%
(Adhérents Fnac) Enceinte Bluetooth Marshall ...
Voir le deal
199.99 €

    [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 7 657955SignatureSuicopie
    Sui' Art's
    Noob's
    Noob's
    MasculinAge : 29Messages : 129

    Lun 24 Fév 2014 - 1:19

    Merciii !! Sio'
    W' Wakune
    W' Wakune
    FémininAge : 25Messages : 11

    Sam 1 Mar 2014 - 16:09

    Merci ! x3
    Anonymous
    Invité

    Jeu 6 Mar 2014 - 8:35

    Merci :)
    Angy Salvatore
    Angy Salvatore
    FémininAge : 28Messages : 28

    Ven 7 Mar 2014 - 22:37

    Merci *.*
    melimêlo
    melimêlo
    FémininAge : 31Messages : 25

    Sam 8 Mar 2014 - 17:58

    Merci pour ce code ! ça m'intéresse ! Je vais le mettre.
    SvenO
    SvenO
    MasculinAge : 30Messages : 78

    Mar 11 Mar 2014 - 14:38

    Merci !



    [Html & CSS] Personnaliser vos titre de forum/catégorie - Page 7 703037Bann
    Derek Lafleur
    Derek Lafleur
    MasculinAge : 48Messages : 30

    Dim 16 Mar 2014 - 17:58

    up
    Tatia38
    Tatia38
    FémininAge : 34Messages : 316

    Mer 19 Mar 2014 - 16:44

    merci
    NathanaelSane
    NathanaelSane
    FémininAge : 30Messages : 73

    Mar 8 Avr 2014 - 16:37

    merci Wink
    avatar
    Abate.7
    MasculinAge : 28Messages : 67

    Ven 11 Avr 2014 - 16:26

    merci
    Blob
    Blob
    MasculinAge : 31Messages : 23

    Sam 12 Avr 2014 - 11:02

    Merci d'avoir posté ce tuto' !
    MARLEY SMITH.
    MARLEY SMITH.
    FémininAge : 30Messages : 156

    Sam 19 Avr 2014 - 16:35

    Merci pour le tuto Very Happy
    l'intruse
    l'intruse
    FémininAge : 29Messages : 46

    Mar 29 Avr 2014 - 21:02

    Merci beaucoup!! Very Happy
    Kinjiro
    Kinjiro
    MasculinAge : 25Messages : 80

    Mer 30 Avr 2014 - 16:51

    Merci ^^



    [Html & CSS] Personnaliser vos titre de forum/catégorie - Page 7 Signau11
    TheHG
    TheHG
    FémininAge : 29Messages : 52

    Ven 9 Mai 2014 - 2:26

    Merci !
    avatar
    Nardco
    MasculinAge : 63Messages : 82

    Ven 9 Mai 2014 - 8:46

    Merci
    avatar
    Epoxy
    MasculinAge : 28Messages : 14

    Ven 16 Mai 2014 - 0:18

    merci
    avatar
    LoloWorld
    MasculinAge : 42Messages : 30

    Ven 16 Mai 2014 - 1:06

    merci je vais tester
    artic marteen
    artic marteen
    FémininAge : 31Messages : 22

    Ven 16 Mai 2014 - 14:57

    MERCIII



    Words are flying out like endless rain into a paper cup, they slither while they pass, they slip away across the universe. Pools of sorrow, waves of joy are drifting through my open mind, possessing and caressing me.   SEE YOU AT THE BITTER END. ytb
    Kame-Chan
    Kame-Chan
    FémininAge : 33Messages : 53

    Mer 21 Mai 2014 - 23:29

    l'idée et sympa , merci
    Jona'
    Jona'
    MasculinAge : 25Messages : 65

    Mer 4 Juin 2014 - 18:45

    Thanks



    [Html & CSS] Personnaliser vos titre de forum/catégorie - Page 7 292891SIGNATUREIrumaNekoGirl
    avatar
    LeePark
    MasculinAge : 28Messages : 2

    Jeu 5 Juin 2014 - 4:17

    Merci
    alex24d
    alex24d
    FémininAge : 36Messages : 95

    Dim 8 Juin 2014 - 17:48

    merki
    Genocider
    Genocider
    MasculinAge : 25Messages : 35

    Jeu 12 Juin 2014 - 2:16

    Thanks o/
    LinaK
    LinaK
    FémininAge : 33Messages : 53

    Ven 13 Juin 2014 - 22:45

    merci ^^



    [Html & CSS] Personnaliser vos titre de forum/catégorie - Page 7 J9ko

    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 14:09