Vous n'êtes pas connecté. Connectez-vous ou enregistrez-vous

[ ↓ ]

Voir le sujet précédent Voir le sujet suivant Message [Page 1 sur 1]

Milouze14


Fondateur

Milouze14

Message posté: le Mar 27 Mar 2012 - 18:47
Cette astuce vous permettra d'avoir la même apparence sur tous les règlements internes
de vos forums.
Voir l'effet en images:



Tout se passe dans la feuille de style, donc nul besoin d'aller farfouiller dans la template
concernée.
Nous allons utiliser les pseudo éléments "before et "after" .

Allez c'est parti....

Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Les images sont hébergées sur mon nom de domaine ,
pour un affichage constant.
Bref, je vous demande donc d'enregistrer ces dernières
sur votre disque dur et ensuite de les héberger vous même.
Ou encore mieux utiliser les vôtres .
Adaptez les pourcentages par rapport à la largeur de votre body.
Sur ce forum la structure est basée sur 80%.
Code:

/*Le coté important*/
#forum_rules.forumline:before
{
content:'Important.';/*le texte à modifier si besoin*/
background: url(http://milouze14.fr/Info2_16.png)no-repeat left; /* l'image et sa position à gauche*/
color:#A4405B;/*la couleur du texte*/
font-size:14px;  /*la taille de la police*/
font-weight:bold;  /*le texte est affiché en gras*/
padding-left:2%;/* le texte sera décalé de 2% par rapport à l'image*/
margin-left:35%; /*le contenu sera placé à 35% de la gauche*/
}
/*Le coté Merci de le suivre à la lettre*/
#forum_rules.forumline:after
{
content:'Merci de le suivre à la lettre.';/*le texte à modifier si besoin*/
background: url(http://milouze14.fr/Face_Happy.png)no-repeat right; /* l'image et sa position à droite*/
color:#A4405B;/*la couleur du texte*/
font-size:14px;  /*la taille de la police*/
  font-weight:bold; /*le texte est affiché en gras*/
padding-right:2%;/* le texte sera décalé de 2% par rapport à l'image*/
margin-left:35%; /*le contenu sera placé à 35% de la gauche*/
}
/*Le coté Règlement à suivre*/
#forum_rules .postbody:before
{
  content:'Règlement à suivre:';/*le texte à modifier si besoin*/
  color:#A4405B;/*la couleur du texte*/
  font-size:11px;  /*la taille de la police*/
  font-weight:bold; /*le texte est affiché en gras*/
background: url(http://milouze14.fr/green-icone26.png)no-repeat right;/* l'image et sa position à droite*/
  padding-right:20px;/* le texte sera décalé de 20px par rapport à l'image*/
}
/*Le coté Fin de la procédure*/
#forum_rules .postbody:after
{
  content:'Fin de la procédure.';/*le texte à modifier si besoin*/
  color:#A4405B;/*la couleur du texte*/
  font-size:11px; /*la taille de la police*/
  font-weight:bold; /*le texte est affiché en gras*/
background: url(http://milouze14.fr/green-icone27.png)no-repeat left;/* l'image et sa position à gauche*/
 padding-left:20px;/* le texte sera décalé de 20px par rapport à l'image*/
}

Pensez à cliquer sur le bouton Valider

Voilà, c'est tout pour le moment.





Fondateur des forums Milouze14

- Contact par MP -



Voir le sujet précédent Voir le sujet suivant Message [Page 1 sur 1]

[ ↑ ]

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

 
  • © PunBB | Signaler un abus