Overblog Suivre ce blog
Administration Créer mon blog
26 septembre 2005 1 26 /09 /septembre /2005 00:00
La gestion des modules consiste à placer les modules comme bon nous semble sur le blog. Pour gérer ses modules, il faut aller dans l'onglet Configurer > Mise en page.

Les modules sont affichés dans la gestion des modules comme sur le blog. Il suffit de les glisser déposer pour les mettre où l'on veut.

Pour modifier le titre ou les options d'un module, il faut le survoler et cliquer sur le petit marteau.
La "zone article" se comporte comme un module.


Notes:
  •  
  • Pour ne pas avoir une colonne, il suffit de ne pas mettre de modules dans cette colonne.
  •  
  • Lorsque vous insérez un module liens, albums photos, texte libre,... ils n'apparaitront pas tant qu'ils seront vides.
  •  
  • Certaines configuration ne sont pas possibles: la zone article doit etre dans la colonne principale, etc.
  • Si vous êtes en mode avancé, les modifications peuvent être faites dans les différents onglets (en fonction de ce que vous souhaitez faire).
Repost 0
12 août 2005 5 12 /08 /août /2005 00:00
Il est possible de modifier les modules un par un. Pour cela, il faut utiliser leur code de sélection dans le css.

Nom du module Sélecteur CSS
Albums photos  .album
Archives  .archive
Articles récents  .articlerecent
Calendrier  .calendrier
Catégories  .categorie
Commentaires  .commentrecent
Communautés  .community
Liens  .lien
Newsletter  .newsletter
Image Aléatoire  .aleaIm
Présentation  .presentation
Recherche  .recherche
Recommander  .recommander 
Texte libre (droite)   .text
W3C  .w3c
 
Exemple:
.album {background-image: url(image.jpg);}

qui permet de rajouter un fond au module album uniquement.
 
Repost 0
12 août 2005 5 12 /08 /août /2005 00:00
Parfois, Texte libre ou Archives ne rendent pas bien dans le blog. Mais on peut parfaitement changer le titre de tous les modules.

Pour cela:
1. Aller dans Configurer.
2. Survoler le module à changer.
3. Cliquer sur le marteau de ce module
4. Changer les informations et valider


Repost 0
7 juillet 2005 4 07 /07 /juillet /2005 00:00
Merci à zoélie pour cet article

Première chose à savoir, les contours des modules sont des images , ils ne se traitent donc pas tout à fait comme le reste...


Vous devez donc créer des images sur votre ordinateur avec Photoshop ou The Gimp, de préférence en .png . Il en faut pour le bord supérieur, le bord inférieur, le bord droit et le bord gauche, et, éventuellement pour les 4 coins. Elles peuvent être identiques ou differentes en taille et en apparence.


Deux solutions s'offrent à vous :

- Soit vous créer l'image de la taille exact de vos modules : par exemple, votre module fait 200px en largeur, donc les bords haut et bas devront faire 200px. Ce n'est pas une très bonne solution, d'une part parce que si la largeur n'est pas bien fixée, chez certains de vos lecteurs, les modules n'auront pas la même largeur et l'image dépassera ou sera trop petite. D'autre part, si vous ajoutez des lignes dans vos modules, la hauteur des bords devra être modifier à chaque fois (= refaire l'image...).

- Soit vous créer un motif de petite taille (en largeur pour les bords haut et bas et en hauteur pour les bords droite et gauche) qui pourra se répéter à l'infini. Vous n'aurez donc pas le 2 problèmes cités ci-dessus, mais ca restreint le choix du design.

Je conseille cependant cette derniere solution, sachant que si vous voulez une image complexe dans votre contour (par exemple un petit schtroumpf...), vous avez la possibilité de mettre celle-ci dans l'image des coins. Les coins (uniques) resteront fixes et l'image de la bordure entre les coins sera un motif répété en nombre variable...

Pour trouver de jolis motifs, Google Images, par exemple, est votre ami... Faire des recherches avec le mot-cle "textures" est efficace aussi.
Pour avoir des formes autres qu'un rectangle pour chaque bord (notament pour le bord haut), vous pouvez télécharger une texture - vous aurez un motif rectangulaire et avec votre logiciel, vous "creusez" dans l'image pour faire le design qui vous plait, en prenant bien soin qu'il soit symétrique, puisqu'il va se répéter...
De même, c'est la méthode pour faire des coins arrondis.


