BlogTuto

Tuto pour blog et assistance blogueur. Dépannage des blogueurs, passage en mode avancé accompagné, relooking blog, bannière pour blog

Attention !
Ce blog a déménagé et n'est plus mis à jour. Rendez vous sur le nouveau blog :

http://www.blogtuto.org/

lundi 07 avril

Comprendre la feuille de style

body {                                        <-- fond de la page tout entière
    margin: 0px 0px 0px 0px;
    text-align: center;
    background-color: #ADA59D; <-- Couleur du fond
}
#container {               <-- page centrale du blog = titre + colonne + espace texte
    width: 1000px;        <-- largeur du tableau au complet colonne(s) + espace texte
    padding: 0px;
    background-color: #FDF7FB;       
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    border-width: 1px;
    border-color: #;
    margin-right: auto;
    margin-left: auto;
}
#content {           <-- Espace texte
    float: left;
    width: 800px;        <-- largeur de la colonne espace texte
    background-color: #FFFFFF;         <-- couleur fond espace texte
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    border-width: 1px;
    border-color: #;
    overflow: hidden;
}
#rightbar {        <-- Colonne de droite
    float: left;
    width: 0px;            <-- largeur colonne
    heigth: 0px;            <-- longueur colonne, ne figure pas toujours par défaut
    background-color: #999999;      <-- couleur arrière plan colonne
    border-top-style: none;           <-- couleur du cadre haut
    border-right-style: none;          <-- couleur du cadre droit
    border-bottom-style: none;          <-- couleur boutons
    border-left-style: none;          <-- couleur du cadre gauche
    border-width: 1px;           <-- largeur des bords
    border-color: #;           <-- couleur des bords
    overflow: hidden;
}
#leftbar {           <-- Colonne de gauche idem ensuite que pour la colonne de droite
    float: left;
    width: 200px;
    background-color: #FDF7FB;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    border-width: 1px;
    border-color: #;
    overflow: hidden;
}
#topbar-logo {           <-- Bannière
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    border-width: 1px;
    border-color: #;
    background: url(" https://p3.storage.canalblog.com/37/09/446950/24117946.jpg") no-repeat 0% 0%;           <-- le code de la bannière vient ici
    height: 200px;           <-- hauteur de la bannière à renseigner
    display: block;
}
div .logolink a {          <-- lien de la bannière vers la page d'accueil
    display: block;
    text-decoration: none;
    width: 100%;
    height: 200px;          <-- hauteur de la bannière à renseigner
}
#topbar {          <-- Entête
    background-color: #F4EFF7;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    border-width: 1px;
    border-color: #;
    padding: 10px;
    display: none;
}
a {
    text-decoration: none;
}
a:link {          <-- liens
    color: #6C2A4B;
    text-decoration: none;
}
a:visited {          <-- liens visités
    color: #6C2A4B;
    text-decoration: none;
}
a:active {          <-- liens actifs
    color: #6C2A4B;
    text-decoration: underline;
}
a:hover {
    color: #6C2A4B;
    text-decoration: none;
}
h1 {           <-- Titres des rubriques et des billets
    margin: 0px;
    padding: 0px;
}
h2 {          <-- dates
    margin: 0px;
    padding: 0px;
}
h3 {           <-- texte bas de page "commentaires"
    margin: 0px;
    padding: 0px;
}
#topbar h1 { <---- texte de la bannière
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #7F1B58;
    font-size: xx-large;
    font-weight: bold;
    font-style: normal;
    text-align: left;
}
#topbar a {
    text-decoration: none;
    color: #7F1B58;
}
#topbar h2 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #404040;
    font-size: small;
    font-weight: normal;
    font-style: normal;
    text-align: left;
}
.blogbody { <---------- texte
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #404040;
    font-size: small;
    font-weight: normal;
    font-style: normal;
    text-transform: none;
    padding: 10px;
    text-align: left;
    line-height: 150%;
}
.blogbody h2 { <------- date
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #591B3A;
    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 h3 {          <-- Eléments relatifs au titre d'un billet
    font-family: Verdana, Arial, Helvetica, sans-serif; <------- police
    color: #000000; <-- Couleur du titre
    font-size: small;<-- taille police
    font-weight: bold;<-- gras '"bold" ou "normal"
    font-style: normal;<-- "italic" ou "normal"
    text-transform: none;<-- majuscule = UPPERCASE sinon laisser tel quel
    text-align: left;<-- alignement du texte left, center ou right
    border-top-style: none;<-- cadre
    border-right-style: none;<-- cadre droit
    border-bottom-style: none;<-- bord cadre bas
    border-left-style: none;
    border-width: 1px; <-- largeur de la bordure
    border-color: #;
    margin-bottom: 10px; <-- Espace entre titre et texte
    padding: 0px;
}
.blogbody p { <-- texte des billets
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #404040;
    font-size: small;
    font-weight: normal;
    font-style: normal;
    text-transform: none;
    text-align: left;
    line-height: 150%;
    margin-bottom: 10px;
}
.blogbody .itemfooter {<-- pied de page
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #404040;
    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;
}
.navlinks .title {<-- Titres des catégories
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #591B3A;
    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 { <------- liens dans les colonnes introduit par l'attribut <ul>
    padding: 0px;
    margin: 0px 0px 20px 0px;
    list-style-type: none;
    margin: 0px 0px 20px 0px;
}
.navlinks li { <------- liens dans les colonnes introduit par la puce <li>
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #404040;
    font-size: x-small;
    font-weight: normal;
    font-style: normal;
    text-align: left;
    line-height: 150%;
    margin-top: 10px;
}
.navlinks .item { <------- liens dans les colonnes introduit par <item> ex : contactez l'auteur
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #404040;
    font-size: x-small;
    font-weight: normal;
    font-style: normal;
    text-align: left;
    line-height: 150%;
    margin-top: 10px;
    margin-bottom: 10px;
}
#calendar {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #404040;
    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: #404040;
    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 { <------ image dans les colonnes
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-width: 0px;
    border-color: #000000;
}
#album-container {
    width: 800px;
    padding: 0px;
    background-color: #FDF7FB;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    border-width: 1px;
    border-color: #;
    margin-right: auto;
    margin-left: auto;
}
#album-content {
    float: left;
    width: 550px;
    background-color: #FDF7FB;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    border-width: 1px;
    border-color: #;
    overflow: hidden;
}
#album-nav {
    float: left;
    width: 250px;
    background-color: #FDF7FB;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    border-width: 1px;
    border-color: #;
    overflow: hidden;
}
.albumcol table {
    padding: 2px;
    border-collapse: collapse;
    border: 0px;
    font-size: x-small;
}
.albumcol td {
    text-align: center;
}
.albumbody {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #404040;
    font-size: small;
    font-weight: normal;
    font-style: normal;
    text-transform: none;
    padding: 10px;
    text-align: left;
    line-height: 150%;
}
.albumcol {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #404040;
    font-size: small;
    font-weight: normal;
    font-style: normal;
    text-transform: none;
    padding: 10px;
    text-align: left;
    line-height: 150%;
}
.albumcol h3 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #000000;
    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;
}
.albumbody h2 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #591B3A;
    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;
}
.albumbody img {
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-width: 1px;
    border-color: #000000;
}
.albumcol img {
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-width: 1px;
    border-color: #000000;
    margin: 2px;
}
.albumbody p {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #404040;
    font-size: small;
    font-weight: normal;
    font-style: normal;
    text-transform: none;
    text-align: left;
    line-height: 150%;
    margin-bottom: 10px;
}
.albumcol p {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #404040;
    font-size: small;
    font-weight: normal;
    font-style: normal;
    text-transform: none;
    text-align: left;
    line-height: 150%;
    margin-bottom: 10px;
}
.clear {
    clear: both;
    height: 0px;
    line-height: 0px;
}

