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 à ne pas rater :
Cartes Pokémon EV8.5 : coffret dresseur d’élite ETB Évolutions ...
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."
    Offrande
    Offrande
    FémininAge : 33Messages : 194

    Mer 1 Avr 2015 - 6:05

    Merci beaucoup! C'est tout à fait ce que je rechercher (:
    FeliceFelicis
    FeliceFelicis
    FémininAge : 34Messages : 89

    Jeu 2 Avr 2015 - 18:57

    Intéressant :)
    Junichi Kudo
    Junichi Kudo
    MasculinAge : 28Messages : 80

    Dim 12 Avr 2015 - 20:39

    Merci pour le tuto !
    Zibeline
    Zibeline
    FémininAge : 39Messages : 84

    Mer 15 Avr 2015 - 11:12

    Merci pour le tuto :kdo:
    Littlelittle
    Littlelittle
    FémininAge : 39Messages : 52

    Lun 20 Avr 2015 - 18:35

    Merci ! **



    Images en haut et en bas des catégories / de la PA - Page 6 Tumblr_inline_mz9sdyTDtj1s2c2nz

    << A little thing like another >>
    sandcreations
    sandcreations
    FémininAge : 53Messages : 20

    Mar 21 Avr 2015 - 19:57

    Merci :)
    Amasis
    Amasis
    FémininAge : 51Messages : 307

    Mer 6 Mai 2015 - 17:32

    Merci beaucoup pour ce tuto! Very Happy
    avatar
    Lupa
    FémininAge : 28Messages : 183

    Jeu 7 Mai 2015 - 1:16

    Merci <3



    To die would be an awfully big adventure... ~ Peter Pan, James M. Berrie.
    Aeeklez
    Aeeklez
    FémininAge : 33Messages : 37

    Mar 12 Mai 2015 - 1:38

    Merci \o
    Wavy
    Wavy
    FémininAge : 23Messages : 39

    Mar 19 Mai 2015 - 19:01

    Mercccciii :3
    pinkwinee
    pinkwinee
    FémininAge : 30Messages : 44

    Mar 19 Mai 2015 - 19:15

    Mircii Very Happy
    Nerria
    Nerria
    FémininAge : 27Messages : 44

    Lun 25 Mai 2015 - 15:00

    Merci beaucoup pour le partage !
    Ravanil
    Ravanil
    FémininAge : 31Messages : 11

    Ven 12 Juin 2015 - 0:29

    merci :)
    Hayate747
    Hayate747
    MasculinAge : 35Messages : 196

    Dim 14 Juin 2015 - 21:09

    Merci ! Wink
    Treasury.
    Treasury.
    FémininAge : 26Messages : 28

    Lun 6 Juil 2015 - 12:23

    Merci !
    Micaiah
    Micaiah
    FémininAge : 28Messages : 2

    Dim 12 Juil 2015 - 18:31

    Merci Very Happy
    Jay-89
    Jay-89
    FémininAge : 35Messages : 93

    Lun 27 Juil 2015 - 14:28

    Merci !
    layna
    layna
    FémininAge : 32Messages : 69

    Mar 28 Juil 2015 - 16:07

    Merci
    Haru Kami-Sama
    Haru Kami-Sama
    FémininAge : 28Messages : 24

    Sam 1 Aoû 2015 - 18:51

    Merci, c'est plus ou moins ce que je cherchais. ^^
    Emi.
    Emi.
    FémininAge : 33Messages : 83

    Dim 9 Aoû 2015 - 22:21

    merci beaucoup pour ce tuto Very Happy
    Anonymous
    Invité

    Lun 10 Aoû 2015 - 9:44

    Merci !!! (≧∇≦)/
    Laakoh
    Laakoh
    FémininAge : 34Messages : 41

    Mar 11 Aoû 2015 - 18:06

    merci :love:
    Kripterya
    Kripterya
    FémininAge : 38Messages : 98

    Ven 14 Aoû 2015 - 4:41

    merci :3
    Jyne
    Jyne
    FémininAge : 58Messages : 34

    Mar 18 Aoû 2015 - 13:56

    merci !!
    catinaphone
    catinaphone
    FémininAge : 32Messages : 93

    Dim 23 Aoû 2015 - 15:32

    Classe, merci !
    Contenu sponsorisé


      La date/heure actuelle est Ven 13 Déc 2024 - 16:44