Flux RSS 2.0Kit thème blog Shenzhou - famille all-in-one
Posté par $Jenny pro
Comme promis, je vous ai préparé un kit pour pouvoir faire un thème de blog sur base de la famille "all-in-one".
Il est assez facile a comprendre et à modifier. Mais il faut quand même un minimum de connaissance CSS :
- Savoir changer les couleurs de textes.
- Savoir charger une image.
Il vous suffit de télécharger ce zip et de lire les instructions se trouvant dans le fichier lisez_moi.txt.
Bonne création à tous.
Lisez_moi.txt
/*
@Author : Jenny
@Title : Kit thème blog Shenzhou
@Famille : all-in-one
1. Les thèmes blog shenzhou, comment ça marche ?
2. Marche à suivre pour créer un thème all-in-one.
3. Arborescence du kit
*/
==========================================================
1. Les thèmes blog shenzhou, comment ça marche ?
==========================================================
C'est simple, nous travaillons avec des familles de thèmes.
Une famille de thèmes c'est : des thèmes qui sont pareil au niveau disposition des textes, menus... et qui varient au niveau des couleurs et des images.
Par exemple : Jenny-all-in-one est une famille
Ses variantes sont rose,poker,cinéma,the-vert,...
On travaille avec 2 fichiers CSS.
- Le premier, style.css, place tous les éléments de la page. C'est le CSS parent du thème. Celui auquel on ne touchera jamais pour faire une variante.
- Le second, style_002.css, est le CSS qui s'occupe des images et des couleurs du thème C'est celui là et uniquement celui là qui va varier dans une même famille de thèmes
==========================================================
2. Marche à suivre pour créer un thème all-in-one.
==========================================================
1. Lire et comprendre l'arborescence du kit et ses explications.
2. Ouvrir kit_image.psd pour travailler sur votre image de fond.
3. Exporter votre image de fond en gif ou jpeg et la placer dans le rep "images"
4. Editer le fichier style_002.css pour y mettre les images et modifier les couleurs
5. En haut du fichier mettez votre nom à la place de jenny. Mettez le nom de votre "variante" derrière name,
Vous pouvez mettre l'url de votre site web par exemple.
Attention : Si vous utilisez des brushes, des images ou tout autre matériel ne vous appartenant pas, soyez
sûr que vous avez le droit de l'utiliser et n'oubliez pas d'indiquer le crédit !
/*
Style: Style: Jenny all-in-one night
Type: Flavour
Name: Blue
http://www.flyingcow.be
Brushes by Amadaun.Net
*/
6. voilà c'est tout, normalement votre thème est prêt !
==========================================================
3. Arborescence du kit
==========================================================
index.html est la page à utiliser pour voir ce que vous faites.
---------
autour
---------
Répertoire qui comprend tout ce qui s'affiche dans la page prise comme préview (js, photos..).
Donc on n'y touche pas. Il est juste là pour avoir une page index.html fonctionnelle.
---------
coeur
---------
Répertoire qui comprend les CSS du thème all-in-one.
style.css : c'est le css qui place les blocks sur la page. Si vous faites un thème all-in-one, vous n'y touchez pas ! (sinon panpan culcul)
style_002.css : c'est votre css de travail. C'est là que vous allez changer l'image de fond de votre Thème et les couleurs de votre thème.
---------------------------
coeur/images
---------------------------
c'est dans ce répertoire que vous devez placer votre image de fond. Celle que vous allez charger dans style_002.css à cet endroit :
body
{
color: #000;
background: url('images/bleu.jpg') repeat-y;
}
Dans le kit il s'agit donc de l'image bleu.jpg
ligne.gif est l'image utilisée dans le menu de gauche en dessous des catégorie du menu
ligne2.gif est l'image utilisée dans le blog, en dessous du titre d'un article.
---------------------------
PSD
---------------------------
contient les fichiers images pour le thème all-in-one.
kit_image.psd :
C'est le psd a utiliser pour faire votre image de fond qui se répétera à l'infini verticalement. Il y a les repères pour les différents blocs de texte.
ligne.psd
ligne2.psd
Fichiers pour les lignes.
3 commentaires à cet article.
Sympa super merci :)
Yeah ! \0/
Merci !
De rien les filles :D
Je bosse sur le theme niveau au dessus avec une image en header des que c pret je ferai un kit aussi :p