Modernbb - Mettre des images en liens de bas de page

[Invité]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour,

cela fait un moment que je cherche une astuce pour mettre en bas de page des liens avec une image, ce qui est impossible avec l'option liens de bas de page. 

javascript :

Code:

$(function()  {
 $(".footerbar-system").eq(0).append("<div id='footer_cr' style='clear:both;' > CimFrance :copyright:️ 2015 - 2019 </div><br><h2><font color='#2B86BA'>CIM<font color='#FFFFF'>FRA<font color='#FF0000'>NCE</font></h2><br>Pour les joueurs de city builders, de jeux de gestion et de simulation")
});

Quelqu'un aurait la solution ?
Merci:)

[Invité]

up

[Invité]

Aucune solution ?

[*Splash*]

Hi Keltia,
Tu veux arriver à ce genre de résultat > Clique ?

[Invité]

Hello Keltia,

remplaces e script par celui-ci:

Code:

$(function()  {
  $('#page-footer .wrap:first').after('
<div id="footer_cr" style="clear:both;text-align:center;" ><span style="color:white;"> CimFrance :copyright:️ 2015 - 2019 </span>
<br /><h2><font color="#2B86BA">CIM<font color="#FFFFF">FRA<font color="#FF0000">NCE</font></h2><br />Pour les joueurs de city builders, de jeux de gestion et de simulation</div>');
});

a++

[Invité]

Je cherche à faire ceci :



ajouter à droite des images-logos avec liens 

[Invité]

Hello Keltia,

Je cherche à faire ceci :

ajouter à droite des images-logos avec liens 

de rien, je laisse ma place .

a++

[*Splash*]

Hi,

Et positionné ainsi ?

[Invité]

Bonjour et merci à vous deux.

Oui. Au dessus (votre img) ou dessous (mon image) la ligne accueil/forum gratuit phpbb... il faudrait que j'essaie de voir les deux.

et aussi si possible (...je pensais demander après), savoir comment on fait le listing en colonne comme sur le FDF (forumactif, services, suivez nous, etc)
Il me semble que quelqu'un avait déjà posé la question il y a un moment, mais je ne retrouve pas le sujet.

Merci à vous.

[*Splash*]

Alors pour la solution que je te propose n'est autre qu'une astuce de Milouze14 laissée ici > Clique

Dans le template overall_footer_begin tu recherches ceci :

Code:

<div id="page-footer">

Juste avant tu places ceci :

Code:

<div id="M14_btn">
                            <span></span>
<a class="M14_btn" href="LIEN FACEBOOK" target="_blank" title="INFOBULLE FACEBOOK"><img src="https://2img.net/i/fa/modernbb/icon_contact_fb.png"/></a>
<a class="M14_btn" href="LIEN TWITTER" target="_blank" title="INFOBULLE TWITTER"><img src="https://2img.net/i/fa/modernbb/icon_contact_twitter.png"/></a>
        </div>

LIEN FACEBOOK : l'URL de ta page Facebook
INFOBULLE FACEBOOK : le texte qui s'affiche au survol de l'icône avec la souris

Tu enregistre la modif et tu publie le template

Ensuite tu places ce code à la CSS :

Code:

 /*LE BLOC DES RESEAUX SOCIAUX*/
#M14_btn
{
color: #69c;
display: inline-block;
font-family: sans-serif;
font-size: 15px;
font-weight: 700;
background-color:;
padding: 5px 5px 5px 0px;
width: 40%;/*on determine la largeur du bloc*/
margin-left: 90%;/*/*on decale le bloc de 90% de la gauche*/
}
/*LE TEXTE DES RESEAUX SOCIAUX*/
#M14_btn span
{
margin-right: 30px;
width:200px;
height: 32px;
line-height: 32px;
}
/*LES BOUTONS DES RESAUX SOCIAUX*/
a.M14_btn
{
background-color:;/*couleur de fond en relation avec les images*/
border-radius: 3px;
color: #fff !important;
display: inline-block;
font-size: 17px;
height: 32px;
margin: 3px;
padding: 7px;
text-align: center;
width: 32px;
padding: 4px;/*en relation avec la dimension des images*/
}

Ici tu as le placement des boutons sur la gauche :

Code:

margin-left: 90%;/*/*on decale le bloc de 90% de la gauche*/

[*Splash*]

Si tu veux un placement au footer, dans le template tu places le code juste après ceci :

Code:

<div id="page-footer">

Ainsi donc :

Code:

<div id="page-footer">
  <div id="M14_btn">
                            <span></span>
<a class="M14_btn" href="LIEN FACEBOOK" target="_blank" title="INFOBULLE FACEBOOK"><img src="https://2img.net/i/fa/modernbb/icon_contact_fb.png"/></a>
<a class="M14_btn" href="LIEN TWITTER" target="_blank" title="INFOBULLE TWITTER"><img src="https://2img.net/i/fa/modernbb/icon_contact_twitter.png"/></a>
         </div>

Et tu places ce code CSS :

Code:

/*LE BLOC DES RESEAUX SOCIAUX*/
#M14_btn
{
color: #eee; /*couleur du texte*/
font-family: sans-serif; /*police du texte*/
font-size: 15px; /*taille de la police du texte*/
font-weight: 700; /*police du texte en gras*/
padding: 5px 5px 5px 0px; /*positionnement du bloc*/
margin-left: 73%; /*on decale le bloc de X% vers la droite*/
}
/*LE TEXTE DES RESEAUX SOCIAUX*/
#M14_btn span{margin-right: 5px;} /*espace entre le texte et les boutons*/
/*LES BOUTONS DES RESAUX SOCIAUX*/
a.M14_btn{padding: 4px; /*en relation avec la dimension des images*/}

Voir le rendu :

Si tu veux ajouter un bout de texte avant les boutons, dans le template il faut l'ajouter entre les balises span ici :

Code:

<div id="M14_btn">
                            <span>TON TEXTE</span>

Dans la CSS il faudra jouer avec cette valeur de margin :

Code:

margin-left: 73%; /*on decale le bloc de X% vers la droite*/

[Invité]

Merci