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 :
Cartes Pokémon EV8.5 : coffret dresseur ...
Voir le deal

    Images en haut et en bas des catégories / de la PA

    Capouccino
    Capouccino
    FémininAge : 26Messages : 204

    Mer 6 Nov 2013 - 16:19

    Rappel du premier message :


    Difficulté: ●●○○○
    Templates: index_box | index_body
    Images en haut et en bas des catégories / de la PA
    Bonjour, voici donc un tuto qui va nous permettre d'ajouter des images aux en-têtes et aux pieds de catégories ainsi que de la page d'accueil (abrégée PA pour ce tuto)

       I/Des images pour les catégories

    Voici un schéma illustrant le rendu final de cette partie:
    Spoiler:

          A/L'en-tête des catégories

    Tout d'abord, il nous faudra aller dans Templates > index_box et trouver ceci:
    Code:
    <!-- 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} </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 -->
    Maintenant, deux chois s'offrent à nous :
    1. soit nous remplaçons l'intégralité du code ci-dessus par celui-là:
    Code:
    <!-- BEGIN tablehead -->
    <div style="text-align:center; background-position:bottom center; background-image:url('URL DE L'IMAGE');height: Xpx; width:Xpx"><span class="secondarytitle">{catrow.tablehead.L_FORUM}</span></div>
    <table class="forumline" width="Xpx" border="0" cellspacing="1" cellpadding="0">
     <!-- END tablehead -->
    Le height: Xpx indique la hauteur que ferra votre image ; le width:Xpx est la taille des catégories de votre forum (on le retrouve d'ailleurs un peu plus bas dans le code)

    2. soit nous remplaçons le premier code par celui-ci:
    Code:
    <!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
     <tr>
    <td><div class="secondarytitle" style="background-image:url('URL DE L'IMAGE'); background-position:center center">{catrow.tablehead.L_FORUM}</div>
     </tr>
     <!-- END tablehead -->
    Concernant cette deuxième solution, je ne l'ai pas testée.

          B/Le pied des catégories

    Maintenant, cherchons cela:
    Code:
    <!-- BEGIN tablefoot -->
    </table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot -->
    Et ajoutons y ce morceau de code avant img src :
    Code:
    <img src="URL DE L'IMAGE"/>
     &nbsp; II/Des images pour la page d'accueil

    Le rendu de cette partie est le même que pour les catégories sauf qu'il s'applique à la PA.

    D'abord, allons dans Templates > index_body et cherchons le morceau de code suivant:
    Code:
    <!-- BEGIN message_admin_index -->
    <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
       <!-- BEGIN message_admin_titre -->
       <tr>
          <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
       </tr>
       <!-- END message_admin_titre -->
       <!-- BEGIN message_admin_txt -->
       <tr>
          <td class="row1" rowspan="3" align="center" valign="middle">
          <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
          </td>
       </tr>
       <!-- END message_admin_txt -->
    </table>
    <!-- END message_admin_index -->
    Après le " BEGIN message_admin_index " , placez une balise d'image:
    Code:
    <img src="URL DE L'IMAGE"></img>
    Et faites de même avant le " END message_admin_index "


    Voilà ^^


    PS : les titres de catégorie risquerons de ne pas être bien placer au milieu de l'image de background, je ne sais pas comment les replacer...
    PS2 : Si en plus des images de background de vos catégories vous voulez mettre des images en guise de titre de catégorie, je vous conseil de lire ce tuto rédigé par notre bon vieux capitaine =)


    Il faut parfois beaucoup de temps pour écrire un tuto mais dire merci ne prend que 2 secondes :3


    Si vous avez des problèmes avec ce LS, venez poster ici.



    "Espérer l'inespérable c'est croire en l'impossible."
    Geci
    Geci
    FémininAge : 33Messages : 69

    Dim 23 Aoû 2015 - 19:44

    Merci beaucoup ! <3
    Angy38
    Angy38
    FémininAge : 54Messages : 233

    Dim 23 Aoû 2015 - 22:49

    Merci



    Images en haut et en bas des catégories / de la PA - Page 7 Jvie
    MissDream
    MissDream
    FémininAge : 29Messages : 151

    Jeu 3 Sep 2015 - 18:15

    merci pour le tuto



    MissDream
    N'ais pas peur de rêver

    Recommandation
    Lessien
    Lessien
    FémininAge : 42Messages : 163

    Jeu 3 Sep 2015 - 19:03

    Merci pour votre travail !
    melinnus
    melinnus
    FémininAge : 29Messages : 16

    Mer 16 Sep 2015 - 17:17

    Merci à toi ! joli travail Very Happy
    Schnappi
    Schnappi
    FémininAge : 33Messages : 113

    Ven 18 Sep 2015 - 19:00

    merci :)
    fair game
    fair game
    FémininAge : 34Messages : 13

    Dim 27 Sep 2015 - 1:10

    merci!
    Chocolakato
    Chocolakato
    FémininAge : 34Messages : 837

    Sam 10 Oct 2015 - 15:49

    Merci beaucoup !



    Shakespeare
    Shakespeare
    FémininAge : 34Messages : 110

    Lun 19 Oct 2015 - 11:12

    Merci !
    WhiteRaaven
    WhiteRaaven
    FémininAge : 28Messages : 39

    Mar 20 Oct 2015 - 11:01

    merci
    Ifreann
    Ifreann
    FémininAge : 30Messages : 54

    Mar 20 Oct 2015 - 23:38

    Je teste ça, merci !



    Images en haut et en bas des catégories / de la PA - Page 7 Y5kw
    Maya Seiko
    Maya Seiko
    FémininAge : 31Messages : 129

    Mer 4 Nov 2015 - 17:04

    Merci beaucoup à toi ^^
    Neycha
    Neycha
    FémininAge : 31Messages : 58

    Mar 10 Nov 2015 - 11:59

    Merci beaucoup ! :)
    Lilie
    Lilie
    FémininAge : 41Messages : 190

    Sam 21 Nov 2015 - 16:34

    AH ça m'intéresse, merci :)
    Nessaleth
    Nessaleth
    FémininAge : 33Messages : 52

    Ven 25 Déc 2015 - 11:26

    Merci !
    LiitleLiion
    LiitleLiion
    FémininAge : 28Messages : 10

    Mer 30 Déc 2015 - 3:35

    Merci :love:
    Nausicäa Kaer
    Nausicäa Kaer
    FémininAge : 30Messages : 171

    Jeu 31 Déc 2015 - 15:05

    Merci **
    Nezzoon
    Nezzoon
    FémininAge : 25Messages : 66

    Jeu 31 Déc 2015 - 16:44

    Merci
    Mitsuomi73
    Mitsuomi73
    MasculinAge : 32Messages : 42

    Dim 31 Jan 2016 - 16:29

    Merci beaucoup !
    P-Summers
    P-Summers
    FémininAge : 25Messages : 57

    Lun 1 Fév 2016 - 14:40

    Merci !
    Lilynufare
    Lilynufare
    FémininAge : 34Messages : 341

    Lun 1 Fév 2016 - 15:42

    merci :)
    Jessabelle
    Jessabelle
    FémininAge : 30Messages : 110

    Mar 2 Fév 2016 - 23:39

    Merci pour ce code =)
    Yumeki
    Yumeki
    FémininAge : 32Messages : 147

    Mer 3 Fév 2016 - 0:31

    Merci ^^
    Necrolythia
    Necrolythia
    FémininAge : 37Messages : 580

    Jeu 3 Mar 2016 - 12:29

    merci, essayons de voir



    Images en haut et en bas des catégories / de la PA - Page 7 KKEVK8u
    Aya Hanazawa
    Aya Hanazawa
    FémininAge : 33Messages : 72

    Sam 5 Mar 2016 - 12:35

    c'est sympa, merci ^^
    Contenu sponsorisé


      La date/heure actuelle est Ven 13 Déc 2024 - 17:09