Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

AwesomeBB : comment faire un joli footer?

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu AwesomeBB : comment faire un joli footer?

Message par Zepiii le Jeu 1 Nov 2018 - 17:10

Détails techniques

Version du forum : AwesomeBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://zepiiitest.forumactif.com

Description du problème

Bonjour,

Je suis en train de tester AwesomeBB : http://zepiiitest.forumactif.com

J'ai bien compris que la question des widgets n'étaient pas si "simple" à régler avec le responsive... Donc je me pose la question de comment faire pour éventuellement m'en passer.

Une solution serait de mieux utiliser le footer.

Comment réaliser un footer aussi classe que celui de forumactif?



Merci,
Zepiii
avatar

Zepiii
****

Messages : 229
Inscrit(e) le : 25/06/2010

http://forum-generationmobiles.net
Zepiii a été remercié(e) par l'auteur de ce sujet.

Résolu Re: AwesomeBB : comment faire un joli footer?

Message par Zepiii le Dim 4 Nov 2018 - 17:22

UP SVP Smile
avatar

Zepiii
****

Messages : 229
Inscrit(e) le : 25/06/2010

http://forum-generationmobiles.net
Zepiii a été remercié(e) par l'auteur de ce sujet.

Résolu Re: AwesomeBB : comment faire un joli footer?

Message par Zepiii le Mar 6 Nov 2018 - 17:59

UP SVP Smile
avatar

Zepiii
****

Messages : 229
Inscrit(e) le : 25/06/2010

http://forum-generationmobiles.net
Zepiii a été remercié(e) par l'auteur de ce sujet.

Résolu Re: AwesomeBB : comment faire un joli footer?

Message par Zepiii le Jeu 8 Nov 2018 - 20:14

UP SVP...
avatar

Zepiii
****

Messages : 229
Inscrit(e) le : 25/06/2010

http://forum-generationmobiles.net
Zepiii a été remercié(e) par l'auteur de ce sujet.

Résolu Re: AwesomeBB : comment faire un joli footer?

Message par Walt le Jeu 8 Nov 2018 - 22:19

Bonsoir,

Comme sur toutes les versions de forum Forumactif, le footer est divisé entre deux templates : overall_footer_begin et overall_footer_end

Schématiquement, voici ce que ça donne :



Toute la partie rouge se trouve dans le template overall_footer_begin, toute la partie verte se trouve dans le template overall_footer_end, étant précisé que la partie haute du footer (les statistiques) ne s'affiche que sur l'index.

Donc dans le template overall_footer_begin, l'extrait suivant :
Code:
                <li class="footer-to-top">
                    <a href="#top">
                        <i class="material-icons">arrow_upward</i>
                    </a>
                </li>
                <li class="footer-home">
                    <a class="icon-home" href="{U_INDEX}" accesskey="h">{L_HOME}</a>
                </li>

correspond aux liens vers le haut du forum et vers l'index du forum. Il suffirait donc de faire avec un peu de CSS quatre colonnes (via ces li par exemple), à largeur égale, et avec les liens nécessaires.

Cordialement,
Walt


Dernière édition par Walt le Sam 10 Nov 2018 - 11:22, édité 1 fois
avatar

Walt
Modéractif
Modéractif

Masculin
Messages : 5455
Inscrit(e) le : 08/09/2015

Walt a été remercié(e) par l'auteur de ce sujet.

Résolu Re: AwesomeBB : comment faire un joli footer?

Message par Zepiii le Sam 10 Nov 2018 - 7:15

Bonjour Walt,

Malgré une réponse très claire, je ne pense pas avoir les connaissances pour le faire.

Pourriez-vous pousser un tout petit peu loin l'exemple avec :

Colonne 1
- Item 1
- Item 2

Colonne 2
- Item 1
- Item 2

Colonne 3
- Item 1
- Item 2

Colonne 4
- Item 1
- Item 2

Après, je devrais capable de l'implémenter.

Désolé et merci...
avatar

Zepiii
****

Messages : 229
Inscrit(e) le : 25/06/2010

http://forum-generationmobiles.net
Zepiii a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: AwesomeBB : comment faire un joli footer?

Message par Walt le Sam 10 Nov 2018 - 11:44

Bonjour,

Panneau d'administration  Affichage  Couleurs - Feuille de style CSS

Insérez ce code dans votre feuille de style personnalisé :
Code:
#page-footer .linklist li.footer-column {
    width: 25%;
    margin: 0;
    padding: 0 22px;
}
#page-footer .linklist li.footer-column > a {
    display: block;
    margin-top: 5px;
    margin-left: 0;
}
#page-footer li.footer-right span.gensmall {
  display:none;
}
#page-footer .navbar + .copyright {
  margin-top: 20px;
}

