AccueilFAQRechercherMembresGroupesS'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.


    Un "Footer" (img bas de page) sur votre Forum

    Partagez
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Mer 2 Sep 2009 - 21:28

    Rappel du premier message :



    La question revenant relativement souvent, j'explique ici comment placer une image de bas de page sur vos forum.

    Allez dans le panneau > Affichage > Templates > "overall_footer_end"

    Vous devez placer le code suivant (donnez à l'id le nom que vous voulez) :
    Code:
    <div id="newbottom">
    </div>

    Juste avant ce bout de code :
    Code:
    <script type="text/javascript">
    //<![CDATA[
       fa_endpage();
    //]]>
    </script>
    </body>
    </html>

    (à la fin du templates donc.)


    Une fois que vous avez cela, rien n'apparaitra sur votre forum, normal, vous avez juste signalé une division dans cet endroit, à vous de lui donner la forme voulue (taille, fond, etc...).
    Pour cela, il vous faut aller dans :
    Affichage > Image & Couleurs > Couleurs > Feuille CSS


    Puisque vous avez crée une "div" avec un "id", il vous faudra commencer votre code par "#".
    Code:
    #newbottom
    {
    clear: both;
    margin: auto;
    width: 100%;
    background-image: url(http://host.image.files.free.fr/host/4a04c4821c594back-bottom.png);
    background-repeat: no-repeat;
    background-position: center;
    height: 500px;
    }

    Explications :
    clear: both => enlève de manière sûre les mises en forme de division précédentes (surtout lorsqu'il y a des "float" (flottement) à droite ou à gauche).
    margin: auto : centre l'image si elle ne fait pas toute la largeur
    width: 100% : largeur du bloc, si l'image ne prend pas toute la largeur, vous pouvez diminuez le width en % ou mettre une largeur en px.
    background-image : c'est l'adresse de votre image de fond
    background-repeat : la répétition du fond, ici elle ne se répètera pas, si vous voulez qu'elle se répète enlevez simplement la ligne, mais pour une image de pied de page c'est assez rare...
    background-position: la position du fond, ici au centre
    height: sa hauteur en pixel, ici 500px car j'ai pris en exemple les codes de N-U pour le thème actuel


    Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^


    Dernière édition par Sparrow-style le Jeu 28 Mar 2013 - 16:12, édité 1 fois



    avatar
    Ravener
    FémininAge : 26Messages : 193

    le Lun 13 Mai 2013 - 8:35

    Merci beaucoup, encore <3



    avatar
    Belosnezhka
    FémininAge : 19Messages : 283

    le Mar 14 Mai 2013 - 21:53

    THAAAANKS
    avatar
    Meilia
    FémininAge : 23Messages : 92

    le Dim 16 Juin 2013 - 17:12

    Coucou ! Merci pour ce tuto, pour ceux qui aurait deux overall footer, il faut prendre le overall footer end, et copier ce code ci et ça ira ^^:

    Code:
    <!-- BEGIN html_validation -->
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <body>
    <table>
       <tr>
          <td>
             <div>
                <div>
                   <div>
    <!-- END html_validation -->
                   </div>
                </div>
                <!-- BEGIN switch_footer_links -->
                <div align="center">
                   <div class="gen">
                      <!-- BEGIN footer_link -->
                         <!-- BEGIN switch_separator --> |&nbsp;<!-- END switch_separator -->
                         <a name="bottom" class="copyright" href="{switch_footer_links.footer_link.U_FOOTER_LINK_HREF}" rel="{switch_footer_links.footer_link.FOOTER_LINK_REL}" target="{switch_footer_links.footer_link.FOOTER_LINK_TARGET}" title="{switch_footer_links.footer_link.L_FOOTER_LINK_TITLE}">{switch_footer_links.footer_link.L_FOOTER_LINK_TEXT}</a>
                      <!-- END footer_link -->
                   </div>
                </div>
                <!-- END switch_footer_links -->
             </div>
             {PROTECT_FOOTER}
          </td>
       </tr>
    </table>

    <div id="newbottom">
    </div>
    <script type="text/javascript">
    //<![CDATA[
       fa_endpage();
    //]]>
    </script>

    </body>
    </html>
    avatar
    Sephy
    FémininAge : 23Messages : 134

    le Dim 16 Juin 2013 - 18:54

    Alleluia! Meilia tu es ma sauveuse! 8D
    Et merci Sparrow pour cette astuce! =D
    avatar
    Meilia
    FémininAge : 23Messages : 92

    le Lun 17 Juin 2013 - 16:18

    Derien ^^ !
    avatar
    Zorume
    FémininAge : 20Messages : 84

    le Mer 7 Mai 2014 - 14:04

    Merci beaucoup pour ce tuto ^.^)
    avatar
    Hancok
    FémininAge : 33Messages : 977

    le Mer 25 Juin 2014 - 8:50

    Oh super, j'ai toujours voulu savoir comment faire depuis que j'ai vue ça sur un forum.
    Grand merci  :love: :captain: 





    avatar
    Halloween
    FémininAge : 23Messages : 9741

    le Dim 3 Aoû 2014 - 14:25

    Merci !



    Je déménage sur NMD o/
    avatar
    Arpège
    FémininAge : 18Messages : 106

    le Lun 11 Aoû 2014 - 13:24

    Merci !
    C'est très pratique




    Writers World commence à ouvrir !
    avatar
    Kahlan
    FémininAge : 30Messages : 371

    le Ven 24 Oct 2014 - 16:35

    Merci beaucoup pour cette astuce !
    avatar
    Reliane
    MasculinAge : 24Messages : 31

    le Mar 10 Fév 2015 - 11:35

    Merci ! j'essaye trop mais j'aime tout ahah
    avatar
    Yuki Kaga
    FémininAge : 17Messages : 261

    le Ven 20 Mar 2015 - 22:20

    Merci ♥
    avatar
    Kovu
    FémininAge : 16Messages : 251

    le Jeu 3 Mar 2016 - 5:14

    merci !



    avatar
    Kelalin
    FémininAge : 24Messages : 1526

    le Jeu 3 Mar 2016 - 17:37

    Merci pour le partage !
    avatar
    Heathen Hammer
    MasculinAge : 28Messages : 36

    le Sam 24 Sep 2016 - 16:50

    Ça va sembler très, très con, mais sous templates > general

    je vois overall footer end et begin mais pas juste overall footer

    donc je ne vois pas la partie mentionner voir capture d'écran

    Je sais pas si t'as une suggestion ?
    avatar
    Onyx
    FémininAge : 23Messages : 2945

    le Ven 30 Sep 2016 - 10:09

    Salut!

    Le premier post a été mis à jour pour régler le problème des 2 overhall_footer, cela devrait être clair maintenant Wink



    avatar
    Dariel
    FémininAge : 47Messages : 44

    le Mar 8 Nov 2016 - 22:36

    cheers J'ai pris, merci.

    :cow:



    C'est la vie Invité ! Pas le paradis.
    avatar
    Géranium
    FémininAge : 17Messages : 56

    le Jeu 29 Déc 2016 - 16:56

    MERCI ! <3
    avatar
    allen walker
    FémininAge : 20Messages : 22

    le Jeu 23 Fév 2017 - 13:28

    Super code ! Cela fait vraiment bien, Bravo et merci. :hug:
    avatar
    alsayed
    MasculinAge : 43Messages : 75

    le Sam 27 Mai 2017 - 11:44

    Merci
    avatar
    Kizuro hoki
    MasculinAge : 21Messages : 38

    le Dim 18 Juin 2017 - 23:54

    Excellent !
    Contenu sponsorisé


      La date/heure actuelle est Ven 18 Aoû 2017 - 1:21