Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

Créer un "module de partage" personnalisé

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

  • 0

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

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

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 :
- 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 contenant la balise <body>, telle que celle-ci : (selon la version de votre forum elle peut être un peu différente)
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
Membre actif

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