Tutofaf

Un blog d'aide fait par les femmes au foyer pour les cyberquiches !

31 août 2007

Changer l'aspect de son blog 13- la feuille de style généralisée

Bon, avant d’aller indiquer quoi est quoi dans le code de la fameuse page « feuille de style général », je vous conseille quand même d’aller indiquer en mode normal la plupart de vos couleurs. Ce sera déjà cela de fait.

tut13a

Maintenant, examinons notre feuille de style

body {
 margin: 0px 0px 0px 0px;
text-align: center;

background-color: #333; couleur d’arrière-plan de base, endroit où nous pouvons mettre aussi une image d’arrière-plan (voir le tutoriel approprié)

tut13b

#container {
width: 908px; largeur de notre blog, y compris les colonnes. Vous pouvez ajuster (voir tutoriel approprié)
padding: 0px;

background-color: #66FFCC; couleur du blog central en arrière de tous les blocs. Peut aussi ajouter une image ici (VTA = Voir Tutoriel Approprié)
border-top-style: dashed; bordure en pointillée
border-right-style: dashed;
border-bottom-style: dashed;
border-left-style: dashed;

border-width: 5px; largeur de la bordure
border-color: #CC0000; bordure rouge
margin-right: auto;

margin-left: auto; on peut indiquer un nombre de px ici pour ajuster le blog contre l’écran.

tut13c

#content { colonne du centre seulement
float: left; va s’ajuster juste à gauche de la colonne de gauche… bien ajuster les dimensions sinon, elle va « flotter » en dessous (VTA)
width: 500px; largeur de notre colonne
background-color: #66FFCC; possibilité de mettre une image, attention, si l’image est trop texturée, votre texte risque d’être illisible.
border-top-style: double; la largeur de la bordure pour doit être au minimum de 3 px si vous voulez que le « qualificatif » de double s’applique.
border-right-style: double;
border-bottom-style: double;
border-left-style: double;
border-width: 3px;
border-color: #FF3300;
overflow: hidden;

tut13d

#rightbar { colonne de droite ( votre droite !)
float: left; elle aussi va s’ajuster sur la gauche de la colonne précédente.
width: 200px;

background-color: #0000CC; toujours possible d’ajouter une image, toujours mêmes règles
border-top-style: none; aucune bordure
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
overflow: hidden;

tut13e

#leftbar { colonne de gauche ! ben... l’autre droite !)
float: left;
width: 200px;
background-color: #669933; une image ?
border-top-style: dotted; bordure pointillée
border-right-style: dotted;
border-bottom-style: dotted;
border-left-style: dotted;
border-width: 1px;
border-color: #FFFFFF;
overflow: hidden;

tut13f

#topbar-logo { le rectangle de votre titre... attention, si vous vouliez mettre une bannière ici, il faut mettre une image, même bidon dans le mode normal à la place

tut13g

sinon, vous risquez d’avoir des problèmes d’affichage. Ne me demandez pas pourquoi mais bon, au moins vous êtes averti-e-s
border-top-style: solid; bordure ligne pleine
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-width: 3px;
border-color: #33FF99;

background: #FFFFCC; le lien url de votre bannière si c’est le cas
height: 0px; ajuster la hauteur selon la hauteur de votre bannière
display: none;

tut13h

vous voyez que la bordure de la page du blog entier s’applique par-dessus la bordure bleue du titre du blog

 

Section des liens

tut13i

Attention, tous les liens de votre site seront affectés par ces codes. Si une image est aussi un lien et que votre code de lien est « underline » pour le « text-decoration » votre image sera automatiquement soulignée aussi… Les pieds des messages, les listes de catégories sont aussi des liens dans votre blog.

a {
text-decoration: none;

a:link { lien “vierge” de tout click
color: #CCCC66;
text-decoration: none;

a:visited { indique par une autre couleur si désiré que le lien a déjà été cliqué
color: #CCCC66;
text-decoration: none;

a:active { si le lien s’affiche dans une autre fenêtre, couleur de lien pendant que celle-ci est ouverte
color: #FFFF99;
text-decoration: none;

a:hover { couleur de lien quand la souris passe dessus
color: #FFFF99;
text-decoration: none;

Les titres et le texte maintenant

Pour les trois codes de titres, les H1, H2 et H3 simples indiquent que la marge sera de zéro et qu’il n’y aura pas d’espacement « autour » d’eux. Le padding étant comme un coussin de X pixels qui empêche le texte de venir se coller trop proche si indiqué

h1 {
margin: 0px;
padding: 0px;

}

h2 {
margin: 0px;
padding: 0px;

}

h3 {
margin: 0px;
padding: 0px;

 

#topbar h1 {  le titre de votre blog, la grosseur de caractère, la police…
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #CC9933;
font-size: xx-large;
font-weight: bold;

font-style: normal;
text-align: left;

#topbar a { Vous voulez soulignez votre titre ? C’est ici
text-decoration: none;
color: #CC9933;
tut13j

#topbar h2 { le sous titre de votre blog
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FF00CC;
font-size: small;
font-weight: bold;

font-style: normal;
text-align: left;

tut13k

.blogbody { code de base qui affectera le contenu “texte” de votre blog
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FF0033;
font-size: small;
font-weight: normal;

font-style: normal;
text-transform: none;
padding: 10px;
text-align: left;
line-height: 150%;

}

.blogbody h2 { la date de votre blog)
font-family: Georgia, Times New Roman, Times, serif;
color: #999;
font-size: small;
font-weight: bold;

font-style: normal;
text-transform: uppercase;
text-align: left;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-width: 1px;
border-color: #;
margin-bottom: 10px;
padding: 3px;

}

.blogbody h3 { titre de chaque message
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFF33;
font-size: small;
font-weight: bold;

font-style: normal;
text-transform: none;
text-align: left;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
margin-bottom: 10px;
padding: 0px;

}

.blogbody p { texte du message
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FF0033;
font-size: small;
font-weight: normal;

font-style: normal;
text-transform: none;
text-align: left;
line-height: 150%;
margin-bottom: 10px;

}

.blogbody .itemfooter { pied des messages (posté par, commentaires...)
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000099;
font-size: x-small;

font-weight: normal;
font-style: normal;
text-transform: none;
text-align: left;
margin-bottom: 25px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 2px;
border-color: #;
padding: 0px;
clear: both;

}

.navlinks {

 padding: 10px;

Dans les colonnes maintenant

.navlinks .title { titre des catégories

font-family: Verdana, Arial, Helvetica, sans-serif;
color: #CCFF99;
font-size: small;
font-weight: bold;

font-style: normal;
text-transform: uppercase;
text-align: left;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
padding: 0px;

}

.navlinks ul {

padding: 0px;
margin: 0px 0px 20px 0px;
list-style-type: none;
margin: 0px 0px 20px 0px;

}

.navlinks li { le « li » indique une liste à puce… ici sans puce mais légèrement décalé par rapport au titre

 font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FF66FF;
font-size: x-small;
font-weight: normal;

font-style: normal;
text-align: left;
line-height: 150%;
margin-top: 10px;

}

.navlinks .item { liste sous les catégories

 font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FF66FF;
font-size: x-small;

font-weight: normal;
font-style: normal;
text-align: left;
line-height: 150%;
margin-top: 10px;
margin-bottom: 10px;

}

#calendar { tout pour le calendrier... amusez-vous
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FF66FF;
font-size: x-small;
line-height: 150%;
padding: 2px;
margin-bottom: 20px;

}

#calendar table {
width: 100%;
padding: 2px;
border-collapse: collapse;
border: 0px;

}

#calendar caption {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FF66FF;
font-size: x-small;
font-weight: bold;
text-align: center;
text-transform: uppercase;
padding: 3px;

}

#calendar th {
font-weight: normal;
text-align: center;

}

#calendar td {
text-align: center;

}

.image {
text-align: left;
margin-bottom: 20px;

}

.navlinks img { si vous voulez une bordure autour de vos images... TOUTES LES IMAGES
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-width: 1px;
border-color: #990066;

}Bon ici les codes recommencent mais cette fois-ci pour l’album photo si vous en avez-un. Je crois que vous êtes maintenant capable.

#album-container {

 width: 908px;

 padding: 0px;

 background-color: #669999;

Ce tut est une gracieuseté de Frenchgirl

Posté par frenchgirl à 21:51 - 5- Mode avancé - Commentaires [2] - Permalien [#]

Commentaires

    rien àd redire ... Ca c'est du boulot ... lol

    Posté par mookie, 31 octobre 2007 à 11:53
  • Merci, merci, merci, merci, merci, merci, merci, merci, merci et encore mille fois merci, merci, merci, merci pour votre blog.

    Posté par lauca, 30 novembre 2007 à 07:29

Poster un commentaire







Haut de Page