Modification du code CSS du module PARTAGER

2 participants

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

Résolu Modification du code CSS du module PARTAGER

Message par sousou33 Lun 13 Juin 2011 - 14:52

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,

@+
avatar

sousou33
***

Messages : 130
Inscrit(e) le : 02/01/2008

sousou33 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification du code CSS du module PARTAGER

Message par Ea Lun 13 Juin 2011 - 16:40

Bonjour,


Si on regarde la structure html :

Modification du code CSS du module PARTAGER UtKI2
C'est du style :

Code:
<ul class="sharing-cl" id="text">
  <li><a ...>text</a></li>
  <li><a ...>text</a></li>
</ul>
En CSS il y a des sélecteurs, des propriétés et des valeurs, c'est toujours comme ceci :

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;
}
En fait le "sélecteur" permet sélectionner des éléments ( liens, images, ... ) plus ou moins précisément et le bloc qui suit avec des couples propriété-valeur sont appliqués à ces éléments.

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;
}
Sélectionnera toute les balises a ( c'est à dire les balises qui en html sont <a></a> et éventuellement des attributs comme un lien qui est <a href="http://google.com"></a> ).

On utilise aussi l'espace qui permet de dire par exemple :

Code:
a b {
  propriété: valeur;
}
Les éléments b qui sont dans des éléments a.

Par exemple :

Code:
<a>
  <b>bonjour</b>
</a>
Le <b>bonjour</b> reçevra la propriété css ( et la valeur donnée ) car c'est bien un élément b se trouvant dans un élément a.

Ensuite dans les sélecteurs il y a le . qui permet de désigner la classe, par exemple :

Code:
.bonjour {
  propriété: valeur;
}
Mettra la valeur css à tout les éléments ayant la classe bonjour, par exemple :

Code:
<b class="bonjour">hello</b>
<b class="byebye">plop</b>
<b>flute</b>
Seul le <b class="bonjour">hello</b> recevra la valeur de la propritété CSS ( car c'est la seule ayant la classe bonjour ).

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;
}
Si on a le code :

Code:
<b class="bonjour">hello</b>
<a class="bonjour">kaboum</b>
<b class="byebye">plop</b>
<b>flute</b>
Il n'y aura que le hello encore une fois, car on veut une balise b avec la classe bonjour uniquement.

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;
}
Dans le code html suivant :

Code:
<span id="tete">1</span>
<span class="tete">2</span>
<em id="tete">3</em>
<span id="epaules">4</span>
Il n'y aura que le 1 et le 3 sélectionnés car ils ont l'attribut " id " tete.


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;
}
Cela sélectionne les éléments avec la classe sharing-cl, si on reprend la structure html ça nous donne :

Code:
<ul class="sharing-cl" id="text">
  <li><a ...>text</a></li>
  <li><a ...>text</a></li>
</ul>
Le truc qui se trouve tout autour, <ul> c'est une balise utilisée pour les listes, maintenant prenons les propriétés une à une ( elles s'appliquent donc à cet élément là ) :