Une fois que vous avez chargé toutes vos images de bordures dans vos fichiers Over-Blog, il faut les insérer dans le CSS.

1ere étape :

- Allez dans la partie /* --------- Modules -------- */
au niveau des .box (box désigne les modules).


.box-top désigne la bordure supérieure, .box-bottom : la bordure inférieure, .box-left : le bord gauche et .box-right : le bord droit .
.box-topLeft est le coin supérieur gauche, .box-bottomRight est le coin inférieur droit, ...etc

ATTENTION, il ne faut pas modifier le .box (le module dans son ensemble) !

Si vous avez choisi un motif à répéter, vous faites :
- pour les bordures horizontales ( = haut et bas) :

.box-bottom { background:transparent url(http://idata.over-blog.com/0/05/85/46/image-bottom.png) repeat-x scroll bottom left; border-left: none 0px; border-right: none 0px; border-top: none 0px; }


Et idem pour le haut en remplacant tous les bottom par top.

- pour les bordures verticales ( = droite et gauche) :

.box-left { background: transparent url(http://idata.over-blog.com/0/05/85/46/image-gauche.png) repeat-y scroll top left; margin:0px; border-right: none 0px; border-bottom: none 0px; border-top: none 0px; }


Idem pour right.

Pour les coins, qui ne se répètent pas, ou si vous avez choisi un motif de la taille du module. vous faites :

.box-topLeft { background:transparent url(http://idata.over-blog.com/0/05/85/46/image-box-top-left.png) no-repeat scroll top left; }


Idem pour les 3 autres coins.



2eme étape :

Pour placer correctement vos bordures par rapport au texte contenu dans le module, il faut jouer sur le padding et le margin.
Attention : Le padding d'un .objet est "l'indentation", la marge de ce qu'il y a à l'interieur de l'objet. Le padding est donc un attribut des .box.
Le margin est la marge de l'objet lui-même. Dans notre cas, ce sera donc un attribut du .box-content.


Le plus simple est d'utiliser le padding-top pour l'emplacement du titre des modules, à mettre dans le .box-top, et le margin pour le texte du module.

- Si vous voulez que le titre du module soit sur l'image du contour, il faudra donc, pour un contour d'une hauteur de 50px, par exemple, mettre un padding de 5px dans .box-top.

- Si vous voulez qu'il soit sous l'image, il faut mettre

.box-top { background:transparent url(http://fdata.over-blog.com/nofound.png?http://data.over-blog.com/...) repeat-x scroll top left; padding-top: 50px; }


padding-top est le décalage par rapport au bord haut du .box (le module dans son ensemble) . Il existe aussi padding-bottom, padding-right et padding-left. Vous pouvez leur donner à chacun une valeur différente.

padding: 0px 5px 10px 5px; est exactement équivalent à, dans cet ordre (sens des aiguilles d'une montre):
padding-top : 0px;
padding-right : 5px;
padding-bottom: 10px;
padding-left: 5px;


Si vous voulez la même valeur de padding pour chaque coté du texte (n'oubliez pas que le padding dans le .box-top influence le texte contenu), il suffit de mettre padding: xxx px;


- Ensuite, vous placez le texte du module grace au margin dans le .box-content (contenu du module):

.box-content { background:#BC8F8F; color: #FF3E96; overflow:hidden; padding:0px 5px 10px 5px; /* Ceci est le decalage du texte dans la boite interieure du module .*/ /* Type de la bordure de la boite interne (box-content): none si vous n'en voulez pas */ border-left: solid #FFD375 2px; border-bottom: solid #FFD375 2px; border-top: solid #FFD375 2px; border-right: solid #FFD375 2px; margin: 15px 5px 10px 20px; /* Ceci est le décalage de la boîte intérieure du module (box-content), par rapport au contour que vous venez de créer.*/ (= Decalage de 15px en haut, 5px à droite, 10px en bas et 15px à gauche ) }


Pour voir le resultat enfin de vous fixer les idées :
http://zoelie.over-blog.com/
Repost 0
7 juillet 2005 4 07 /07 /juillet /2005 00:00
Le w3c est un groupe d'industriels et de professionnels qui liste des recommandations sur les langages à utiliser pour faire un site (ou un blog).

Sur over-blog, le module w3c permet d'afficher un module contenant des liens indiquant que le blog est bien programmé. Ainsi qu'un lien vers le flux RSS de votre blog.
Repost 0

Accueil

Rechercher

Texte Libre