Changer le fond de page
Par Kozlika le samedi 8 mai 2004, 12:35 - Lien permanent
Je commence à m’y retrouver un peu dans les différents éléments (blocs) contenus dans la fenêtre. Pour mieux comprendre qu’est-ce qui fait quoi, j’ai comparé la feuille css d’origine avec la feuille d’un autre blog (merci Angrave). En voyant les différences entre l’une et l’autre, ça facilite.
L’autre bonne idée c’est bien entendu les tutoriels qu’on trouve sur le net. J’ai notamment consulté Openweb ou Alsacréations quand je butais sur des trucs que je n’arrivais pas à maîtriser par la simple comparaison.
Un fond blanc
La partie BODY de la feuille de style par défaut me dit que la couleur de fond « background » est #e1e1e1 (soit gris). Je la remplace derechef par #ffffff c’est-à-dire blanc. Et hop ! je recharge la nouvelle feuille, je regarde, et… zut, il y a une espèce de ligne verticale (celle qui faisait l’ombre sur le modèle) qui est toujours là. Diable diable… et puis je constate qu’en fait cette ligne commence sous la têtière, donc elle doit être dans la partie Page.
En effet, je vois une image dans la description de Page. C’est à cette ligne-là :
- background: #FFF url(images/bg.png) repeat-y left;
Donc: fond blanc, une image (url) qui se répète verticalement (y) à gauche (left). Manifestement le fait que le nombre de fois où cette image est répétée ne figure pas doit signifier qu’elle se répète à l’infini.
Hop ! je vire cette ligne. Retour au blog.
Aaaaaaargh ! tout est collé au bord de la fenêtre du navigateur ! Mais enfin au moins c’est blanc, uniformément blanc (à part le bandeau mais je m’en occuperai plus tard). C’est que l’image servait aussi à créer une marge par rapport au bord du body. J’ajoute donc dans la partie body une petite ligne :
- margin-left : 20px;
(ne pas oublier le point-virgule à la fin de la ligne)
De cette façon j’espère obtenir une marge constante de 20 pixels à gauche. Ouf! ça marche.
Supprimer la couleur au fond du bandeau
C’est un peu la même manoeuvre. Je supprime la ligne :
- background: #545454 url(images/head.png) repeat-x 0 6px;
(les plus futés remarqueront qu’ici l’image se répétait horizontalement par “repeat-x”)
Voilà, ça commence à prendre tournure.
Placer une image en haut à gauche
J’ai confectionné une image qui me plaît bien pour agrémenter la présentation un peu austère maintenant. La mienne fait environ 180 x 180 pixels mais la taille n’a aucune importance. Je commence par la télécharger dans mon dossier Images de mon espace Free.
Voilà ce que je voudrais : que cette image soit présente tout le temps, même quand le lecteur fera défiler la page avec l’ascenseur. Si je la mets dans TOP elle bougera avec l’en-tête. L’endroit où la mettre est donc dans le BODY. J’ajoute donc une ligne dans le body :
- background-image: url(http://MonSite.free.fr/Images/MonImage.png);
je ne veux pas qu’elle se répète. J’ajoute sous cette ligne une autre :
- background-repeat: no-repeat;
Je ne veux pas qu’elle bouge quand on fait défiler la page, j’ajoute encore :
- background-attachment:fixed;
Pour tout vous dire je ne suis pas certaine que ces deux lignes soient indispensables mais comme j’ai vu ça partout, je l’ai mis ;-).
La couleur des liens
Tant que j’y suis, je modifie dans cette partie body la couleur des liens par défaut dans cette ligne-là :
- a {
color : #ff6E602F;
et je me garde dans un coin de la tête qu’il faudra que je m’occupe des autres couleurs de a (mais je n’ai pas encore tout compris).
… et autres menus détails
J’en profite pour modifier la présentation du titre du blog. Ça se passe dans la zone TOP. où je modifie la police avec « font-family » ; la taille de la typo avec « font-size » ; la couleur avec « font-color » (ne pas oublier aussi la couleur de la typo dans la sous-partie “a” de la partie top).
Et voilà. Satisfaite du travail accompli, je laisse reposer… en attendant la suite !
Commentaires
les explications de cet article sont tout à fait exactes, bravo :-)
Les différentes parties de la classe a (c'es-à-dire les liens) représentent les différentes états d'un lien.
Quand il est survolé, quand il est cliqué, quand il a déjà été cliqué, quand il est là point barre...
Quelques liens:
-> docs.mandragor.org/files/...
-> openweb.eu.org/articles/i...
-> openweb.eu.org/articles/i...
MERCI !!!
Sincèrement... c'est grâce à toi que hier, dans le train au retour du bureau... après avoir printé des dizaines de pages pour le lire durant mon retour que je me suis dit... ENFIN!!! voilà des explications claires et précises (et pas des concepts, c'est le concret qui pose souvent problème! ) ... j'ai compris concrètement comment toucher à ces fichiers de fous... template, css,... je suis loin de ton niveau mais grâce à toi je sais que le bout du tunnel existe. Je n'ai rien trouvé de si clair durant mes recherches car je pars réellement de 0!
Je te remercie très sincèrement!!! Je vais devenir un lecteur très assidu...
A bientôt!
Salut ! Attention à tes couleurs, en réalité quand tu définis une couleur avec #... Il doit y avoir 6 caractères. Il fonctionnent par paire dans cet ordre : Rouge, Vert Bleu. Et ce sont des valeurs exadécimales. (cf google pour une explication de cette base mathématique numérique) Donc pas de #FFF ou #ff62602F, ca n'a pas de sens et pourrait te causer des problemes. Voila @+ !
Tu te trompes game. On peut très bien définir les couleurs avec trois chiffres après le dièse si chacun de ces chiffres représente une paire semblable. #fff équivaut à #ffffff comme #cf0 à #ccff00. Et hop, trois octets économisés pour pas cher.
Je répète sûrement ce que d'autres ont déjà dit, mais cette page est une vraie petite mine d'or !
MERCI pour tout le travail fourni ici et ailleurs pour aider les néophytes et aspirants bidouilleurs,
tels que moi !