Aide CSS Les créations de [dd]

Dimanche 16 mars 2008

Modèles de design

Voici une petite liste de sites qui proposent des kits gratuits. Vous pourrez surement y piocher de belles images !

http://www.metamorphozis.com/

http://www.openwebdesign.org/

http://www.opendesigns.org/

http://templates.arcsin.se/

http://www.free-css-templates.com/free-templates.html

http://www.oswd.org/

http://www.opensourcetemplates.org/

http://www.themesbase.com/

http://www.osskins.com/main/

http://www.freetemplatesonline.com/

http://www.templateworld.com/free_templates.html

publié dans : Aide CSS par [dd]
ajouter un commentaire commentaires (13)

Mercredi 12 mars 2008

Fonds pour blog Chiyogami

Une multitude de fonds pour un usage non commercial uniquement :

http://chiyogami.atelier-media.net/

fond pour blog original

fond Chiyogami pour blog original

Pensez bien à créditer leurs talentueuses auteur(e)s par un petit lien !

Enjoy ^^

publié dans : Aide CSS par [dd]
ajouter un commentaire commentaires (8)

Lundi 10 mars 2008

Propriétés et valeurs des CSS les plus courantes

Tableau résumant toutes les propriétés et valeurs possibles (les plus courantes) pour définir une feuille de style :

Propriété	Valeur(s)	Description	Exemple
font-size	xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller, ou taille défini en pixels (px) cm (cm), mm (mm), point (pt), pourcentage (%)	Taille de la police	{font-size: 12pt}
font-family	serif, sans-serif, cursive, fantasy, monospace, ou nom de la police (Arial, Verdana, etc...)	type de police	{font-family: Arial}
font-weight	normal, bold, bolder, lighter, ou valeur numérique de 100 à 900 (par tranche de 100)	Poids de la police	{font-weight: bold}
font-style	normal, italic, oblique	style de la police	{font-style: italic}
font-variant	normal, small-caps	Variante de la police	{font-variant: small-caps}
line-height	point (pt), pourcentage (%)	Hauteur de la ligne	{line-height: 5pt}
color	nom ou valeur hexadécimale de la couleur	Couleur de la police	{color: green}
background-image	URL du fichier	Image d'arrière-plan	{background-image: url(image/fichier.gif)}
background-repeat	repeat , no-repeat, repeat-x, repeat-y	Répétition de l'arrière-plan	{background-repeat: no-repeat}
background-attachment	scroll, fixed	Effet de filigrane	{background-attachment: fixed}
background-position	top, center, bottom, left, right	Position de l'arrière-plan (verticale et horizontale)	{background-position: center center}
vertical-align	baseline, sub, super, top, text-top, middle, bottom, text-bottom, ou valeurs en pourcentage	Alignement vertical	{vertical-align: top}
text-align	left, right, center, justify	Alignement du texte	{text-align: justify}
text-indent	valeur en pixel ou pourcentage	Retrait de la première ligne	{text-indent: 10px}
text-decoration	none, underline, overline, line-through	Décoration du texte	{text-decoration: overline}
text-transform	capitalize, uppercase, lowercase, none	Casse du texte	{text-transform: none}
margin-left (ou -right, -top, -bottom)	valeur en pixel ou pourcentage	Valeurs des marges	{margin-right: 10px}
padding-left (ou -right, -top, -bottom)	valeur en pixel ou pourcentage	Remplissage du bloc	{padding-left: 15pt}
border-left (ou -right, -top, -bottom)	medium, thick, ou un style	type de bordure	{border-top: medium}
border-x-width (x à remplacer par right, left, top, bottom)	medium, thick ou taille.	Taille de la bordure	{border-top-width: 15}
border-style	none, dotted, dashed, solid, double, groove, ridge, inset,outset	style de la bordure	{border-stylet: ridge}
border-color	nom ou valeur hexadécimale de la couleur	Couleur de la bordure	{border-color: red}
float	none, left, right, both	Alignement d'un bloc par rapport à un autre	{float: right}
clear	none, left, right,both	Autorise l'alignement d'un bloc par rapport à un autre	{clear: right}
letter-spacing	normal ou valeur en point	Esapcement des lettres	{letter-spacing: 2pt}