Code:
overflow:hidden;
La propriété css overflow permet de désigner comment doit dépasser le contenu dans un "bloc" de contenu ( cela n'arrive que si on met une largeur et hauteur spécifique au bloc, sinon il lui suffit de s’agrandir et rien ne dépasse ), on peut par exemple choisir des barres de défilement, d'afficher ce qui dépasse ou de le cacher, ici la valeur hidden est la valeur à mettre quand on désire cacher ce qui dépasse ( donc ce qui dépassera sera caché ).

Code:
margin:-20px 0 0 0;
La propriété margin défini une marge extérieur ( cela signifie un espace à gauche, en haut, en bas ou à droite de l'élément qui sera vide ). En lui mettant 4 valeurs comme ceci la première est la marge en haut, la seconde la marge à droite, la troisième la marge en bas et la 4ème la marge à gauche, donc ici en résumé il y a juste une marge de -20 pixels en haut ( ce qui fait juste remonter le bloc de 20 pixels vers le haut ).

Code:
padding:0;
padding c'est la marge intérieur ( donc l'espace entre le bord si il y en ( il y en a toujours un il est juste invisible si il n'est pas visible ) et le contenu ), vu que la valeur donnée est 0, le contenu peut coller directement aux bords.

Code:
list-style:none;
La balise ul est une balise de liste, donc à la base ça donne un résultat du type :

  • élément 1
  • élément 2
Enfin la propriété css list-style permet de choisir si on veut un rond, un carré, ou en l’occurrence ne pas avoir de puce.

Code:
width:530px;
Cela donne une largeur de 530 pixels.


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;
}
On sélectionne les balises a qui se trouvent dans un élément avec la classe sharing-cl, si on remet la structure :

Code:
<ul class="sharing-cl" id="text">
  <li><a ...>text</a></li>
  <li><a ...>text</a></li>
</ul>
Il s'agit de chacun des liens de chaque objet.

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;
Encore une fois ce qui dépasse est caché.

Code:
width:75px;
La largeur de chaque élément est mise à 75 pixels ( donc chaque image + texte ont 75 pixels de large ).

Code:
height:20px;
La hauteur de chaque élément est mise à 29 pixels ( donc chaque image + texte ont 20 pixels de haut ).

Code:
float:left;
Les éléments doivent "flotter" à droite, ça signifie que plutôt qu'être 1 élément par ligne ils doivent se mettre à la queue leu leu ( l'un à la suite de l'autre de gauche à droite ).

Code:
margin-right:5px;
Il y a une marge à gauche de 5 pixels ( donc une marge à gauche de chaque élément qui éloigne le prochain de 5 pixels ).

Code:
text-indent:-200px;
Décale de 200 pixels vers la gauche le texte ( c'est une indentation de texte à la base mais si la valeur est négative ça le déplace vers la gauche plutôt que vers la droite ), je sais pas à quoi ça sert dans ce cas-ci, vaut mieux pas y toucher Mr. Green

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;
}
Le :hover permet de spécifier une propriété seulement quand on survol l'élément, le background-position permet de positionner le bord haut gauche de l'image de fond par rapport à l'élément.

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;
}
En regardant le code html :

Code:
<ul class="sharing-cl" id="text">
  <li><a ...>text</a></li>
  <li><a ...>text</a></li>
</ul>
Cela touchera encore une fois juste l'élément <ul class="sharing-cl" id="text"> ( donc en fait ça semble inutile tout aurait pu être rassembler dans le même bloc ), mais donc pour les propriétés :

Code:
margin-top:5px;
Une marge de 5 pixels au dessus ( qui annule la marge de -20px vers le dessus de tantôt, donc elle était inutile aussi ).

Code:
font-weight:bold;
L'épaisseur dans le sens de la police ( le plus souvent soit normal ( = pas gras ) ou bold ( = gras ) ), donc ici c'est gras.

Code:
font-family:helvetica,arial,sans-serif;
La police d'écriture ( c'est une liste séparée par des virgules, la première police est affichée sauf si elle n'est pas installée, alors c'est la deuxième police qui est affichée sauf si elle n'est pas installée et ainsi de suite ), ici on a la police helvetica.

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;
}
Comme le précédent il y avait déjà un autre bloc sur la même chose ( .sharing-cl a ):

Code:
<ul class="sharing-cl" id="text">
  <li><a ...>text</a></li>
  <li><a ...>text</a></li>
</ul>
Donc :

Code:
text-indent:0;
Annule l'indentation de tantôt ( donc en fait elle ne servait pas ).

Code:
height:auto;
Dis que la hauteur doit être choisie "automatiquement" donc annule le height:20px de tantôt.

Code:
text-align:center;
Choisi l'alignement du texte dans la case ( ici choisi qu'il soit centré ).

Code:
font-size:11px;
Choisi la taille de la police, 11 pixels donc.

Code:
padding-top:35px;
Met une marge intérieur entre le bord haut et le texte de 35 pixels ( c'est pour que le texte ne soit pas au dessus et soit en dessous de l'image ).

Code:
color:#999;
Choisi une couleur #999999 pour la police d'écriture ( un gris ).

Code:
text-decoration:none;
Choisi que le texte ne soit pas souligné ( par défaut un lien est souligné, donc il suffit de ne pas le mettre pour que ça soit souligné, mais pour un autre cas il faut mettre "text-decoration:underline" afin que ça mette un soulignement ).

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;}
Et pour en savoir plus sur les valeurs possibles de propriétés ( ou sur d'autres propriétés ) une recherche sur google avec le nom de la propriété et css donne des dizaines de résultat avec des bonnes explications ^^

( par exemple http://www.google.fr/search?q=bakcground-position+css )

Cordialement.
Ea

Ea
Aidactif
Aidactif

Messages : 23583
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification du code CSS du module PARTAGER

Message par sousou33 Mar 14 Juin 2011 - 11:48

Merci beaucoup!!!
Bon me reste plus qu'à m'y pencher sérieusement et essayer de modifier certaines choses!!!

@+
avatar

sousou33
***

Messages : 130
Inscrit(e) le : 02/01/2008

sousou33 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum