Changer l'aspect de son blog 9 - Couleurs, arrière-plan, bordures... des colonnes

Bon,  maintenant que vous savez comment trouver vos couleurs, vous pouvez maintenant les changer.  Mais voilà.. oû ?  On va toutes les faire !

Vous devez aller dans APPARENCES/EDITEZ LES FICHIERS DE CE MODELE/SÉLECTIONNEZ-FEUILLE DE STYLE GÉNÉRALE

Première chose. votre body... C'est l'arrière complet de votre page
Ce qui donne ceci, mon image noire rayée et la marge en haut

Maintenant le container ! C'est ce qui contiendra vos colonnes, le soutien pour l'écriture, etc

#container {
    width: 850px;  la largeur de votre tableau au complet, là où vous mettrez les images, votre bannière, votre texte par apprès.... la page de soutien. Attention, vous devrez en tenir compte plus tard quand vous mettrez la largeur de vos colonnes.  Aussi, faites votre bannière en conséquence si vous ne voulez pas un "vide" à côté ou dessous.
    padding: 10px; ça c'est une espèce de marge, il n'y a pas d'écriture qui peut aller là. correspond à la largeur du cercle 2
    background: #91918F url("https://storage.canalblog.com/48/17/236984/11220631.jpg") no-repeat 0% 0%;
ici c'est le cercle 2, et le 3 .  Le 3 correspond à la #91918f, couleur d'arrière plan si rien ne s'ajoute par dessus, c'est ce que vous verrez.  Comme il y a un "padding" de 10, vous le verrez de toute façon tout autour de votre page. L'url correspond à l'image du cerlce 2.  Comme il y a no-repeat à la fin, l'image ne s'affichera qu'une seule fois au lieu de se répéter tout le long de la page par le bas et par le large. 
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: double; Cercle 4, vous pouvez aussi mettre none pour pas de bordure ou dotted pour pointillé
    border-left-style: solid;
    border-width: 10px; cercle 1, la largeur de la bordure
    border-color: #FFFFFF; cercle 1, la couleur de la bordure
    margin-right: auto;
    margin-left: auto;

Ensuite le content ! Votre colonne principale. Là où vous écrirez vos texte, insérez vos photos...

#content {
    float: left; position de votre colonne principale, ici à gauche
    width: 625px;la largeur de votre colonne principale... attention, devra être ajusté selon la largeur de la bordure, du paddind de votre configuration du container.... vous verrez par la suite
    background-color: #F8F8F8;couleur de mon arrière-plan, ici c'est un peu gris très pâle.  C'est aussi ici que vous pourriez rajouter le code, url("https://storage.canalblog.com/48/17/236984/11220631.jpg") no-repeat 0% 0%;, en mettant repeat pour une image qui se reproduit si vous voudriez avoir une image d'arrière-plan au lieu d'une simple couleur.  Je ne vous le conseille pas trop à moins d'avoir une image très douce sinon, la lecture est difficile pour les autres.
    border-top-style: none; trait 3.. il n'y en tout simplement pas de bordure ici
    border-right-style: solid; no1
    border-bottom-style: solid; no1
    border-left-style: solid;no1
    border-width:10px;no1, l'épaisseur de la bordure
    border-color: #000000; no1, la couleur de la bordure
    overflow: hidden;

Petite note ici, vous pouvez voir par le cercle 2, que ma "colonne de droite" se retrouve dessous le content !

C'est parce que j'ai changé des configurations pour vous montrer l'épaisseur des bordures. 

En principe, cette page à une bordure de content de 2, ce qui est juste ok pour que ma colonne soit à côté.  Mais en mettant 10 et en ne changeant rien d'autre, la bordure affecte la largeur du content qui force la colonne de droite à se tasser et donc, à se mettre dessous. 

C'est là où je vous disais qu'il est important de bien calculer.  L'épaisseur de la bordure se rajoute à la largeur de la colonne, donc, si vous augmenter cette donnée, pensez à baisser les dimensions du WIDTH.

