Modification du code CSS du module PARTAGER
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Modification du code CSS du module PARTAGER
Bonjour,
Voilà, j'ai installer le module partager sur mon forum module partager, d'ailleurs sans soucis, mais n'ayant jamais utiliser les codes CSS, je ne sais pas comment faire pour modifier le code fournis pour l’adapter à mes besoins...
Quelqu'un pourrait m'aider.
Merci,
@+
Voilà, j'ai installer le module partager sur mon forum module partager, d'ailleurs sans soucis, mais n'ayant jamais utiliser les codes CSS, je ne sais pas comment faire pour modifier le code fournis pour l’adapter à mes besoins...
Quelqu'un pourrait m'aider.
Merci,
@+
sousou33- ***
- Messages : 134
Inscrit(e) le : 02/01/2008
Re: Modification du code CSS du module PARTAGER
Bonjour,
Si on regarde la structure html :
C'est du style :
Pour ce cas-ci les sélecteurs ne sont pas utilisés de façon très compliquée, on utilise le fait de pouvoir mettre une balise, par exemple :
On utilise aussi l'espace qui permet de dire par exemple :
Par exemple :
Ensuite dans les sélecteurs il y a le . qui permet de désigner la classe, par exemple :
On peut également utiliser le tag et la classe en même temps pour préciser mieux, par exemple :
Finalement il reste juste # qui agit exactement comme le . sauf que c'est pour l'attribut id, donc par exemple :
Enfin voilà pour les sélecteurs, maintenant prenons ceux de l'astuce un à un :
Maintenant pour le 2ème bloc de css :
En prenant chaque propriété une à une à nouveau, ça nous donne les propriétés suivantes qui s'appliquent à ces éléments donc :
Permet de mettre un fond, ici on donne l'image https://sd-2.archive-host.com/membres/up/24071559914142709/tuto_partager/partager.png et on lui dit de ne pas se répéter.
Occupons nous des blocs suivants :
En fait chacun des "blocs" avec une image / texte a une largeur et hauteur, et ils affichent tous le même fond d'image : https://sd-2.archive-host.com/membres/up/24071559914142709/tuto_partager/partager.png mais toute ces lignes permettent de positionner pour chaque élément le fond comme il faut afin que l'image qu'il faille apparaisse au survol et au nom survol.
Passons à l'avant dernier bloc, il s'agit de :
Maintenant dernier bloc ^^
Donc en supprimant les redondances en fait le CSS donnerait :
( par exemple http://www.google.fr/search?q=bakcground-position+css )
Cordialement.
Si on regarde la structure html :
C'est du style :
- Code:
<ul class="sharing-cl" id="text">
<li><a ...>text</a></li>
<li><a ...>text</a></li>
</ul>
- Code:
sélecteur {
propriété: valeur;
propriété: valeur;
propriété: valeur;
}
sélecteur {
propriété: valeur;
propriété: valeur;
}
sélecteur {
propriété: valeur;
propriété: valeur;
propriété: valeur;
propriété: valeur;
}
Pour ce cas-ci les sélecteurs ne sont pas utilisés de façon très compliquée, on utilise le fait de pouvoir mettre une balise, par exemple :
- Code:
a {
propriété: valeur;
}
On utilise aussi l'espace qui permet de dire par exemple :
- Code:
a b {
propriété: valeur;
}
Par exemple :
- Code:
<a>
<b>bonjour</b>
</a>
Ensuite dans les sélecteurs il y a le . qui permet de désigner la classe, par exemple :
- Code:
.bonjour {
propriété: valeur;
}
- Code:
<b class="bonjour">hello</b>
<b class="byebye">plop</b>
<b>flute</b>
On peut également utiliser le tag et la classe en même temps pour préciser mieux, par exemple :
- Code:
b.bonjour {
propriété: valeur;
}
- Code:
<b class="bonjour">hello</b>
<a class="bonjour">kaboum</b>
<b class="byebye">plop</b>
<b>flute</b>
Finalement il reste juste # qui agit exactement comme le . sauf que c'est pour l'attribut id, donc par exemple :
- Code:
#tete {
propriété: valeur;
}
- Code:
<span id="tete">1</span>
<span class="tete">2</span>
<em id="tete">3</em>
<span id="epaules">4</span>
Enfin voilà pour les sélecteurs, maintenant prenons ceux de l'astuce un à un :
- Code:
.sharing-cl{
overflow:hidden;
margin:-20px 0 0 0;
padding:0;
list-style:none;
width:530px;
}
- Code:
<ul class="sharing-cl" id="text">
<li><a ...>text</a></li>
<li><a ...>text</a></li>
</ul>
- Code:
overflow:hidden;
- Code:
margin:-20px 0 0 0;
- Code:
padding:0;
- Code:
list-style:none;
- élément 1
- élément 2
- Code:
width:530px;
Maintenant pour le 2ème bloc de css :
- Code:
.sharing-cl a{
overflow:hidden;
width:75px;
height:20px;
float:left;
margin-right:5px;
text-indent:-200px;
background:url(http://sd-2.archive-host.com/membres/up/24071559914142709/tuto_partager/partager.png) no-repeat;
}
- Code:
<ul class="sharing-cl" id="text">
<li><a ...>text</a></li>
<li><a ...>text</a></li>
</ul>
En prenant chaque propriété une à une à nouveau, ça nous donne les propriétés suivantes qui s'appliquent à ces éléments donc :
- Code:
overflow:hidden;
- Code:
width:75px;
- Code:
height:20px;
- Code:
float:left;
- Code:
margin-right:5px;
- Code:
text-indent:-200px;
- Code:
background:url(http://sd-2.archive-host.com/membres/up/24071559914142709/tuto_partager/partager.png) no-repeat;
Permet de mettre un fond, ici on donne l'image https://sd-2.archive-host.com/membres/up/24071559914142709/tuto_partager/partager.png et on lui dit de ne pas se répéter.
Occupons nous des blocs suivants :
- Code:
a.sh-su{background-position:-210px -40px;}
a.sh-feed{background-position:-70px -40px;}
a.sh-tweet{background-position:-140px -40px;}
a.sh-mail{background-position:0 -40px;}
a.sh-digg{background-position:-280px -40px;}
a.sh-face{
margin-right:0;
background-position:-350px -40px;
}
a.sh-mail:hover{background-position:0 1px;}
a.sh-feed:hover{background-position:-70px 1px;}
a.sh-tweet:hover{background-position:-140px 1px;}
a.sh-su:hover{background-position:-210px 1px;}
.sh-digg:hover{background-position:-280px 1px;}
a.sh-face:hover{
background-position:-350px 1px;
}
En fait chacun des "blocs" avec une image / texte a une largeur et hauteur, et ils affichent tous le même fond d'image : https://sd-2.archive-host.com/membres/up/24071559914142709/tuto_partager/partager.png mais toute ces lignes permettent de positionner pour chaque élément le fond comme il faut afin que l'image qu'il faille apparaisse au survol et au nom survol.
Passons à l'avant dernier bloc, il s'agit de :
- Code:
#text{
margin-top:5px;
font-weight:bold;
font-family:helvetica,arial,sans-serif;
}
- Code:
<ul class="sharing-cl" id="text">
<li><a ...>text</a></li>
<li><a ...>text</a></li>
</ul>
- Code:
margin-top:5px;
- Code:
font-weight:bold;
- Code:
font-family:helvetica,arial,sans-serif;
Maintenant dernier bloc ^^
- Code:
#text a{
text-indent:0;
height:auto;
text-align:center;
font-size:11px;
padding-top:35px;
color:#999;
text-decoration:none;
}
- Code:
<ul class="sharing-cl" id="text">
<li><a ...>text</a></li>
<li><a ...>text</a></li>
</ul>
- Code:
text-indent:0;
- Code:
height:auto;
- Code:
text-align:center;
- Code:
font-size:11px;
- Code:
padding-top:35px;
- Code:
color:#999;
- Code:
text-decoration:none;
Donc en supprimant les redondances en fait le CSS donnerait :
- Code:
.sharing-cl{
overflow:hidden;
margin:5px 0 0 0;
padding:0;
list-style:none;
width:530px;
}
.sharing-cl a{
font-weight:bold;
font-family:helvetica,arial,sans-serif;
text-align:center;
font-size:11px;
padding-top:35px;
color:#999;
text-decoration:none;
overflow:hidden;
width:75px;
float:left;
margin-right:5px;
text-indent:0px;
background:url(http://sd-2.archive-host.com/membres/up/24071559914142709/tuto_partager/partager.png) no-repeat;
}
a.sh-su {background-position:-210px -40px;}
a.sh-feed {background-position:-70px -40px;}
a.sh-tweet{background-position:-140px -40px;}
a.sh-mail {background-position:0 -40px;}
a.sh-digg {background-position:-280px -40px;}
a.sh-face {background-position:-350px -40px;margin-right:0;}
a.sh-mail:hover {background-position:0 1px;}
a.sh-feed:hover {background-position:-70px 1px;}
a.sh-tweet:hover{background-position:-140px 1px;}
a.sh-su:hover {background-position:-210px 1px;}
a.sh-digg:hover {background-position:-280px 1px;}
a.sh-face:hover {background-position:-350px 1px;}
( par exemple http://www.google.fr/search?q=bakcground-position+css )
Cordialement.
Ea- Aidactif
- Messages : 23583
Inscrit(e) le : 04/04/2008
Re: Modification du code CSS du module PARTAGER
Merci beaucoup!!!
Bon me reste plus qu'à m'y pencher sérieusement et essayer de modifier certaines choses!!!
@+
Bon me reste plus qu'à m'y pencher sérieusement et essayer de modifier certaines choses!!!
@+
sousou33- ***
- Messages : 134
Inscrit(e) le : 02/01/2008
Sujets similaires
» Module partager
» Module Partager
» Module "Partager" sur mon Forum
» Le module partager
» Installer un module "Partager" !
» Module Partager
» Module "Partager" sur mon Forum
» Le module partager
» Installer un module "Partager" !
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum