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

Faire un menu des réseaux sociaux en dessous de la barre de navigation

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

Résolu Faire un menu des réseaux sociaux en dessous de la barre de navigation

Message par xewup le Lun 29 Avr 2019 - 13:59

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Opera
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://www.freeartisticmind.forumactif.com

Description du problème

Bonjour à tous !

J'aimerai savoir comment faire une barre de réseaux sociaux en dessous de celle de navigation, un peu comme sur ce forum. Est-ce qu'il existe un code pour forum ModernBB quelque part ? Sinon, est-ce que quelqu'un peut m'aider à faire cela ?

Merci d'avance


Dernière édition par xewup le Jeu 2 Mai 2019 - 21:52, édité 2 fois
xewup

xewup
**

Messages : 68
Inscrit(e) le : 18/03/2019

Voir le profil de l'utilisateur http://www.freeartisticmind.forumactif.com
xewup a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire un menu des réseaux sociaux en dessous de la barre de navigation

Message par xewup le Mar 30 Avr 2019 - 20:21

up
xewup

xewup
**

Messages : 68
Inscrit(e) le : 18/03/2019

Voir le profil de l'utilisateur http://www.freeartisticmind.forumactif.com
xewup a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire un menu des réseaux sociaux en dessous de la barre de navigation

Message par xewup le Jeu 2 Mai 2019 - 2:23

Up
xewup

xewup
**

Messages : 68
Inscrit(e) le : 18/03/2019

Voir le profil de l'utilisateur http://www.freeartisticmind.forumactif.com
xewup a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire un menu des réseaux sociaux en dessous de la barre de navigation

Message par Milouze14 le Jeu 2 Mai 2019 - 19:30

Hello xewup,

en partant du même principe on peut faire ce genre de code html.

Chaque lien est présenté ainsi:

Code:

<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>

1= On donne une class M14_btn afin de donner une apparence au lien (bouton)
2= On dépose le lien ici:
Code:
href="LIEN FACEBOOK"
3= on affiche une infobulle au survol du lien:
Code:
title="INFOBULLE FACEBOOK"
4=On dépose une image représentative du réseau social
Code:
<img src="https://2img.net/i/fa/modernbb/icon_contact_fb.png"/>

Voilà pour un lien (en l’occurrence Facebook pour celui-ci ).

Ensuite les images fournies ont une hauteur de 24px sur une largeur de 24px:

Dans la feuille de style, le lien représentait par la class M14_btn aura
lui une hauteur de 32px sur une largeur de 32px.

Cela te permettra de mettre une couleur de fond (J'ai affecté une couleur blanche)
car les images données ont un fond noir.

Allez, c'est parti, ce code html sera présent sous la barre de navigation.


Dans le template overall_header:
Affichage/Templates/Général/ overall_header

Recherches ceci:

Code:

<div class="wrap">
               <a href="{U_INDEX}" id="logo"><img src="{LOGO}" alt="{L_INDEX}" /></a>

               <ul class="navbar navlinks{NAVBAR_BORDERLESS}">
                  <li>{GENERATED_NAV_BAR}</li>
               </ul>
            </div>




Juste après déposes ceci:

Modifies les liens,les infobulles et les images(si besoin)
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>


Penses a enregistrer puis à valider en cliquant respectivement sur :enreg: puis Faire un menu des réseaux sociaux en dessous de la barre de navigation 824052533


Ensuite on va donner du style à tout cela:

Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Ajoutes ceci:

Code:

/*LE BLOC DES RESEAUX SOCIAUX*/
#M14_btn
{
color: #fff;
display: inline-block;
float: left;
font-family: sans-serif;
font-size: 15px;
font-weight: 700;
padding:18px 0px 18px 200px;
background-color:grey;
padding: 10px 10px 10px 70px;
width: 40%;/*on determine la largeur du bloc*/
margin-left: 10%;/*/*on decale le bloc de 10% de la gauche*/
}
/*LE TEXTE DES RESEAUX SOCIAUX*/
#M14_btn span
{
float: left;
margin-right: 10px;
width:200px;
height: 32px;
line-height: 32px;
}


/*LES BOUTONS DES RESAUX SOCIAUX*/
a.M14_btn
{
background-color:white;/*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*/
}

Penses à cliquer sur le bouton Faire un menu des réseaux sociaux en dessous de la barre de navigation Sans_t10

Et voilou Wink

a++
Milouze14

Milouze14
Membre actif

Masculin
Messages : 6245
Inscrit(e) le : 18/04/2005

Voir le profil de l'utilisateur https://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Faire un menu des réseaux sociaux en dessous de la barre de navigation

Message par xewup le Jeu 2 Mai 2019 - 21:09

Merci c'est très gentil @Milouze14
xewup

xewup
**

Messages : 68
Inscrit(e) le : 18/03/2019

Voir le profil de l'utilisateur http://www.freeartisticmind.forumactif.com
xewup 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