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 : -27%
-27% sur la machine à café Expresso ...
Voir le deal
399.99 €

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

    Capouccino
    Capouccino
    FémininAge : 26Messages : 204

    Mer 6 Nov 2013 - 16:19


    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."
    Neva
    Neva
    FémininAge : 33Messages : 18565

    Sam 9 Nov 2013 - 18:09

    Merci pour le tuto ! =D
    Je me suis permis de rajouter les balise hide habituelles. Si elles te gênent vraiment, on peut les retirer vu que ça reste ton tuto de toute façon

    Pour information pour les gens passants par ici, il y a une version différente de ce tuto ici : https://www.never-utopia.com/t36119-template-css-un-corps-categorie
    Et n'oubliez pas que les questions doivent être posées ici : https://www.never-utopia.com/f52-avec-un-tutoriel (on ne peut pas suivre les réponses directement sur le tutoriel correctement vu tous les gens qui y postent) :)



     
    Capouccino
    Capouccino
    FémininAge : 26Messages : 204

    Dim 10 Nov 2013 - 19:56

    Merci, Neva ^^ Je les avais oubliées x)



    "Espérer l'inespérable c'est croire en l'impossible."
    Elorin
    Elorin
    FémininAge : 32Messages : 19

    Dim 10 Nov 2013 - 20:11

    Merciiiii ♥
    fregadeth
    fregadeth
    MasculinAge : 47Messages : 80

    Lun 11 Nov 2013 - 11:26

    Merci :)
    Natsuya Gaïaguard
    Natsuya Gaïaguard
    FémininAge : 34Messages : 144

    Lun 11 Nov 2013 - 13:39

    merci ^^



    Images en haut et en bas des catégories / de la PA Signa10
    Depp
    Depp
    FémininAge : 33Messages : 301

    Lun 11 Nov 2013 - 16:44

    Merci :)



    Images en haut et en bas des catégories / de la PA Tumblr_nenygwIlcz1s4u464o1_500
    avatar
    TATACARO13
    FémininAge : 49Messages : 80

    Lun 11 Nov 2013 - 17:12

    MERCI



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

    Images en haut et en bas des catégories / de la PA 381658signatureBAU
    Siloë
    Siloë
    FémininAge : 35Messages : 59

    Mar 12 Nov 2013 - 21:27

    Merci =)
    aFlametGirl
    aFlametGirl
    FémininAge : 33Messages : 39

    Sam 16 Nov 2013 - 19:17

    Bonne idée de tuto, merci !



    최민호
    Images en haut et en bas des catégories / de la PA 452404tumblrln2t64RPtJ1qdn2tro15001
    Geniustyx
    Geniustyx
    FémininAge : 26Messages : 31

    Dim 1 Déc 2013 - 16:24

    Merci :DD
    Brioche
    Brioche
    FémininAge : 24Messages : 64

    Jeu 19 Déc 2013 - 15:42

    Merci pour ce tuto !
    Hamnesik
    Hamnesik
    FémininAge : 26Messages : 12

    Jeu 19 Déc 2013 - 20:48

    Merci
    Whitemoon
    Whitemoon
    FémininAge : 24Messages : 695

    Jeu 19 Déc 2013 - 21:00

    Merci !!!



    Images en haut et en bas des catégories / de la PA Kit_si10
    Honey
    Honey
    FémininAge : 33Messages : 57

    Sam 21 Déc 2013 - 15:16

    Merci  :hug: 
    Bambi's logic
    Bambi's logic
    FémininAge : 28Messages : 25

    Dim 22 Déc 2013 - 10:57

    Merci (:
    Angie Harkness
    Angie Harkness
    FémininAge : 41Messages : 725

    Mar 24 Déc 2013 - 1:14

    bien je vais peut-être enfin savoir ^^ merci pour le tuto^^
    Nyan-cat
    Nyan-cat
    FémininAge : 26Messages : 326

    Sam 28 Déc 2013 - 10:27

    merci 8D



    Images en haut et en bas des catégories / de la PA Nyan_cat_in_portals_by_ds_dna-d56j8yb
    Anonymous
    Invité

    Mer 1 Jan 2014 - 17:15

    Exactement ce que je cherchais ! Merci infiniment !
    Everdeen
    Everdeen
    FémininAge : 30Messages : 36

    Ven 3 Jan 2014 - 17:24

    Merci beaucoup *.*



    Images en haut et en bas des catégories / de la PA Anastasia
    Airore
    Airore
    FémininAge : 25Messages : 132

    Dim 5 Jan 2014 - 0:07

    merci !
    Ju' 2
    Ju' 2
    FémininAge : 26Messages : 14

    Sam 11 Jan 2014 - 18:08

    Merci !!
    damon w salvatore
    damon w salvatore
    FémininAge : 36Messages : 109

    Lun 13 Jan 2014 - 7:24

    merci
    Snape.
    Snape.
    FémininAge : 27Messages : 55

    Lun 13 Jan 2014 - 14:01

    Meeerci



    Images en haut et en bas des catégories / de la PA Tumblr_mqz0udGEEI1sx2peuo4_250Images en haut et en bas des catégories / de la PA Tumblr_mqz0udGEEI1sx2peuo6_250
    louha
    louha
    FémininAge : 37Messages : 219

    Sam 18 Jan 2014 - 0:07

    Merci
    Contenu sponsorisé


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