Canalblog
Editer l'article Suivre ce blog Administration + Créer mon blog
Publicité
le p'ti labo
29 novembre 2007

[PasàPas]Transformation étape1

On va faire 2étapes.
Vu que je ne supporte pas les couleurs moches de mon blog, celles pour montrer un peu les différentes partis (de toute manière, prenez 1blog au pif, vous tombez sur un truc moche ou tout est encadrer et peut être les couleurs sont toutes différentes), on va transformer un peu tout ça.
Avec plusieurs onglets, un pointant sur Apparence/Editer les fichiers/Feuille de style générale, un pointant sur votre blog (pour voir les modifs) et un pointant sur le petit labo, pour faire le pas à pas.
Tention, vous allez abuser du F5 comme jamais... Ca vous fausse vos statistique comme c'est pas permit ^^

Etape1: l'arrière plan
Il est blanc! C'est pratique et pas embettant :p Je pense que je ferai un de ces 4 un autre pas à pas avec un arrière plan fixe, et un arrière plan répétitif. un jour... peut être...
Le fond est défini dans l'élément body c'est une balise html, donc il n'y a rien devant. on laisse margin et text-align, mais on change l'attribut background-color. Comme j'espère que vous avez un tout petit peu de vocabulaire en anglais, je ne développerai pas la fonction de 70% des éléments car cela coule de source.
La valeur à mettre est une couleur en hexadécimal. Un logiciel de retouche d'image vous les donnes sans problème.

Une couleur en hexadecimal se découpe en 3nombres de 2chiffres: #RRVVBB allant de 0 à F (comptage hexadecimal: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F) donc 00 c'est nul, et FF c'est pur. RR définie la quantité de rouge, VV la quantité de vert et BB la quantité de bleu.
#FF0000=rouge; #00FF00=vert; #0000FF=bleu; #000000=noir; #FFFFFF=blanc
si les deux chiffre des couleurs sont a chaque fois identique, on peut simplifier en en écrivant que 3.
#F00=rouge; #0F0=vert; #00F=bleu; #000=noir; #FFF=blanc

Dans l'exemple, il est blanc. donc il sera... #FFF.
 
Etape2: le container
Apparaît une fois sur la page, à un id unique donc un dièse (#) devant.
background-color: #FFF; n'oubliez jamais le point-virgule (;) à la fin. et 1 élément par ligne.
Supprimez tout se qui contient border puisqu'il n'y'en a pas.
padding est la marge interne de la div. On la laisse à zéro. D'après les normes du w3c, la largeur d'une div = width +padding + border. IE lui ne prend pas en compte la marge interne et la taille des bordures. Mais nous reglerons ce problème tout à la fin, car on optimise pour Firefox.
margin sert à mettre une distance minimal avec les blocs qui l'entoure. en mettant la valeur auto à gauche comme à droite, on centre le container.

Etape3: le content
Commençons à jouer :)
Supprimez tout se qui contient border. J'aime pas cette méthode, on va les refaire.
On affiche la bordure de gauche, de droite et d'en bas. elles auront une taille de 1px, seront de couleur #1F1F1F (repris sur la bannière avec la pipette) et seront continue.
Commençons par afficher toutes les bordures:
border-weight: 1px;
border-style: solid;
border-color: #1F1F1F;
Etant donné que la bordure s'ajoute à la largeur, si là vous allez voir le blog le content à disparu et c'est mit en bas... Ceci parce que le container faisant 800px de large, le menu 200 et le content 200+bordure de gauche+bordure de droite=202 pixels, il n'ya pas assez de place pour le mettre à côté du menu. Donc il le met en dessous. On va donc diminuer de 2pixels la largeur du content.
width: 598px;
voila qui est beaucoup mieux.
Maintenant, concernant les bordures, je ne veux pas celle du haut. Et je ne veux pas avoir trop de ligne pour définir les bordures comme c'était le cas avant. Je vais condenser l'écriture des bordures sur une seule ligne.
border: 1px solid #1F1F1F;
Ca marche aussi, mais j'ai économiser 2lignes! Maintenant, je ne vais afficher que les bordures du bas et des côtés:
border-bottom: 1px solid #1F1F1F;
border-right: 1px solid #1F1F1F;
border-left: 1px solid #1F1F1F;
Et le tour est joué !!!
On change la couleur de fond, la couleur précise du bleue récupérée à la pipette:
background-color: #a283e0;
Une fois qu'il y'aura la bannière, ce sera niquel.

