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.

-38%
Le deal à ne pas rater :
Promo Dyson : l’aspirateur Dyson V15 Detect à 499€ au lieu de ...
499 € 799 €
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."
    Eau de Ré
    Eau de Ré
    FémininAge : 32Messages : 2

    Jeu 20 Mar 2014 - 19:53

    Je vais tester ça, merci !
    Ibtissem.
    Ibtissem.
    FémininAge : 27Messages : 22

    Dim 23 Mar 2014 - 9:29

    Merci !
    Milkshake
    Milkshake
    FémininAge : 25Messages : 29

    Dim 23 Mar 2014 - 16:09

    Merci pour ce tuto
    Narcisse
    Narcisse
    FémininAge : 109Messages : 21

    Lun 24 Mar 2014 - 21:33

    Merci du partage. ♥
    Nîniel
    Nîniel
    FémininAge : 29Messages : 70

    Mar 25 Mar 2014 - 10:42

    Merci beaucoup



    Images en haut et en bas des catégories / de la PA - Page 3 1384099300-nini-nu-signa
    ☮ mistletoe
    ☮ mistletoe
    FémininAge : 26Messages : 28

    Sam 29 Mar 2014 - 17:10

    merci Very Happy
    Lindaóma
    Lindaóma
    FémininAge : 26Messages : 150

    Dim 30 Mar 2014 - 18:06

    Merci beaucoup pour ce tuto, ça va m'être bien utile ^^



    Images en haut et en bas des catégories / de la PA - Page 3 Signa_10
    arturb
    arturb
    MasculinAge : 24Messages : 48

    Mar 1 Avr 2014 - 21:14

    Merci Wink
    Armie
    Armie
    FémininAge : 34Messages : 506

    Jeu 3 Avr 2014 - 17:16

    Merci pour ce tuto. Very Happy
    Magi
    Magi
    FémininAge : 30Messages : 11

    Jeu 3 Avr 2014 - 20:13

    Merci ^^
    Amaliiah
    Amaliiah
    FémininAge : 25Messages : 50

    Sam 5 Avr 2014 - 13:17

    Merci Very Happy
    CoinCoinGirl
    CoinCoinGirl
    FémininAge : 30Messages : 30

    Dim 13 Avr 2014 - 15:18

    Merciiii !
    Je cherche un tuto comme ça, ce que j'ai fait moi bug D:
    avatar
    Hop80
    MasculinAge : 35Messages : 138

    Mar 15 Avr 2014 - 17:24

    j'adore je veux voir merci
    Stiou
    Stiou
    FémininAge : 30Messages : 42

    Mar 15 Avr 2014 - 20:31

    Merci <3



    Images en haut et en bas des catégories / de la PA - Page 3 Dany12
    Liberty Grim
    Liberty Grim
    FémininAge : 26Messages : 128

    Mer 16 Avr 2014 - 22:02

    Merci beaucoup Very Happy
    missvodkadems
    missvodkadems
    FémininAge : 34Messages : 114

    Mer 16 Avr 2014 - 22:29

    Merciii



    Images en haut et en bas des catégories / de la PA - Page 3 Pub10
    Vixinte
    Vixinte
    FémininAge : 26Messages : 90

    Sam 19 Avr 2014 - 21:07

      Merci pour ce tutoriel !
    Allison01
    Allison01
    FémininAge : 40Messages : 225

    Dim 20 Avr 2014 - 1:16

    Merci Very Happy
    [W]endy
    [W]endy
    FémininAge : 34Messages : 117

    Mer 23 Avr 2014 - 12:52

    Merci (:
    Nazack
    Nazack
    FémininAge : 28Messages : 17

    Mer 23 Avr 2014 - 15:36

    Génial, merci! :)
    avatar
    Løve
    MasculinAge : 29Messages : 189

    Mer 23 Avr 2014 - 19:04

    Merci o.
    avatar
    Gedomaru
    FémininAge : 27Messages : 70

    Jeu 1 Mai 2014 - 12:50

    Merci
    Momie
    Momie
    FémininAge : 27Messages : 14

    Ven 2 Mai 2014 - 11:59

    Merci pour ce partage instructif :)



    Images en haut et en bas des catégories / de la PA - Page 3 Emma10
    Seven
    Seven
    FémininAge : 31Messages : 135

    Lun 5 Mai 2014 - 20:58

    Merci beaucoup pour ce partage !
    ass kicker
    ass kicker
    FémininAge : 29Messages : 80

    Lun 5 Mai 2014 - 21:02

    Tout à fait ce que je cherchais, merci beaucoup !



      see you again
      No matter where you are, whether you’re a quarter mile away, or half way around the world … you’ll always be with me. You’ll always be my brother.©️endlesslove
    Contenu sponsorisé


      La date/heure actuelle est Jeu 21 Nov 2024 - 12:16