[Tuto] Icônes des réseaux sociaux au header

[Fred]

Ce tutoriel va te permettre d'ajouter des icônes de réseaux sociaux dans le header (en-tête) du forum.

Capture d’écran 2021-02-06 à 18.39.51.png

► Ajout des images sur le serveur

En FTP se rendre ici :

► [ROOT]/images

[ROOT] correspond au répertoire qui contient les dossiers et fichiers du forum

Créer un dossier social et placer les icônes à l'intérieur, le chemin d'accès à ce dossier sera :

► [ROOT]/images/social


Nommer les icônes ainsi :

• facebook.png

• twitter.png

Icône Facebook

facebook.png

Icône Twitter

twitter.png

► Le code HTML

Se rendre ici :

► [ROOT]/styles/nom du style/template

Ouvrir le fichier overall_header.html

Trouver : (peut correspondre à un résultat partiel dans une ligne de code ou à une ligne de code entière.)

Code: Tout sélectionner

		<div class="headerbar" role="banner">

Ajouter après : (ajouter ce code sur une nouvelle ligne, située après les lignes de code précédemment trouvées.)

Code: Tout sélectionner

<div id="social-link">
				<div id="social-link-icons">
					<a href="url facebook"><img title="Facebook" src="url forum/images/social/facebook.png"></a>
					<a href="url twitter"><img title="Twitter" src="url forum/images/social/twitter.png"></a>
				</div>
</div>

<a href="url facebook"> remplacer "url facebook" par le lien de la page/groupe
<img title="Facebook" Facebook sera affiché si on pointe la souris sur l'icône
src="url forum/images/social/facebook.png"> remplacer "url forum" par le lien du forum



► Le code CSS

Dans la stylesheet du style du forum

Ajouter ceci : 

Code: Tout sélectionner

#social-link {
    position: relative;
    height: 0px;
    right: 10px;
    top: 150px;
}

#social-link-icons {
    float: right;
} 

Purger le cache pour faire apparaître les icônes des réseaux sociaux