phpBB2 : Créer un "module de partage" personnalisé

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

  • 0

Astuce phpBB2 : Créer un "module de partage" personnalisé

Message par Matriochka le Dim 7 Avr 2013 - 18:18

phpBB2 : créer un "Module de partage" personnalisé

Le tutoriel qui suit vous permettra de créer vous-même votre propre module de partage social à intégrer sur votre forum Forumactif, comme le montre cet exemple : Démonstration.

Avant toute modification, assurez-vous que votre forum respecte les conditions suivantes :
- Votre forum doit être en version phpBB2,
- Vous devez être le fondateur de votre forum ou avoir accès à celui-ci,
- Vous devez avoir accès à la modification des templates de votre forum.



Première étape : installer le module (template)
En premier lieu, nous allons placer le module de partage vierge dans les templates du forum, de façon à ce que celui-ci s’affiche sur toutes les pages.

1. Rendez-vous dans :
Panneau d’administration ► Affichage ► Templates ► Général

2. Ouvrez le template intitulé overall_header et localisez à la ligne n°201 cette partie :
Code:
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
3. Installez le module juste après celle-ci, à l’aide d’une div appelée mod_share :
Code:
<div class="mod_share">

</div>
Cette div va donc contenir les diverses icônes que l’on désire installer dans le module.


Seconde étape : installer les icônes du module (template)
Maintenant que le module est placé dans le template, il n’y a plus qu’à ajouter les icônes que l’on veut voir apparaître à l’intérieur de celui-ci. Pour ce faire, on va utiliser une image et un lien.

1. L’image :
Code:
<img src="http://url_de_l_icone.jpg" alt="" />
2. Le lien :
Code:
<a href="http://lien.html" target="_blank"></a>
3. Les deux combinés :
Code:
<a href="http://lien.html" target="_blank"><img src="http://url_de_l_icone.jpg" alt="" /></a>
Modifications à apporter :
- http://url_de_l_icone.jpg : URL de l’image représentant l’icône (exemple : Facebook , Twitter…)
- http://lien.html : URL vers laquelle l’icône envoie

Note : On utilise target="_blank" dans la déclaration du lien afin qu’un nouvel onglet s’ouvre dans le navigateur (système du lien externe).

4. On ajoute donc chaque icône à l’intérieur de la div créée précédemment, comme ceci :
Code:
<div class="mod_share">
<a href="http://lien.html" target="_blank"><img src="http://url_de_l_icone.jpg" alt="" /></a><br />
<a href="http://lien.html" target="_blank"><img src="http://url_de_l_icone.jpg" alt="" /></a><br />
<a href="http://lien.html" target="_blank"><img src="http://url_de_l_icone.jpg" alt="" /></a><br />
<a href="http://lien.html" target="_blank"><img src="http://url_de_l_icone.jpg" alt="" /></a><br />
</div>
Détail important : il est primordial de séparer les différentes icônes d’un saut de ligne, en HTML : <br />.

5. Dès que le module est installé et que les icônes ont toutes été ajoutées, enregistrez puis publiez votre template en cliquant sur le bouton représentant un plus vert.


Dernière étape : mettre en forme le module (CSS)
Afin de finaliser l’installation du module, il faut maintenant lui appliquer du style. Pour ça, on utilise la class mod_share précédemment appliquée.

1. Rendez-vous dans :
Panneau d’administration ► Affichage ► Couleurs ► Feuille de styles CSS

2. Collez ces lignes, dont l’action est expliquée entre /* et */ :
Code:
.mod_share {
background:#FFFFFF; /* couleur de fond */
border:1px solid #000000; /* couleur de bordure, style et épaisseur */
position:fixed; /* permet de garder l’élément fixe */
right:0px; /* définit la distance entre l’élément et la droite de la page*/
top:40%; /* définit la distance entre l’élément et le haut de la page*/
padding:5px; /* ajoute une marge interne */}
Modifications à apporter :
- background:#FFFFFF; : modifier le code couleur #FFFFFF (blanc) pour changer la couleur de fond du module
- border:1px solid #000000; : modifier le code couleur #000000 (noir) pour changer la couleur des bordures du module

Aide : Trouver un code couleur

Avec cette base, vous pourrez par la suite modifier votre module comme bon vous semble :
- Ajouter des bordures arrondies avec border-radius ,
- Ajouter un effet d’opacité avec opacity ,
- Ajouter une image de fond avec background-image

La personnalisation est infinie ! Smile

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka 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