Ensuite, du côté des templates, modifiez le template overall_footer_begin, et situez cet extrait :
Code:
<div id="page-footer">
    <div class="wrap">
        <div class="navbar">
            <ul class="linklist clearfix">
                <li class="footer-to-top">
                    <a href="#top">
                        <i class="material-icons">arrow_upward</i>
                    </a>
                </li>
                <li class="footer-home">
                    <a class="icon-home" href="{U_INDEX}" accesskey="h">{L_HOME}</a>
                </li>
                <li class="rightside">

Remplacez le par :
Code:
<div id="page-footer">
    <div class="wrap">
        <div class="navbar">
            <ul class="linklist clearfix">
                <li class="footer-column">
                  <a class="footer-column-link" href="{U_INDEX}">{L_HOME}</a>
                  <a class="footer-column-link" href="#">Lien n°2</a>
                  <a class="footer-column-link" href="#">Lien n°3</a>
                </li>
                <li class="footer-column">
                  <a class="footer-column-link" href="#">Lien n°4</a>
                  <a class="footer-column-link" href="#">Lien n°5</a>
                  <a class="footer-column-link" href="#">Lien n°6</a>
                </li>
                <li class="footer-column">
                  <a class="footer-column-link" href="#">Lien n°7</a>
                  <a class="footer-column-link" href="#">Lien n°8</a>
                  <a class="footer-column-link" href="#">Lien n°9</a>
                </li>
                <li class="footer-column footer-right">

Enregistrez puis publiez le template. Modifiez ensuite le template overall_footer_end, et situez cet extrait et supprimez-le : (attention il apparait deux fois, lignes 14 et 24)
Code:
<!-- BEGIN switch_separator -->&nbsp;|&nbsp;<!-- END switch_separator -->

Enregistrez et publiez, et vous devriez obtenir ce résultat :



Cordialement,
Walt


Dernière édition par Walt le Sam 10 Nov 2018 - 13:39, édité 1 fois
avatar

Walt
Modéractif
Modéractif

Masculin
Messages : 5455
Inscrit(e) le : 08/09/2015

Walt a été remercié(e) par l'auteur de ce sujet.

Résolu Re: AwesomeBB : comment faire un joli footer?

Message par *Splash* le Sam 10 Nov 2018 - 13:14

Hi,
@Walt a écrit:Ensuite, du côté des templates, modifiez le template overall_header_begin, et situez cet extrait :
Le template en question est celui-ci : overall_footer_begin
avatar

*Splash*
*****

Masculin
Messages : 926
Inscrit(e) le : 25/02/2018

https://lesforums.caforum.fr/
*Splash* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: AwesomeBB : comment faire un joli footer?

Message par Walt le Sam 10 Nov 2018 - 13:39

C'est corrigé, merci Wink

Cordialement,
Walt
avatar

Walt
Modéractif
Modéractif

Masculin
Messages : 5455
Inscrit(e) le : 08/09/2015

Walt a été remercié(e) par l'auteur de ce sujet.

Résolu Re: AwesomeBB : comment faire un joli footer?

Message par Zepiii le Sam 10 Nov 2018 - 16:45

Grand merci, je teste ça demain la journée et vous redis si ça fonctionne ou non...
avatar

Zepiii
****

Messages : 229
Inscrit(e) le : 25/06/2010

http://forum-generationmobiles.net
Zepiii a été remercié(e) par l'auteur de ce sujet.

Résolu Re: AwesomeBB : comment faire un joli footer?

Message par Zepiii le Dim 11 Nov 2018 - 8:33

Grand merci Walt...

Je l'ai implémenté :



Code:
<!-- Faire un joli footer : https://forum.forumactif.com/t398524-awesomebb-comment-faire-un-joli-footer#3328552-->
<div id="page-footer">
    <div class="wrap">
        <div class="navbar">
            <ul class="linklist clearfix">
                <li class="footer-to-top">
 <a href="#top"> <i class="material-icons">arrow_upward</i></a>
                </li>
                <li class="footer-column">
                  <a class="footer-column-link" href="{U_INDEX}">{L_HOME}</a>
                  <a class="footer-column-link" href="#">Lien n°5</a>
                  <a class="footer-column-link" href="#">Lien n°6</a>
                </li>
                <li class="footer-column">
                  <a class="footer-column-link" href="#">Lien n°7</a>
                  <a class="footer-column-link" href="/abuse?page=%2F&report=1">Signaler un abus</a>
                  <a class="footer-column-link" href="/contact">Contact</a>
                </li>
                <li class="footer-column footer-right">

J'ai été obligé de laisser la flèche dans "<li class="footer-to-top">" et non footer-column car sinon elle perdait son joli encadré bleu Sad

Du coup, le résultat n'est plus symétrique entre les 4 colonnes... Une astuce pour contourner ça ?

