Déjà évoquer plus bas, le CSS (feuille de style) renferme les caractéristiques principales de mise en forme du blog: Texte, Liens, Couleurs, Polices, Dimensions des blocs et même plus...
La modification du fichier CSS s'adresse à des utilisateurs avancés, mais il est possible de commencer assez facilement en changeant quelques couleurs par exemple.
1 - Il faut d'abord être en mode avancé (voir sous/menu page d'accueil) puis aller dans > Design > sous menu > Modifier le CSS.
Vous avez alors accès au fichier complet qui regroupe toutes les caractéristiques!
Chaque modèle de design pré configuré dispose de sa propre feuille de style, celle que vous ouvrez correspond donc au modèle que vous avez sélectionné dans le menu Design.
Un conseil à suivre, faites un copier/coller de ce fichier complet et enregistrez le sur votre PC comme un fichier texte (.txt)! Vous pourrez le remettre en cas de problème.
Des exemples pour faire simple:
h1 { color: #3366CC; font-size: 20px; } /*titre des pages*/
(color: #3366CC; correspond à la couleur du titre du blog (en texte))
a { text-decoration:underline; color:#3366CC; font-size:100%; } /* liens des pages */
(color:#3366CC; correspond à la couleur d'un lien)
a:hover { text-decoration:none; color:#666666 } /* liens survoles*/
(color:#666666; corrspond à la couleur d'un lien survolé avec la souris)
/* ------------------entete ---------------------*/
#header { text-align:left; background-color:#CC3300; border:0px none; margin-bottom:5px; position:relative;} /*div contenant l'entete du blog*/
text-align:left; = le titre sera aligné à gauche
background-color:#CC3300; = la couleur de fond du header (ici en rouge)
Ainsi de suite, chaque élément de la page est défini ainsi et regroupé par ensemble:
Structure ( général)
Box (les blocs modules dans les colonnes)
Entête (la partie haute du blog)
Bas de page (le pied du blog)
Articles (l'article dans la partie centrale)
etc...
Certains changements vont s'appliqués à l'ensemble du blog et d'autres à seulement une partie en fonction de la modification.
Les couleurs sont toujours définies par les 6 chiffres/lettres qui correspondent à chaque couleurs web.
par exemple: #000000 = noir / #FFFFFF = blanc / #CC0000 = rouge / #3399FF = bleu etc....
Pour changer une couleur, il suffit donc de choisir dans la palette web et de changer le code de la couleur dans le CSS que ce soit pour du texte (color:#000000; ) ou un fond (background-color:#CC3300;)
D'autres éléments sont définis dans le CSS comme les dimensions (en px ou %), les positionnements, les largeurs, les marges, les bordures... c'est un peu plus complexe et s'adresse à ceux qui veulent aller plus loin!
Il y a beaucoup de ressources sur le net sur le sujet CSS et HTML!
Un lien parmis tant d'autre sur les CSS
Un autre sur les propriétés CSS
Tutos Alsacréations, css et +
Les couleurs web:
La modification du fichier CSS s'adresse à des utilisateurs avancés, mais il est possible de commencer assez facilement en changeant quelques couleurs par exemple.
1 - Il faut d'abord être en mode avancé (voir sous/menu page d'accueil) puis aller dans > Design > sous menu > Modifier le CSS.
Vous avez alors accès au fichier complet qui regroupe toutes les caractéristiques!
Chaque modèle de design pré configuré dispose de sa propre feuille de style, celle que vous ouvrez correspond donc au modèle que vous avez sélectionné dans le menu Design.
Un conseil à suivre, faites un copier/coller de ce fichier complet et enregistrez le sur votre PC comme un fichier texte (.txt)! Vous pourrez le remettre en cas de problème.
Des exemples pour faire simple:
h1 { color: #3366CC; font-size: 20px; } /*titre des pages*/
(color: #3366CC; correspond à la couleur du titre du blog (en texte))
a { text-decoration:underline; color:#3366CC; font-size:100%; } /* liens des pages */
(color:#3366CC; correspond à la couleur d'un lien)
a:hover { text-decoration:none; color:#666666 } /* liens survoles*/
(color:#666666; corrspond à la couleur d'un lien survolé avec la souris)
/* ------------------entete ---------------------*/
#header { text-align:left; background-color:#CC3300; border:0px none; margin-bottom:5px; position:relative;} /*div contenant l'entete du blog*/
text-align:left; = le titre sera aligné à gauche
background-color:#CC3300; = la couleur de fond du header (ici en rouge)
Ainsi de suite, chaque élément de la page est défini ainsi et regroupé par ensemble:
Structure ( général)
Box (les blocs modules dans les colonnes)
Entête (la partie haute du blog)
Bas de page (le pied du blog)
Articles (l'article dans la partie centrale)
etc...
Certains changements vont s'appliqués à l'ensemble du blog et d'autres à seulement une partie en fonction de la modification.
Les couleurs sont toujours définies par les 6 chiffres/lettres qui correspondent à chaque couleurs web.
par exemple: #000000 = noir / #FFFFFF = blanc / #CC0000 = rouge / #3399FF = bleu etc....
Pour changer une couleur, il suffit donc de choisir dans la palette web et de changer le code de la couleur dans le CSS que ce soit pour du texte (color:#000000; ) ou un fond (background-color:#CC3300;)
D'autres éléments sont définis dans le CSS comme les dimensions (en px ou %), les positionnements, les largeurs, les marges, les bordures... c'est un peu plus complexe et s'adresse à ceux qui veulent aller plus loin!
Il y a beaucoup de ressources sur le net sur le sujet CSS et HTML!
Un lien parmis tant d'autre sur les CSS
Un autre sur les propriétés CSS
Tutos Alsacréations, css et +
Les couleurs web:
| FFFFFF | FFFFCC | FFFF99 | FFFF66 | FFFF33 | FFFF00 |
| FFCCFF | FFCCCC | FFCC99 | FFCC66 | FFCC33 | FFCC00 |
| FF99FF | FF99CC | FF9999 | FF9966 | FF9933 | FF9900 |
| FF66FF | FF66CC | FF6699 | FF6666 | FF6633 | FF6600 |
| FF33FF | FF33CC | FF3399 | FF3366 | FF3333 | FF3300 |
| FF00FF | FF00CC | FF0099 | FFFFFF | FF0033 | FF0000 |
| CCFFFF | CCFFCC | CCFF99 | CCFF66 | CCFF33 | CCFF00 |
| CCCCFF | CCCCCC | CCCC99 | CCCC66 | CCCC33 | CCCC00 |
| CC99FF | CC99CC | CC9999 | CC9966 | CC9933 | CC9900 |
| CC66FF | CC66CC | CC6699 | CC6666 | CC6633 | CC6600 |
| CC33FF | CC33CC | CC3399 | CC3366 | CC3333 | CC3300 |
| CC00FF | CC00CC | CC0099 | CC0066 | CC0033 | CC0000 |
| 99FFFF | 99FFCC | 99FF99 | 99FF66 | 99FF33 | 99FF00 |
| 99CCFF | 99CCCC | 99CC99 | 99CC66 | 99CC33 | 99CC00 |
| 9999FF | 9999CC | 999999 | 999966 | 999933 | 999900 |
| 9966FF | 9966CC | 996699 | 996666 | 996633 | 996600 |
| 9933FF | 9933CC | 993399 | 993366 | 993333 | 993300 |
| 9900FF | 9900CC | 990099 | 990066 | 990033 | 990000 |
| 66FFFF | 66FFCC | 66FF99 | 66FF66 | 66FF33 | 66FF00 |
| 66CCFF | 66CCCC | 66CC99 | 66CC66 | 66CC33 | 66CC00 |
| 6699FF | 6699CC | 669999 | 669966 | 669933 | 669900 |
| 6666FF | 6666CC | 666699 | 666666 | 666633 | 666600 |
| 6633FF | 6633CC | 663399 | 663366 | 663333 | 663300 |
| 6600FF | 6600CC | 660099 | 660066 | 660033 | 660000 |
| 33FFFF | 33FFCC | 33FF99 | 33FF66 | 33FF33 | 33FF00 |
| 33CCFF | 33CCCC | 33CC99 | 33CC66 | 33CC33 | 33CC00 |
| 3399FF | 3399CC | 339999 | 339966 | 339933 | 339900 |
| 3366FF | 3366CC | 336699 | 336666 | 336633 | 336600 |
| 3333FF | 3333CC | 333399 | 333366 | 333333 | 333300 |
| 3300FF | 3300CC | 330099 | 330066 | 330033 | 330000 |
| 00FFFF | 00FFCC | 00FF99 | 00FF66 | 00FF33 | 00FF00 |
| 00CCFF | 00CCCC | 00CC99 | 00CC66 | 00CC33 | 00CC00 |
| 0099FF | 0099CC | 009999 | 009966 | 009933 | 009900 |
| 0066FF | 0066CC | 006699 | 006666 | 006633 | 006600 |
| 0033FF | 0033CC | 003399 | 003366 | 003333 | 003300 |
| 0000FF | 0000CC | 000099 | 000066 | 000033 | 000000 |
| FFFFFF | EEEEEE | DDDDDD | CCCCCC |
| BBBBBB | AAAAAA | 999999 | 888888 |
| 777777 | 666666 | 555555 | 444444 |
| 333333 | 222222 | 111111 | 000000 |
publié par admin dans: Aide CSS/Design
