Infos du blog Jour apres Jour

Jeudi 9 mars 2006

Leçon n°4 : les éléments principaux

Voilà la partie a laquelle nous allons nous intéressé ( 1ères lignes env. ) :

/* ---------- Elements Principaux ------------- */
body    { margin:0px; font-family: Verdana, Helvetica, Arial, sans-serif; font-size:x-small;color:#00000;background:#FFFFFF; }
h1      { color: #5675A4; font-size: 20px; } /*titre des pages*/
h2      { color: #5675A4; font-size: 15px; }
h3      { color: #5675A4; font-size: 12px; }
a         { text-decoration:underline; color:#5675A4; font-size:110%; } /* lien */
a:hover { text-decoration:none; color:#9E9E9E}
legend { color:#5675A4; padding-left:5px; padding-right:5px;}
li      { list-style-type:none; }
img     { border:0px; } /* image */
input   { border:solid 1px #D8D7D7; font-size:100%; background:#FFFFFF; color:#5675A4; } /* bouton */

body : Si vous n'etes aps complétement nul en anglais body c'est le corps donc les informations concentrés ici concernet les element du corps de la page !

Mettre un fond dans votre blog :

une couleur : dans ce cas il vous suffit de opier le code couleur correspondent a la couleur que vou vouler afficher ici : background:#FFFFFF; }

Si vous ne connaissez pas vos codes couleurs, rendez vous ici

un texture : il faut l enregistrer sur votre blog, et prendre l url comme nous l avons vu précedement.

Ensuite, il vous suffit de faire une petite mofications dans le Css, au lieu d avoir background:#FFFFFF; } vous allez transformer en background: url(urlimage) ; }

Je ferais des rajouts au fur et a mesure ...

par dinou publié dans : Infos du blog
ajouter un commentaire commentaires (0) recommander

Vendredi 17 février 2006

Leçon n° 3 : Modifications des modules

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 )

/* ---------- Box ---------- */
/* 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://accel4.fdata.over-blog.com/modele/2/pics/box-top-center.png
.box-left : http://accel1.fdata.over-blog.com/modele/2/pics/box-middle-left.png
.box-right : http://accel4.fdata.over-blog.com/modele/2/pics/box-middle-rght.png
.box-bottom : http://accel5.fdata.over-blog.com/modele/2/pics/box-bottom-center.png
.box-topLeft : http://accel7.fdata.over-blog.com/modele/2/pics/box-top-left.png
.box-topRight : http://accel2.fdata.over-blog.com/modele/2/pics/box-top-right.png
.box-bottomLeft : http://accel4.fdata.over-blog.com/modele/2/pics/box-bottom-left.png
.box-bottomRigh : http://accel0.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; }

Voilà vous êtes prêt, je vous assure ça parrait compliquer mais franchement c'est simple ...
Prochaine étape : modifs des élement principaux !!!