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

Retrouvez ici quelques tutoriels pour vos forums phpBB
Avatar du membre
Fred Fred
Fondateur
Messages: []
Enregistré depuis: 4 ans 10 mois
Identité: Fred Rimbert
Forum phpBB: https://caforum.fr
Localisation: Le Lude - Pays de la Loire
Intérêt: GitHub

Icônes des réseaux sociaux au header

Message par 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
Vous n’avez pas les permissions nécessaires pour voir les fichiers joints à ce message.