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

Retrouvez ici quelques tutoriels pour vos forums phpBB
Message par Fred »
Avatar du membre
Fred Fred
Messages : 2934
Enregistré depuis : 3 ans 9 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

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.
Partagez cette page
Twitter Whatsapp Linkedin Email
Vous devez être membre du forum pour répondre
Inscrivez-vous pour participer au forum ou Connecter-vous à votre compte.