Les forums Forumactif
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Compteur de visites gratuit
Annonces
CAForum est aussi un forum d'aide pour phpBB. Voici le lien du forum : https://forums.caforum.fr
Vous voulez créer un forum sans publicités tout en étant propriétaire de votre base de données ?
Contactez moi sur le forum !
CAForum infos
Derniers sujets
» » Afficher les avatars en forme rectangulaire
Bloc des réseaux sociaux au footer Clock-10Mar 23 Mai 2023 - 19:23 par Kionk

» » Modifier l'icône "On-line"
Bloc des réseaux sociaux au footer Clock-10Mar 23 Mai 2023 - 19:15 par Kionk

» » Bouton MP "Répondre" adapté à la version ModernBB
Bloc des réseaux sociaux au footer Clock-10Mar 23 Mai 2023 - 12:23 par Kionk

» » Insérer des boutons "Haut" & "Bas" de forum
Bloc des réseaux sociaux au footer Clock-10Mar 23 Mai 2023 - 11:40 par Kionk

» » Mettre une image au qeel
Bloc des réseaux sociaux au footer Clock-10Mar 23 Mai 2023 - 9:18 par Kionk

» » Modifier l'apparence du qeel
Bloc des réseaux sociaux au footer Clock-10Mar 23 Mai 2023 - 9:17 par Kionk

» » Liens haut & bas de page façon AwesomeBB
Bloc des réseaux sociaux au footer Clock-10Mar 23 Mai 2023 - 1:21 par Kionk

» » Mettre une image au qeel
Bloc des réseaux sociaux au footer Clock-10Lun 22 Mai 2023 - 22:38 par Kionk

» » Réduire la hauteur des catégories
Bloc des réseaux sociaux au footer Clock-10Lun 22 Mai 2023 - 15:03 par Kionk

» » [Edge] Hover sur l'avatar pour afficher les infos de profil
Bloc des réseaux sociaux au footer Clock-10Sam 20 Mai 2023 - 18:53 par fred9545

» » Un texte qui clignote
Bloc des réseaux sociaux au footer Clock-10Jeu 30 Mar 2023 - 4:03 par Freedom Sun

» » Centrer l'avatar, le pseudo & le rang dans les messages
Bloc des réseaux sociaux au footer Clock-10Jeu 30 Mar 2023 - 3:38 par Freedom Sun

» » Modifier l'apparence du qeel
Bloc des réseaux sociaux au footer Clock-10Dim 16 Oct 2022 - 15:15 par fred9545

» » Modifier la phrase Qui est en ligne ?
Bloc des réseaux sociaux au footer Clock-10Dim 9 Oct 2022 - 11:49 par Kionk

» » Personnaliser la navbar en CSS
Bloc des réseaux sociaux au footer Clock-10Dim 9 Oct 2022 - 11:45 par Kionk

Septembre 2023
LunMarMerJeuVenSamDim
    123
45678910
11121314151617
18192021222324
252627282930 

Calendrier Calendrier

Le deal à ne pas rater :
Nike : Jusqu’à -50% sur une sélection d’articles
Voir le deal

Bloc des réseaux sociaux au footer

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

Splash

StaffAdmin
StaffAdmin
Splash

MessageSplash Dim 8 Sep 2019 - 11:44

  • MP
  • Zoom
Hi,
Tuto réalisé sur la base d'une astuce de @Milouze14 laissée sur le FDF ici > Clique

Avec cette astuce vous pouvez placer un bloc de liens des réseaux sociaux au footer de votre forum

Rendu du footer FAE :



Direction le template

Panneau d'administration / Affichage /Templates / Général / overall_footer_begin


Dans le template overall_footer_begin recherchez ceci :
Code:
<div id="page-footer">

Important

Pour la version Invision il faut rechercher ceci :
Code:
<div id="gfooter">  

Pour la version  punBB il faut chercher ceci :
Code:
<div id="pun-foot">

Pour la version  FAE il faut chercher ceci :
Code:
<div id="page-footer" class="color-secondary">

Juste après déposez ceci :
Code:
<div id="M14_btn">
                            <span>Suivez l'actualité du forum</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>
<a class="M14_btn" href="LIEN PINTEREST" target="_blank" title="INFOBULLE PINTEREST"><img src="https://2img.net/i/fa/modernbb/icon_contact_pinterest.png"/></a>
<a class="M14_btn" href="LIEN SKYPE" target="_blank" title="INFOBULLE SKYPE"><img src="https://2img.net/i/fa/modernbb/icon_contact_skype.png"/></a>
 </div>

Le texte qui apparaît avant les boutons se trouve ici dans le code :
Code:
<span>Suivez l'actualité du forum</span>

LIEN FACEBOOK : correspond à l'URL du réseau social
INFOBULLE FACEBOOK : correspond au texte qui s'affiche au survol du bouton avec la souris

Pensez à  Enregistrer   et à publier le template en cliquant sur  Valider




Direction le CSS

Panneau d'administration / Affichage / Images et Couleurs / Couleurs / Feuille de style CSS


Mettre ce code à la 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*/}

En fonction de votre forum il faudra jouer sur le valeur du margin-left ici :
Code:
margin-left: 73%; /*on decale le bloc de X% vers la droite*/

Pensez à   Valider 2








:u1:
À bientôt
Bye




Flèche  Pour bien réaliser cette astuce
Like a Star @ heaven  Dans cette astuce il est question d'intervenir dans le(s) template(s) pour le(s) modifier et de placer un code à la feuille de style (CSS), si vous n'êtes pas à l'aise avec ces démarches il existe ces tutos d'aide ici :

> Intervenir dans les templates
> La CSS


Mise à jour le 23.09.2019
David1195

StaffModo
StaffModo
David1195

MessageDavid1195 Mar 17 Sep 2019 - 20:41

  • MP
  • Zoom
Merci beaucoup !
chrisnvidia

Membre
Membre
chrisnvidia

Messagechrisnvidia Sam 21 Sep 2019 - 18:11

  • MP
  • Zoom
Merci beaucoup !
Contenu sponsorisé

MessageContenu sponsorisé

  • MP
  • Zoom

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

Inscrivez-vous ou connectez-vous pour répondre

Vous devez être membre pour répondre.

Nous rejoindre

Inscrivez-vous pour participer au forum !


Nous rejoindre

Connexion

Vous êtes membre du forum, cliquez ici pour vous connecter.


Connexion

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