Vous voulez tester un design sur votre blog sans toucher votre css actuel ?
C'est interessant pour chercher celui que l'on veut sans passer sa journée a modifier son css.

Pour tester un de mes designs sur votre blog, éditer votre entête via l'Admin.
Copiez cette ligne dans votre entête

<script src="http://axxcat.free.fr/over-blog/css.js" type="text/javascript" language="javascript"></script>

Ensuite allez sur mon site sélectionner le nom de la couleur que vous voulez dans le menu de test, et collez le en mode design dans votre entête, enregistrez l'entête, vous n'avez plus qu'à aller survotre site et aà cliquer sur le lien !

Merci Francisek

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://accel7.fdata.over-blog.com/modele/2/pics/box-top-left.png
http://accel1.fdata.over-blog.com/modele/2/pics/box-middle-left.png

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

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

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

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

http://accel0.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.

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.

Utilisation de mes designs

Un fois téléchargé et dézipé, vous trouverez dans mes packs plusieurs fichier s:
  Des images (dans le dossier pics/css), elle sont à up loader sur votre blog, de préférence dans un dossier nommé graf.
 Une page html qui permet de tester le design
 Un fichier custom.css (dans le dossier css) qui est le fichier css d’exemple.

Les css sont des dérivés du model 2 donc avant de l'installer dans design, passez en model 2

Si vous voulez utiliser les modules sans changer votre css actuel apportez les modifications des lignes, c'est a dire qu'il faut copier ces lignes dans le fichier css/custom.css dans votre css sur overblog

.box 
.box h2
.box-top { background : url(../pics/graf/box-top-center.png) repeat-x scroll top left;}
.box-right
.box-bottom 
.box-topLeft 
.box-topRight
.box-bottomLeft
.box-bottomRight
.box-content    pour le fond du module
.article  pourle fond de l’article

!attention! Parfois je change l’ordre desbox-botom,top… Pour arranger la superposition des images due au code html, donc recopiez bien.

!attention!
Mettre les fichier dans un dossier nommé graf ne suffi plus, il faut metre à jour les lignes "url (adresse de l'image)" avec la location des images sur votre blog

c'est les ligne de ce type qui sont a modifier : { background : url(../pics/graf/box-top-center.png) repeat-x scroll top left;}

en remplacen ../pics/graf/box-top-center.png
par l'adresse réel du fichier sur votre blog ou sur un ftp externe

exemple pour moi c'est de ce type, cela change pour chaque blog :
.box-right       { background:transparent url(http://idata.over-blog.com/0/06/44/91/graf/box-middle-right.png)

Les css fournis ne sont pas encore vraiment aboutis,je cherche des personnes voulant m’en faire en utilisant mes designs,j’ouvrirai ensuite une section de lien vers leurs sites  pour les remercier.