Etape4: la bannière
La logique aurai voulu que je commence par la bannière... mais vu que dans la feuille de style, le content est avant la bannière bin j'ai fais dans cette ordre.
Dans un premier temps, on enlève le texte (titre du blog et description). C'est vraiment simple. Trouvez l'élément #topbar et son attribut display qui est block. changez le en none.
display: none;
Ensuite, passons à l'élément #topbar-logo.
on passe son display à block.
display: block;
En regardant les propriétés de l'image, je vois qu'elle fait 183pixels de haut.
height: 183px;
Maintenant, on lui met l'image. Comme pour la bordure, il y'a 2 façons. En distinguants tous les éléments ou en mettant tout sur une ligne. je vous montre les deux.
background-image: url('http://membres.lycos.fr/riesseg/canalblog/Noyel/images/banniere.jpg');
background-repeat: none;
background-color: #FFF;

ou

background: #FFF url('http://membres.lycos.fr/riesseg/canalblog/Noyel/images/banniere.jpg') no-repeat;

on peut répété un arrière-plan sur la longueur (repeat-x) ou sur la hauteur (repeat-y). de fait, si vous avez un fond dégradé uniforme, vous enregistrez l'image sur une largeur de 1px et vous répétez le fond grace au CSS. L'image sera ainsi de très petite taille et très rapide à s'afficher.
Enfin, on met le lien. C'est relativement bien fait ce système, je l'aime beaucoup.
L'élément div .logolink a permet de redéfinir la balise du lien (<a>) compris dans la classe logolink. Il faut lui mettre la même taille que la bannière (183px) pour qu'elle couvre l'image (car la largeur est 100%).
height: 183px;

Voila, a part la couleur et l'ajustement des articles, vous devez être exactement comme ceci (si vous êtes parti du skin gris).
Ne vous en faites pas pour les couleurs du texte, on y viendra la prochaine fois. cette étape est déjà longue, j'ai pas voulu la faire trop longue. Donc un conseil, jusqu'a la fin du prochain tuto, gardez votre ancien modèle ;)

Publicité
Commentaires
L
je viens de découvrir votre blog d'aide.C'est extra, merci!
L
Vraiment un sacré boulot que tu fait là!<br /> J'imprime tout, je potasse et j'essaye de comprendre et surtout je me dépeche de faire qqc avant que quelqu'un ne fasse une crise d'épilepsie en passant sur mon blog!<br /> Merci
L
hmf, je suis désolée, je suis vite perdue avec tout ce vocabulaire, c'est plus facile avec un copié collé de la feuille de style pour me donner un exemple précis pour comparer, (avec mais aussi sans les explications intégrées, je sais, je suis trèèèès compliquée comme fille...). Bon, sinon, ça marche pas malgré tout. Oui, désolée encore. (je cherche hein pourtant, je bidouille, je retire des trucs, je vire des espaces, j'en rajoute, je rigole bien mais faut croire que le programme i veut rien faire à ce que je lui demande. Saloperie).
R
bin voila...<br /> Et dire qu'il y'avais la réponse dans l'article...<br /> j'me sens tout incompris...<br /> <br /> mais bon, la réponse à été donner le plus clairement possible.<br /> http://nosblogscuisines.canalblog.com/archives/2007/12/02/7097743.html
L
effectivement, j'ai des problèmes avec cette histoire de lien qu'on doit avoir en baladant sa souris sur la bannière (ça a disparu dans un espace temps bizarre), et j'avoue que je n'ai pas bien compris les explications que tu as données (je comprends pas vite ces trucs là, moi. ça doit être la bière comme dit mamina)... si tu as le temps un de ces quatre, ça me fera plaisir!
Publicité