le p'ti labo

@ Paturot

riesseg — Sat, 19 Sep 2009 09:23:00 GMT

J'ai recu un petit message hier :

Bonjour,

Je cherche un skin dans le style d'un cahier et je vois que vous en avez un. Est-il possible de l'utiliser ?

Merci

La réponse est OUI ! Bien sûr.
Alors je viens d'uploader toutes les images, les fichiers... Je ne sais pas si il les faut tous encore... Tu me dira comment ça marche.
Zip avec les fichiers pour le skin cahier
Et si tu as besoin de voir les fichiers, de récupérer juste une image :
Fichiers du skin Cahier

Pour ce qui est de la bannière, n'hésite pas un faire un tour sur dafont.com pour trouver une police qui te plaise. Ensuite un tour via photoshop ou Gimp et tu fais ta bannière.

Si d'autres sont interessés par un de mes skins, n'hésitez pas.

Visiteurs

riesseg — Thu, 13 Aug 2009 10:56:19 GMT

Surfant ici ou là, je me rappelle soudainement l'existence du petit labo. Projet initié il y'a quelques temps, pour m'entraîner, pour aider une copine, pour m'amuser, il est en semi abandon depuis un bon moment.

Tentative de reprise par la suite, motivation à bloc, reprise du travail, emplois du temps chargé, abandon de nouveau.

Aujourd'hui me revoila, je regarde les statistiques, voir si l'épave est encore visitée... Elle l'est ! En moyenne, ce sont 60 petits sorciers qui viennent dans le blog. Aussi aurait-il une réelle utilité ? Répondrait-il donc encore a des questions malgré son long mutisme ? Malgré toutes les dernières innovations de Canalblog ?

Aussi très chers assidus, je vous laisse la parole pour me dire ce qu'il en est. Quand est il des réponses que vous trouvez, quand est-il des questions que vous vous posez.

Qu'est ce qui vous amène ici ?

Reprise

riesseg — Sat, 26 Apr 2008 15:34:53 GMT

Hello World ! (phrase classique du programmeur)

Alors peut être vais-je relancer le petit labo.
Donc si des gens ont un blog digne de se nom sur canalblog qui aimerai un petit relookage bin qu'il fasse une zolie demande en commentaire (avec adresse et tout et tout).

Sinon, j'vais voir a mettre en partage les skins en version vierge. Comprennez que j'enlève les titres sur les bannières et tout ce qui à un lien direct avec le petit labo. Comme ça, chez vous, avec un logiciel comme Gimp, Tohshop ou Paint, vous pouvez adapter pour votre blog.
Bref, je vous tiens au courant pour ça.

Sinon, quoi de neuf pour moi?
Bin j'ai pas trouvé de taf cette année... Donc je me relance dans les études. J'ai réussi a me faire prendre chez MJM Graphics en alternance, dans la formation infographie. Je suis donc en recherche d'entreprise pour mon alternance.
Pis vala... s'tout.

Chô.

[PasàPas]Transformation étape2

riesseg — Wed, 05 Dec 2007 17:31:08 GMT

Occupé à d'autres affaires, j'ai du délaisser quelques temps le petit labo... je reprends et continu le pas à pas.
On va tout d'abord s'occuper du menu, qui se doit d'intégrer un peu mieux le blog. Le gris de base est tout a fait hors du coup. Je vais donc le mettre dans les tons bleus avec une ombre à droite, comme si il était glissé en dessous du content.

Etape1: le menu
Mon dégradé fait et uploader, je peux l'intégrer à mon CSS. Le menu se trouvant dans la classe leftbar, je vais la trouver. Suppression des éléments de bordure présent, et ajout du background.
L'image fais que quelques pixels de largeur et 5pixels de hauteurs. Il va donc falloir le répéter pour qu'il couvre toute la hauteur. Ensuite, la couleur la plus clair du dégradé me servira de couleur de fond pour qu'on ne voit pas le passage de l'image au menu.
Pour répeter une image tout d'abord, il faut utiliser background-repeat: repeat/no-repeat/repeat-x/repeat-y, x étant l'horizontal et y le vertical. Dans notre cas, repeat-y donc. Il faut également positionner le fond à droite. On va utiliser background-position: left/right/center/top/bottom. Dans notre cas, j'utiliserai le paramètre right bien entendu. Enfin, la couleur de fond sera la même que pour le content donc #a283e0.
Le code de mon ombre sera donc:

background:#a283e0 url('http://membres.lycos.fr/riesseg/canalblog/Noyel/images/menu.png') right repeat-y;

C'est long... Mais le résultat est au rendez vous.
On va z'y coller des 'tites bordures en haut, a gauche et en bas (mais pas droite pour donner l'impression qu'elle continue).
On l'a fait au tour d'avant... donc:
border-bottom: 1px solid #1F1F1F;
border-left: 1px solid #1F1F1F;
border-top: 1px solid #1F1F1F;

Et le tour est joué...? non, piège! Je rajoute 1px dans la largeur... donc largeur du menu+largeur du content=801px!!! Ca rentre pas dans le container qui ne fait que 800px!!! mais vous connnaissez l'astuce ^^ on réduit de 1px la largeur du menu de gauche.
width: 199px;

Ensuite, on va refaire les couleurs des titres.
Ils sont dans .navlinks .title On va remplacer le moche gris actuelle par le même bleu que le titre.
color: #6c31e0;
Et c'est tout :D
On va également mettre tout le calendrier de cette couleur. Il y'a deux élements à repérer, calendar et calendar caption qui sont respectivement le tableau en général et le titre du tableau. CB à mit le mois dans le caption. pour ca qu'il faut le changer egalement ;)
Donc même chose, remplacer le moche gris par notre bleu.
color: #6c31e0;

Enfin, les liens sont illisibles en gris clair sur bleu... donc on va les refaires.
Comme noyel c'est festif et que c'est période de cadeau, on va dire que vous voulez que les gens voient vos amis et qu'ils aillent gonfler leurs statistiques!!! Donc on va les mettre en rouge, comme le cadeau de la bannière.
Les attibuts des liens sont nombreux. Dans la feuille de style c'est tous les a:qqch...
il y'a donc:
a = ancre
a:link = Liens html
a:hover = quand on passe le curseur sur le lien
a:visited = quand on a visité le lien
a:active = quand on clic sur le lien
Les liens seront en rouge clair, les liens visités en rouge foncés, les liens survolés en blanc. et le lien actif... m'en fout :D
On aura comme code:

a:link {
color: #c71212;
text-decoration: none;
}
a:visited {
color: #900d0d;
text-decoration: none;
}
a:active {
color: #FFFF99;
text-decoration: none;
}
a:hover {
color: #FFFF99;
text-decoration: none;
}
Et vala!
Le menu de navigation est fini.

La prochaine fois, j'espere plus rapidement qu'entre l'etape1 et l'etape2, on s'occupera du content avec la feuille de houx, l'encadrement, la canne a sucre et tout.

[PasàPas]Transformation étape1

riesseg — Thu, 29 Nov 2007 16:05:00 GMT

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 ;)