Maintenant la colonne de droite ( ici je vais vous indiquer seulement la colonne de droite mais c'est identique si vous avez un blog à trois colonnes, vous ne prendrez que l'autre marqué "leftbar"

donc maintenant le rightbar

#rightbar {
    float: left; toujours la possitionnement.
    width: 201px; Ici vous devez commencer à calculer.  Si mon body container fait 850, je dois enlever 625 pour le content, ensuite 4 pour 2 fois 2pixel de bordure, toujours pour le content ( ma vrai configuration!), ensuite, je dois compter que je mets 2 fois 10 pixels de bordure pour cet exemple, ce qui me reste 201 pixel pour la colonne de droite. Sinon, elle fera comme dans l'exemple précédent, elle se positionnera sous la colonne principale :-(... Ou si je ne mets pas assez de pixels, la bordure complètement à droite (2) ne sera pas alignée avec le reste  toujours ;(
    background-color: #91918F; Couleur d'arrière-plan,  ici j'ai mis identique à celle du container.  je ne voulais pas autre chose. Mais c'est aussi ici que vous pouvez mettre une image d'arrière-plan en ajoutant le code url... Toujours le même conseil, attention à votre image si vous voulez que le reste soit lisible. Si vous ne mettez rien à cet endroit, la colonne sera transparente et donc, si vous aviez un arrière-plan dans le container, il apparaîtra ici ! Cela peut être intéressant !
    border-top-style: none; no1
    border-right-style: solid; no2
    border-bottom-style: none; no3
    border-left-style: dotted; no4
    border-width: 10px; toujours ma largeur de bordure  no1-2-3 et 4
    border-color: #000000; toujours ma couleur de bordure..
    overflow: hidden;
}

Topbar-logo  ou votre bannière ! Bon si vous n'avez pas mis de bannière, c'est ici qu'apparaîtra votre titre écrit en gros !

#topbar-logo {
    border-top-style: double; no 2
    border-right-style: solid;no 1
    border-bottom-style: double;no 2
    border-left-style: double;no 2
    border-width: 10px; attention, ici les bordures s'appliqueront vers l'intérieur et non vers l'extérieur, à considérer en faisant votre bannière.
    border-color: #000000;
    background: #91918F url("https://storage.canalblog.com/25/18/236984/11220646.jpg") no-repeat 0% 0%;  ici vous mettez l'url de votre bannière.  Voir autre tut comment insérer une bannière sans s'ouvrir un autre compte pour plus d'indication si vous avez besoin.
      height: 200px; hauteur à ajuster selon la grandeur de votre bannière
        weight: 850px;largeur maximale de votre bannière, prendre en compte la largeur que vous avez indiquez à votre container... !!! ne pas mettre une bannière de 900 pixels si votre container n'en contient que 850 !
    display: block;

Je crois que rendue ici je ne suis plus obligée de vous indiquer "border-color" et background-color !

Ceci c'était pour changer l'apparence de vos colonnes.  Il y aura un autre tuto pour changer l'apparence de l'écriture, les liens... etc... Mais un peu plus tard..

Ce tuto est une gracieuseté de Frenchgirl

Comments

[babe]

j ai essayé ça marche pas, j ai pouratnt crée un message brouillon entré une image niet. et puis quanf on voit ta capture d'ecran sur le fond d'ecran body : y 'a un truc au dessus. est ce que ça avoir quelques chose ou pas le baba positon absolue? avant sur le tuto y avait une seule page pour les explications en mode avancé là faut aler fouiner et che un tel et chez l autre a ce demander si c est fait pour aixder ou pour qu'il soit referencer sur gogole..Jessaye de passer en mode avancé j y arrive mais pour apres le fond etc etc punaise c est d un chiant a aller se balader. j lache l affaire je vais chez blogspirit

[moi de mons]

sa ne ma pa du tt aidé g rien compri c nul

[Pikabo]

hello, je pige pas pour l'insertion d'ne image (en ce qui me concerne un fons genre papier froissé).
boulet du jour: je bloque sur l'url de mon fond de page!
est-ce que tout simplement je dois d'abord hénerger mon fond de page queque part?
merci
pikabo

[Enid]

"Editer les fichiers de ce modèle" se trouve en mode avancé, Isabelle.
Tu dois être en mode normal...à toi de voir si tu veux changer !

[Isabelle_G]

Bonsoir,

Un grand merci pour les tuto.

Moi j'ai un souci, je ne touve pas " EDITEZ LES FICHIERS DE CE MODELE " je suis dans APPARENCES j'ai deux choix "Liste des modèles" "Nouveau modèle" et c'est tout snifff.
Peut tu me dire ou exactement ce trouve "EDITEZ LES FICHIERS DE CE MODELE"
Meci a l'avance