Ce Tuto indispensable vous est offert par SILO - Merci à elle

Si vous souhaitez participer et contribuer à Blogtuto en parrainant un tuto, faites un don dès maintenant!

N'oubliez pas en commentaire de laisser l'adresse de votre blog pour que je puisse vous mettre en parrain ou marraine sur le tuto à venir. Merci d'avance!


Tags :
Posté par Lavande à 16:26 - Mode avancé - Commentaires [3] - Permalien [#]



Commentaires

    hop hop trop top

    quelle bonne idée, c'est trop génial d'avoir publié les explications de la feuille de style
    c'est clair, net et sans bavure
    est ce que je m'y retrouverais sur dotclear, je vais voir çà rapido
    un grand merci
    Tine

    Posté par Chez Tine, lundi 14 avril à 20:45
  • j'ai un souci, j'ai rien changé dans la feuille de style et sur ma page d'accueil, les textes sont plus gros que sur les autres pages!!! je fais comment pour tout remettre pareil?

    Posté par choukette, lundi 02 juin à 14:47
  • Bonsoir!
    J'aimerai savoir quelle partie correspond à l'image d'un billet (pour y mettre un encadré) au sein de la feuille de style, merci
    et bon dimanche

    Posté par Pupuce, dimanche 31 août à 15:04

Poster un commentaire







Haut de Page