Jeudi 16 février 2006
4
16
/02
/Fév
/2006
17:36
Bon je vais parler ici du modèle que j utilise mais le principe est un peu le mm pour les autres modeles ... Vous vous êtes surment apercu qu'il n y avais pas les images des modules quand vous fesiez un aperçu de votre page ... Bon je ne vais pas vous faire un cours html, mais en fait c a cause de l url indiquer dan le Css !
La partie concernant la mis en forme des modules est indiqué par :
( env. lignes 60 et c'est écrit en plus )
La partie concernant la mis en forme des modules est indiqué par :
( env. lignes 60 et c'est écrit en plus )
/* correspond au block des modules */
Avant la modification de ces images vous devez trouver ces url dans le css :.box-top { background:transparent url(/modele/2/pics/box-top-center.png) repeat-x scroll top left; }
En fait , c'est une adresse qui prend la source des images dans le repertoire qui se trouve sur le net : ce sont des url relatives ... Un peu compliqué a expliquer aux novices et pour ceux qui ont des bases il voit de quoi je parle !!! Pour pouvoir afficher ces images dans votre apercu, il va falloir remplacer la partie /modele/2/pics/box-top-center.png par les adresses internet réels !
Si vous voulez conserver les images pour le module, remplacer les url relatives par les url réels :
.box-top : http://fdata.over-blog.com/modele/2/pics/box-top-center.png
.box-left : http://fdata.over-blog.com/modele/2/pics/box-middle-left.png
.box-right : http://fdata.over-blog.com/modele/2/pics/box-middle-rght.png
.box-bottom : http://fdata.over-blog.com/modele/2/pics/box-bottom-center.png
.box-topLeft : http://fdata.over-blog.com/modele/2/pics/box-top-left.png
.box-topRight : http://fdata.over-blog.com/modele/2/pics/box-top-right.png
.box-bottomLeft : http://fdata.over-blog.com/modele/2/pics/box-bottom-left.png
.box-bottomRigh : http://fdata.over-blog.com/modele/2/pics/box-bottom-right.png
Maintenant si vous désirez modifier ces images, il vous suffit de les enregistrer dans un dossier modules par exemple en ne modifiant surtout pas les noms de chaque image un fois ce dossier constitué et les images modifiés a votre guise, il vous suffit de le compressé et de l envoyer dans votre repertoire fichier ...
Nous verrons prochainement comment changer facilement la couleur des modules si vous ne savez pas comment vous y prendre !
Grâce a la loupe, vous aller voir l image s afficher et un clic droit > Propriétés vous permettra de récupérer l'url de l'image et de la placer comme indiquer si dessous :
.box-left : http://fdata.over-blog.com/modele/2/pics/box-middle-left.png
.box-right : http://fdata.over-blog.com/modele/2/pics/box-middle-rght.png
.box-bottom : http://fdata.over-blog.com/modele/2/pics/box-bottom-center.png
.box-topLeft : http://fdata.over-blog.com/modele/2/pics/box-top-left.png
.box-topRight : http://fdata.over-blog.com/modele/2/pics/box-top-right.png
.box-bottomLeft : http://fdata.over-blog.com/modele/2/pics/box-bottom-left.png
.box-bottomRigh : http://fdata.over-blog.com/modele/2/pics/box-bottom-right.png
Maintenant si vous désirez modifier ces images, il vous suffit de les enregistrer dans un dossier modules par exemple en ne modifiant surtout pas les noms de chaque image un fois ce dossier constitué et les images modifiés a votre guise, il vous suffit de le compressé et de l envoyer dans votre repertoire fichier ...
Nous verrons prochainement comment changer facilement la couleur des modules si vous ne savez pas comment vous y prendre !
Grâce a la loupe, vous aller voir l image s afficher et un clic droit > Propriétés vous permettra de récupérer l'url de l'image et de la placer comme indiquer si dessous :
.box-top { background:transparent url(placerurlimage) repeat-x scroll top left; }
.box-left { background:transparent url(placerurlimage) repeat-y scroll top left; }
.box-right { background:transparent url(placerurlimage) repeat-y scroll top right; }
.box-bottom { background:transparent url(placerurlimage) repeat-x scroll bottom left; }
.box-topLeft { background:transparent url(placerurlimage) no-repeat scroll top left; }
.box-topRight { background:transparent url(placerurlimage) no-repeat scroll top right; }
.box-bottomLeft { background:transparent url(placerurlimage) no-repeat scroll bottom left; }
.box-bottomRight { background:url(placerurlimage) no-repeat scroll bottom right; padding:3px; }
.box-left { background:transparent url(placerurlimage) repeat-y scroll top left; }
.box-right { background:transparent url(placerurlimage) repeat-y scroll top right; }
.box-bottom { background:transparent url(placerurlimage) repeat-x scroll bottom left; }
.box-topLeft { background:transparent url(placerurlimage) no-repeat scroll top left; }
.box-topRight { background:transparent url(placerurlimage) no-repeat scroll top right; }
.box-bottomLeft { background:transparent url(placerurlimage) no-repeat scroll bottom left; }
.box-bottomRight { background:url(placerurlimage) no-repeat scroll bottom right; padding:3px; }
Voilà vous êtes prêt, je vous assure ça parrait compliquer mais franchement c'est simple ...
Prochaine étape : modifs des élement principaux !!!
Prochaine étape : modifs des élement principaux !!!
Modifier toutes les paramètres de votres blog selon votre guise dans la partie 
