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.

-20%
Le deal à ne pas rater :
Drone Dji DJI Mini 4K (EU)
239 € 299 €
Voir le deal

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

    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    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


    Si vous avez des problèmes avec ce LS, venez poster ici.
    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



    sign
    Undomiel
    Undomiel
    FémininAge : 40Messages : 63

    Dim 30 Jan 2011 - 16:01

    Super :) je l'attend avec ''impatience''... je vais tacher de trouver une autre solution en attendant, je vais d'ailleurs poster ma premiere demande d'aide à partir d'un code :).



    footer - Un "Footer" (img bas de page) sur votre Forum - Page 2 Signat19
    ~ɷ̰~ Le chant du cygne est une mélodie que murmure les esprits au crepuscule de nos vies ~ɷ̰~
    Linker22~
    Linker22~
    MasculinAge : 26Messages : 215

    Jeu 21 Avr 2011 - 11:27

    : /

    Je n'ai pas compris où placé la Division dans la Templat...
    Help



    footer - Un "Footer" (img bas de page) sur votre Forum - Page 2 896610SignLinker22
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Jeu 21 Avr 2011 - 12:56

    T'as une autre solution sans toucher aux templates ^^

    Code:
    #page-footer
    {
    width: 800px;
    height: 200px;
    background: url(adresse.jpg) top center no-repeat;
    }

    A mettre dans le css en remplaçant pas tes dimensions et l'adresse de ton image de fond Wink



    sign
    Linker22~
    Linker22~
    MasculinAge : 26Messages : 215

    Jeu 21 Avr 2011 - 14:15

    Merci ! Et pour les barres défilante de pub ?



    footer - Un "Footer" (img bas de page) sur votre Forum - Page 2 896610SignLinker22
    Kiowa
    Kiowa
    FémininAge : 35Messages : 220

    Mer 3 Aoû 2011 - 15:51

    Bonjour,

    alors voilà j'ai mis le footer malheureusement, celui-ci reste en millieu de forum et ne veux pas descendre dans le bas

    le forum : http://kiowa-sokio.keuf.net/
    Sysy
    Sysy
    FémininAge : 31Messages : 131

    Dim 2 Oct 2011 - 14:18

    J'ai un problème ! je n'arrive pas à faire que mon footer soit correctement placé, en fait, en bas et sur les côtés, il y a un espace , comment l'enlever svp ?
    Roule_Aspara
    Roule_Aspara
    MasculinAge : 28Messages : 255

    Ven 11 Nov 2011 - 21:28

    Je me permets de faire remonter le sujet parce que j'ai le même problème même après avoir touché au padding... Je vois pas où je suis en train de me planter, l'espace (bottom) est toujours là scratch



    footer - Un "Footer" (img bas de page) sur votre Forum - Page 2 Onfire[/center]
    Ayael
    Ayael
    FémininAge : 29Messages : 598

    Mer 29 Fév 2012 - 14:29

    Il faudrait peut être mettre à jour ce tutoriel : maintenant il y a deux template overall_footer_begin, overall_footer_end...
    Ravener
    Ravener
    FémininAge : 33Messages : 193

    Mar 10 Avr 2012 - 23:35

    Merci pour ce tuto. J'essaye présentement de l'adapter pour en faire un fond en haut de page. Ce serait bien de l'expliquer aussi =)



    footer - Un "Footer" (img bas de page) sur votre Forum - Page 2 Ravenersign
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Mer 11 Avr 2012 - 0:05

    Ca a été fait ici, mais c'est dans les tutoriels photoshop car à la base c'est la conception de l'image, c'est juste que j'explique comment la coder également ^^



    sign
    Ravener
    Ravener
    FémininAge : 33Messages : 193

    Mer 11 Avr 2012 - 2:04

    Oui je connais ce truc depuis longtemps et l'utilise depuis quelques années, mais je veux être capable de mettre un fond en arrière plutôt que de garder la même couleur terne tout le temps, du coup jouer un peu dans les templates pour le placer là rend la chose possible. C'est juste qu'on doit trouver où le placer et jour avec le reste des codes par après XD



    footer - Un "Footer" (img bas de page) sur votre Forum - Page 2 Ravenersign
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Mer 11 Avr 2012 - 2:48

    Avec plusieurs fonds comme sur N-U ? C'est du CSS3, je posterais l'astuce demain si j'ai un moment^^



    sign
    Sandra2912
    Sandra2912
    FémininAge : 45Messages : 23

    Dim 8 Juil 2012 - 19:12

    merci
    Kabrina Lestrange
    Kabrina Lestrange
    FémininAge : 36Messages : 71

    Lun 16 Juil 2012 - 6:50

    Hello!

    J'ai une petite question, dans mes templates j'ai deux overall_footer. J'en ai un qui se nomme overall_footer_began et l'autre overall_footer_end. Je me trouve à le mettre dans lequel des deux exactement? XD

    Merci d'avance!!
    Saphira
    Saphira
    FémininAge : 28Messages : 72

    Lun 16 Juil 2012 - 10:46

    Super, merci =)
    LouGreen
    LouGreen
    FémininAge : 41Messages : 48

    Lun 16 Juil 2012 - 12:07

    @ Kabrina : généralement c'est dans le begin qu'on met les codes, le end c'est pour les crédits (ceux de forumactif par ex si tu es dessus).



    footer - Un "Footer" (img bas de page) sur votre Forum - Page 2 Tumblrlxvri03wlq1qzl05m

    Kabrina Lestrange
    Kabrina Lestrange
    FémininAge : 36Messages : 71

    Lun 16 Juil 2012 - 14:04

    Parfait!! Merci
    Oxalyde
    Oxalyde
    FémininAge : 29Messages : 68

    Sam 25 Aoû 2012 - 12:09

    Bonjour (:

    Déjà merci du partage pour ce footer, je cherchais justement comment faire ^^
    Mais, comme je suis nullissime en code bah, évidemment, je m'attendais à rencontrer un pépin... ê_e
    Je ne trouve pas les codes que tu demandes de chercher pour mettre ton autre code entre... :/
    Comme dit un peu plus haut, je suis aller dans la template overall_footer_begin

    Voici ma template non modifiée :
    Code:

    <!-- BEGIN html_validation -->
    <div>
        <div>
            <table>
                <tbody>
                    <tr>
                        <td>
    <!-- END html_validation -->
                        </td>
                        <td valign="top" width="{C3SIZE}">
                        <div id="{ID_RIGHT}">
                            <!-- BEGIN giefmod_index2 -->
                            {giefmod_index2.MODVAR}
                            <!-- BEGIN saut -->
                            <div style="height: {SPACE_ROW}px"></div>
                            <!-- END saut -->
                            <!-- END giefmod_index2 -->
                        </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <!-- close div id="page-body" -->
    <div id="page-footer">
        <div align="center">
            <div class="gen">
    <!-- BEGIN html_validation -->
            </div>
        </div>
    </div>
    <!-- END html_validation -->

    Merci d'avance (:



    "Nous travestissons nos faiblesses en force. Nos frêles corps sont nos armures"
    I.P
    I.P
    FémininAge : 31Messages : 19

    Jeu 27 Déc 2012 - 13:36

    Bonjour, merci pour ce tutoriel tout d'abord.
    Voila j'ai un petit soucis je ne trouve pas le template overall_footer. J'ai overall_fotter_begin ou overall_fotter_end. Dans le end je ne trouve pas l'emplacement où il faut placé le code.
    Voici le template:
    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>

    <!-- BEGIN switch_facebook_login -->
    <div id="fb-root"></div>
    <script type="text/javascript">
    //<![CDATA[
    FB.init({appId: '{switch_facebook_login.FACEBOOK_APP_ID}', status: true, cookie: true, xfbml: true, oauth: true});
    //]]>
    </script>
    <!-- END switch_facebook_login -->

    <!-- BEGIN switch_facebook_logout_TMP -->
    <script type="text/javascript">
    //<![CDATA[
    FB.Event.subscribe('auth.logout', function(response) {
       if ($('a#logout'))
       {
          var lien_redir = $('a#logout').attr('href');

          if ($('a#logout').attr('href') && $('a#logout').attr('href') != '')
          {
             document.location.href = 'http://{switch_facebook_logout.SERVER_NAME}/' + lien_redir;
          }
       }
    });

    $(document).ready( function() {
       $('a#logout').click( function() {
          FB.logout();
       } );
    });
    //]]>
    </script>
    <!-- END switch_facebook_logout_TMP -->

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

    </body>
    </html>

    Merci Razz
    Kriisten25
    Kriisten25
    FémininAge : 31Messages : 190

    Sam 12 Jan 2013 - 14:12

    Merci beaucoup :) !!!



    ∞ LONDON & TEAM ROBSTEN ♥.
    • 0n prend de mauvaises habitudes en parlant quotidiennement au gens, on s'attache vite sans s'apercevoir que l'on va tomber de haut & souffrir. Quand la personne vous laisse tomber, on se rend compte à quel point elle est importante & on regrette de s'être attaché. Au final; ce ne sont que regrets & souffrance que l'on récolte. 0n a beau dire ce que l'on veut, l'attachement est une absurdité, une incitation à la douleur. hellsangels.
    Chucky'
    Chucky'
    MasculinAge : 27Messages : 80

    Lun 21 Jan 2013 - 22:26

    merci



    footer - Un "Footer" (img bas de page) sur votre Forum - Page 2 1370524847-cooltext1062715975
    Dream Land School
    Dream Land School
    FémininAge : 36Messages : 101

    Sam 2 Fév 2013 - 18:51

    Merci ^^
    Hancock D. Nirah
    Hancock D. Nirah
    FémininAge : 25Messages : 20

    Ven 22 Fév 2013 - 12:48

    0.o, c'est exactement ce que je cherchais depuis le début. A chaque fois j'était en galère avec mes codes, mais grâce à ce tuto' et à tes explication, j'ai tout compris Very Happy

    Merci à toi ! ~♥



    footer - Un "Footer" (img bas de page) sur votre Forum - Page 2 Sans_t41
    la-loca
    la-loca
    FémininAge : 32Messages : 86

    Sam 20 Avr 2013 - 14:28

    Merci pour ce tuto!!!

    cheers cheers cheers



    footer - Un "Footer" (img bas de page) sur votre Forum - Page 2 13031910
    Miki1
    Miki1
    FémininAge : 33Messages : 303

    Mar 7 Mai 2013 - 15:00

    Pour ma part je n'ai aucune image qui est apparue Oo
    Je ne sais pas ce qui s'est passé mdr
    Je devrais peut-être attendre Sparrow finalement x)



    footer - Un "Footer" (img bas de page) sur votre Forum - Page 2 716106sign
    Contenu sponsorisé


      La date/heure actuelle est Ven 22 Nov 2024 - 13:42