Provenant de AllHTML.com...

publié dans : Aide CSS par [dd]
ajouter un commentaire commentaires (9)

Vendredi 7 mars 2008

Personnaliser le style des commentaires

Les éléments du CSS permettant la modification de la mise en forme des commentaires sont :

.comment un commentaire de manière générale
.commentMessage le texte d'un commentaire
.commentOption les informations sur un commentaire: date, pseudo, etc..
.responseMessage le commentaire réponse de manière générale

On pourra leur attribuer une couleur en guise de fond
ex : .comment {background-color:white;}
Une image en guis de fond
ex : .comment {background-image:url(url-de-votre-image);}
Une couleur particulière au texte
ex : .commentMessage{colr:black;}
Un alignement particulier du texte
ex : .responseMessage{text-align:right;}
Une police particulière du texte
ex : .commentMessage{font-family:police1, police2, police3, police4;}

CF l'article Formatage du texte pour plus d'idées de modifications ;)

publié dans : Aide CSS par [dd]
ajouter un commentaire commentaires (16)

Jeudi 6 mars 2008

Avoir un style différent pour chaque module

Nous avons vu comment modifier le fond des modules (Modifier le fond des articles et modules), mais comment faire pour que chaque module ait un fond ou une couleur de texte différent des autres?

Voici la liste des classes correspondant aux différents modules :

.articlerecent : le module de la liste des articles récents
.lien : les liens
.recherche : le module de recherche
.recommander : le module "recommander"
.archive : les archives
.calendrier : le calendrier
.w3c : le module W3C (Syndication)
.concours : le module "over-blog - créer un blog"
.categorie : la liste des catégories
.album : les albums photos
.newsletter : le module "newsletter"
.presentation : la présentation du blog
.aleaIm : le module des images aléatoires
.commentrecent : les commentaires
.community : les communautés
.pub : les modules de publicité
.profil : le module du profil
.pages : le module de la liste des pages
.text : les modules "texte libre". Il est possible de les identifier manuellement.

Dans chacun, vous pourrez préciser un fond ou une police qui ne sera appliquer qu'à ce module.

EXEMPLE : Je veux modifier l'image de fond du titre du module des album photos :

.album .box-titre {background-image:url(http://url_de_votre_image) no-repeat center;}

/* je choisis ici de centrer l'image et de ne pas la répeter si jamais elle ne prenait pas toute la hauteur ou largeur */

publié dans : Aide CSS par [dd]
ajouter un commentaire commentaires (8)

Samedi 1 mars 2008

Modifier la largeur de votre blog, des colonnes articles et modules

Comment modifier la largeur totale de son blog sous Over-Blog?
Comment modifier la largeur de la colonne des articles?
Comment modifier la largeur de ma colonne de gauche contenant mes modules?
Et celle de droite?
Comment modifier la largeur de mon entête et pied de page?

Avant de commencer à répondre à ces questions, il est important de connaître la structure du blog sous Over-Blog :

ICI

Nous avons donc compris que le blog comprend une entête (#cl_0_0), une colonne d'articles(#cl_1_1), eventuellement un colonne à gauche(#cl_1_0) et un colonne à droite(#cl_1_2), et un pied de page(#cl_2_0).
Tous ces éléments sont contenus dans un élément #global.
C'est donc lui qui définit la largeur totale du contenu de votre blog (par exemple 100% de l'écran, ou encore 800px...).

On peut donc dire (en considérant seulement les largeurs) que
#global = #cl_1_0 + #cl_1_1 + #cl_1_2

Et généralement #global = #cl_0_0 = #cl_2_0

Pour modifier ces largeurs, voici le code à insérer ou modifier dans votre CSS :
#global {width: XXX;}
#cl_0_0 {width:XXX;}
#cl_1_0 {width:XXX;}
#cl_1_1 {width:XXX;}
#cl_1_2 {width:XXX;}
#cl_2_0 {width:XXX;}
XXX sera la largeur relative (en pourcentage -%-) ou absolue (en pixels -px- ).