Les designs de modules

Les designs de modules, conception, installation, by The_end

Dans cet article je vais essayer de vous expliquer simplement comment fonctionne le design des modules de votre blog overblog.

Je ne suis pas encore un crac sur le sujet, je suis ouvert à tout commentaire, il est pas nécessaire de dire que je peux me tromper, et dans ce cas dites le moi.

Pour toute information supplémentaire sur le css d’over-blog allez voir le blog de francisek dans les liens.

Je fais court cette fois et je donne les bases, dites moi si vous en voulez plus

Je prendrai en exemple le design du style 2 qui est simple.

1. organisation générale

Le design des modules se fait avec plusieurs images :

- 8 images pour le tour du module

 4 angles

 4 bordures

Voici les images du style 2, vous ne voyez pas certaines ? En fait elles ne font que 2 pixels x 1 pixel, mais nous verrons plus tard comment elles sont répétées grâce au fichier css.

http://fdata.over-blog.com/modele/2/pics/box-top-left.png
http://fdata.over-blog.com/modele/2/pics/box-middle-left.png

http://fdata.over-blog.com/modele/2/pics/box-bottom-left.png

http://fdata.over-blog.com/modele/2/pics/box-top-center.png

http://fdata.over-blog.com/modele/2/pics/box-bottom-center.png

http://fdata.over-blog.com/modele/2/pics/box-top-right.png
http://fdata.over-blog.com/modele/2/pics/box-middle-right.png

http://fdata.over-blog.com/modele/2/pics/box-bottom-right.png

- 1 images pour le fond

 Vous pouvez utiliser une image pour mettre en fond des modules

2. création d’un design de module

Pour créer un nouveau design pour vos modules, vous avez donc besoin d’un logiciel de dessin, le mieux est photoshop mais la prise en main n’est pas immédiate, un autre bon programme qui permet d’obtenir de très bons résultats en quelque clic est photo impact.

Pour avoir une idée de la taille que doit avoir votre design, prenez un screenshot de votre blog avec votre style actuel (le model 1 permet d’avoir les meilleures proportions).

Ensuite découpez juste un module dans un nouveau fichier, cela vous permet de savoir où sera placé quoi.

Vous pouvez commencer à dessiner par-dessus, dans un premier temps gardez à l’idée que vous devrez découper chaque partie, alors ne faites pas trop compliqué.

La dernière étape : découpez chaque élément, gardez les même nom que ceux de base, c’est plus simple pour éditer le css ensuite.

3. Les parties du css appliquées aux modules

Je vais vous donner en détail les éléments du fichier css qui affectent directement le design des modules.

.box {}	Le module en general
.box h2 {}	Le titre du module
.box-top  {}	Le haut du module (box-top-center.png)
.box-left {}	La bordure gauche du module (box-middle-left.png)
.box-right {}	La bordure droite du module (box-middle-right.png)
.box-bottom {}	Le bas du module (box-bottom-center.png)
.box-topLeft {}	Angle en haut à gauche (box-top-left.png)
.box-topRight {}	Angle en haut à droite (box-top-right.png)
.box-bottomLeft {}	Angle en bas à gauche (box-bottom-left.png )
.box-bottomRight { padding:3px; }	Angle en bas à droite (box-bottom-right.png ) si vous ne mettez pas le padding :3px il apparaît parfois un décalage et si les images du haut et du bas sont trop grandes elles se superposeront
.box-content {}	Ici c’est l’intérieur du module, là ou sera le texte, liens listes
.box-content p {}	Aspect spécifique aux paragraphes
.box-content ul {}	Aspect spécifique à chéplucoi
.box-content li {}	Aspect spécifique aux listes
.box-content a {}	Aspect des liens du module

Comme vous pouvez le constater pour mettre une image il faut utiliser la commande

aackground: url(votre image) repeat-x scroll top left; }

url(votre image)

Remplacez votre image par l’emplacement de votre image sr le web

repeat-x

Permet de régler la répétition de l’image, ce qui permet avec 2 pixels de faire une ligne

3 options :  repeat-x répéter à l’horizontale

 Repeat-y répéter à la verticale

 No-repeat ne pas répéter l’image (pour les angles)

Scroll ou fixed

Permet de déterminer si l’image bouge en même temps que la page ou reste fixe, pour les modules c’est toujours scroll.

top left, top right, bottom left, bottom right, top center

Permet de régler le positionnement initial de l’image.

Pour finir une fois vos images bien placées il se peut que le texte soit mal placé et dépasse sur les image, il faut alors régler le padding du module.

Pour cela dans la ligne .box-content { }

Placez padding :XXpx XXpx XXpx XXpx;

Et ajustez les valeurs XX pour mieux placer votre texte.

Dans l’ordre : marge : haut droite bas gauche

Voilà vous pouvez vous lancer, plus tard nous verrons comment mettre une image différente en fond de chaque module.