Merci,
Zepiii
avatar

Zepiii
****

Messages : 229
Inscrit(e) le : 25/06/2010

http://forum-generationmobiles.net
Zepiii a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: AwesomeBB : comment faire un joli footer?

Message par Walt le Dim 11 Nov 2018 - 11:44

Bonjour,

Remplacez <li class="footer-to-top"> par <li class="footer-column">

Cordialement,
Walt
avatar

Walt
Modéractif
Modéractif

Masculin
Messages : 5455
Inscrit(e) le : 08/09/2015

Walt a été remercié(e) par l'auteur de ce sujet.

Résolu Re: AwesomeBB : comment faire un joli footer?

Message par *Splash* le Dim 11 Nov 2018 - 12:10

Hi,
@Zepiii a écrit:

J'ai été obligé de laisser la flèche dans "<li class="footer-to-top">" et non footer-column car sinon elle perdait son joli encadré bleu Sad

Du coup, le résultat n'est plus symétrique entre les 4 colonnes... Une astuce pour contourner ça ?

Merci,
Zepiii

En inscrivant ceci :
Code:
<li class="footer-to-top">

Cela donne



Donc pour rester dans l'esprit du footer du FDF mieux vaut laisser le code donné par Walt :
Code:
<li class="footer-column">

Pour avoir un résultat identique à ce forum

avatar

*Splash*
*****

Masculin
Messages : 926
Inscrit(e) le : 25/02/2018

https://lesforums.caforum.fr/
*Splash* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: AwesomeBB : comment faire un joli footer?

Message par Zepiii le Dim 11 Nov 2018 - 13:43

Oui mais alors la flèche "TO THE TOP" perd son joli encadré bleu



Pas grave, je vais trouver une autre alternative Wink
avatar

Zepiii
****

Messages : 229
Inscrit(e) le : 25/06/2010

http://forum-generationmobiles.net
Zepiii a été remercié(e) par l'auteur de ce sujet.

Résolu Re: AwesomeBB : comment faire un joli footer?

Message par *Splash* le Dim 11 Nov 2018 - 14:03

Sur mon forum test elle n'apparaît plus avec ce footer
avatar

*Splash*
*****

Masculin
Messages : 926
Inscrit(e) le : 25/02/2018

https://lesforums.caforum.fr/
*Splash* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: AwesomeBB : comment faire un joli footer?

Message par Zepiii le Dim 11 Nov 2018 - 14:05

Bien sûr, mais moi j'ai essayé de volontairement la rajouter :

Code:
<a href="#top"> <i class="material-icons">arrow_upward</i></a>

Et si je le fais, elle perd son encadré bleu... Pas grave, je vais faire autrement Smile
avatar

Zepiii
****

Messages : 229
Inscrit(e) le : 25/06/2010

http://forum-generationmobiles.net
Zepiii a été remercié(e) par l'auteur de ce sujet.

Résolu Re: AwesomeBB : comment faire un joli footer?

Message par *Splash* le Dim 11 Nov 2018 - 14:07

@Zepiii a écrit:Bien sûr, mais moi j'ai essayé de volontairement la rajouter :

Code:
<a href="#top"> <i class="material-icons">arrow_upward</i></a>

Et si je le fais, elle perd son encadré bleu... Pas grave, je vais faire autrement Smile
Je viens de regarder ton forum test et elle est bien visible pourtant

avatar

*Splash*
*****

Masculin
Messages : 926
Inscrit(e) le : 25/02/2018

https://lesforums.caforum.fr/
*Splash* a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: AwesomeBB : comment faire un joli footer?

Message par Walt le Dim 11 Nov 2018 - 15:11

Essayez de combiner les deux, dans ce cas. C'est juste une histoire de largeur de la colonne, et l'encadré bleu est donné au lien par la classe parent footer-to-top :

Code:
<li class="footer-to-top footer-column">

Cordialement,
Walt
avatar

Walt
Modéractif
Modéractif

Masculin
Messages : 5455
Inscrit(e) le : 08/09/2015

Walt a été remercié(e) par l'auteur de ce sujet.

Résolu Re: AwesomeBB : comment faire un joli footer?

Message par *Splash* le Dim 11 Nov 2018 - 15:19

Hum, il faudrait pouvoir élargir ce cadre bleu dans ce cas

avatar

*Splash*
*****

Masculin
Messages : 926
Inscrit(e) le : 25/02/2018

https://lesforums.caforum.fr/
*Splash* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: AwesomeBB : comment faire un joli footer?

Message par Zepiii le Dim 11 Nov 2018 - 16:33

Bien vu Walt !



Merci,
Zepiii
avatar

Zepiii
****

Messages : 229
Inscrit(e) le : 25/06/2010

http://forum-generationmobiles.net
Zepiii a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum