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

[xewup]

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

[xewup]

up

[xewup]

Up

[Invité]

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 puis


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

Et voilou

a++

[xewup]

Merci c'est très gentil @Milouze14