Même sans trop d'expérience,mais avec prudence, il est possible de modifier votre feuille de style (CSS), pour
faire une belle fenêtre de "Ajouter un commentaire", et l'adapter à votre blog.
Nota:
Beaucoup de commentaires disant , je n'ose pas le faire.
Faites seulement un essai simple:
Ouvrir votre 'Design' (voir plus bas si vous savez pas faire)
Dans le bas du CSS Global , le votre, pas l'original , coller le code pour faire un cadre de votre fenêtre:
premier_essai
#formComment {
border:3px
solid #FF0000; /* cadre de 3 pixels */
background-image:none; /* pas d'image
de fond */
background-color: #00FF00; /* choisir une couleur (ici en vert */
} /* ne pas oublier le crochet de fin */
|
L'article est séparé en plusieurs petites parties, vous connaissez pour la plupart beaucoup de ces parties.
L'idée m'est venue en voyant l'image dans l'entête de chez Anne-marie [ soleil51 ].allez-y de ma part, regarder sa belle fenêtre de commentaires et profitez-en pour lui laisser un
message. En faisant des recherches sur Internet , j'ai vu le blog de Zoélie ,[ trucs et astuces ],avec une petite image dans le bouton 'Ajouter ce commentaire'.
Suivez bien l'ordre des nombres sur les photos.
Avant de démarrer , voici un aperçu des modifications de cet article:
Photo de ma fenêtre de comm avant
|
Photo de ma fenêtre de comm après
|
|
|
Merci aux blogs .
Je n'ai rien réinventé, comme je faisais mes modifications, j'en ai profité pour faire des copies d'écrans et
faire un article en images.
Les infos proviennent de beaucoup de sites , pour citer les principaux, tous ces blogs vous aident dans la conception, ou la mise en forme de vos blogs.
Le blog de Zoélie ,[ trucs et astuces ],
Le blog de Titia, [ Le blog d'aide de
Titia , trucs et astuces en CSS ]
Le blog de Anna-K, [ Les ficelles
d'Anna ]
Le blog de Bakémono, [ Trucs en
vrac ]
Avant de démarrer.
Les mémoires caches.
Quand on fait des essais de programmation, on visualise nos essais dans un navigateur (Internet Explorer ou Firefox ), il est nécessaire de vider le cache de ces navigateurs, sinon vous voyez la
1ère modification que vous avez faite, et ensuite , vous dites, ma modification n'est pas bonne. En fait, le navigateur charge la page à afficher , et la met en "cache" , si vous rappelez une
2ème fois la même page, le navigateur affiche la 1ère page déjà chargée, cela pour gagner du temps d'affichage.
Avec Internet Explorer , vous faites les touches claviers "CTRL" et "F5" en même temps ou "F5" , en principe cela suffit pour recharger la page.
Vider le cache de Firefox:
Avec Firefox , vous faites les touches claviers "CTRL" et "R" en même temps ,j'ai remarqué que cela ne fonctionnait pas toujours, je vais donc plus vite avec la souris:
Ouvrir "Outils"
Cliquer "Effacer mes traces"
Ne laisser que la coche sur Cache"
Cliquer sur "Effacer mes traces ..."
|
|
Les outils nécessaires:
Le logiciel de dessin [ PhotoFiltre ] , excellent logiciel et gratuit, la page de
[ téléchargements ].
Pour créer , modifier vos images, vous pouvez installer des [ plugins ]
, par exemples désassembler des gifs animés etc...
Une palette de [ couleurs ] .
Pour choisir vos couleurs , cliquer sur la case de la couleur désirée, sous le tableau , un cadre contient le code de votre couleur. Un copier/coller dans votre CSS.
Quelques codes couleurs , pour faire vos essais:
Je met les commentaires (sans importance pour le CSS en couleur verte )
Je met les lignes de codes (important pour le CSS en couleur orange )
/* #FF00FF= violet */
/* #FFFF00= jaune */
/* #0000FF= bleu */
/* #FF0000= rouge */
/* #00FF00= vert */
Nota : dans le CSS , les commentaires ou
explications sont entre les caractères " /* " pour ouvrir le texte et " */ " pour le fermer.
Important de ne pas oublier l'un ou l'autre.
Comment modifier la page "CSS" de
global:
Il faut d'abord savoir si vous pouvez modifier votre page CSS.
1- vérifier que vous
pouvez accéder à votre CSS:
La coche sur "Appliquer ma feuille de style...." doit être mise.
1-Admin 2-Configurer 3-Options globales 4-Réglages avancés 5-Feuille de
style cochée
2- Vérifier que vous êtes en mode
"Avancé":
Si vous avez cette image, vous ne modifiez rien, vous êtes en mode Avancé, si vous cliquez vous repassez en mode "Classique"
Si vous êtes en mode "Classique" vous cliquez pour passez en mode "Avancé". C'est sans danger (en principe).
3- Vérifier que vous avez votre feuille de style personnalisée
Vous ne touchez pas à la feuille 'Original' , vous cochez "Je souhaites modifier...", une copie de l'original sera fait , ainsi vous pourrez toujours revenir en arrière en enlevant la coche (en
5).
1-Admin 2-Design 3- Mode avancé 4- Global 5-mettre la coche
4- Avant toutes modifications:
Faire une sauvegarde de votre feuille de style:
Sélectionnez la feuille complète
-positionner la souris, sur le texte , et faire les touches "CTRL" et "A" en même temps
-faire les touches "CTRL" et "c" en même temps, pour "Copier" ou à la souris : copier
Ouvrez le bloc-note de windows , et faire un coller ,touches "CTRL" et "V"
Enregistrez ce fichier (exemple css_global_avant_modif_06_032008a.txt)
5- Préparer votre
image (si vous en mettez une):
Ouvrez PhotoFiltre.
Ouvrez votre blog , et cliquez sur "ajouter un commentaire" , la fenêtre de commentaire s'ouvre , vous faites une copie d'écran
-touche en général noté : "Imprécran" /
Dans photoFiltre, 1-Editon 3-Coller en temps qu'image
vous retrouvez votre écran dans photofiltre, vous sélectionner avec la souris l'intérieur de la "fenêtre 'ajouter un commentaire'
Dans le bandeau du bas , s'affiche la taille de l'image que vous avez besoin, à ajuster par la suite, ce n'est pas bien important.
6- Les différentes structures de la fenêtre de
comms:
Les 5 points (5 structures ) seront traités dans cet article , on peut aller un peu plus loin, mais pour débuter , c'est déjà pas mal.
Les cadres (5 structures) auront la même forme:
1-on appelle la structure : #form..... {
2- le cadre autour de notre structure :
border:2px solid #FF0000; /* cadre autour des rectangles */
ou 'border est pour faire le cadre, 2px est la largeur de ce cadre ,
solid est pour faire un cadre plein ( ou dotted pour faire des pointillés ou double pour faire un cadre ... double.
et les /* ..... */ , sont sans effet , c'est des explications
3-le fond de notre cadre :
on ne veut pas d'image dans le fond, mais une couleur:
/* choix sans image de fond et en couleur xxx */
background-image:none; /* pas d'image de
fond */
background-color: #00FF00; /* choisir une couleur
(ici en vert ) */
le fond est sans image (none) et on met une couleur de fond : #00FF00 pour la couleur
verte
on veut une image de fond:
/* mettre mon image en fond */
background-image:url(http://idata.over-blog.com/1/37/44/18/mes-photos/fond_comm.jpg);
/* positionnée l'image dans la fenêtre
*/
padding-left:10px;
padding-right:10px;
padding-bottom:90px;
L'image est hébergée chez OB ou autre hébergeur, mettez votre adresse à la place de la mienne ( http://idata.....)
les padding pour positionner le contenu dans le cadre , à tester pas à pas, chaque blog est un peu différent.
4-Le texte dans le cadre:
/* --------------infos pour la police de texte---------------------------- */
font-family: arial, sans-serif; /* choix de la
police */
font-weight:
bold; /* bold= gras rien=none */
font-size:
12px;
/* taille de la police */
font-style:
italic; /*
ecrire en italique */
letter-spacing:
0.06em; /* espacement entre les
cars */
color:
#FF0000;
/* FF0000=rouge FFFF=jaune */
je penses que les commentaires sont assez explicites (taille de police, couleur etc...)
7-Passons à la pratique ( faites une
modification à la fois):
Le texte en couleur orange est le code réel , utile pour le CSS , le texte en italique ou vert, est du commentaire, non
utile au CSS.
Vous prenez l'essai qui vous convient le mieux, ensuite, vous modifiez les valeurs pour les adapter à votre blog
ou prenez directement mon code complet, le plus complet , avec cadre , image de fond et couleurs de texte, visualisez sur
votre blog, ensuite faites une modification à la fois.
Vous pouvez tester une des 5 parties à la fois.
1er essai avec un fond en couleur vert et un cadre plein en rouge , autour:
coller le code ci-dessous à la fin du CSS global et enregistrez, ensuite visu de votre fenêtre
Cet essais fait un cadre rouge de 3 pixels (3px)
Pas d'image de fond mais une couleur ( ici le vert )
|
|
#formComment {
/* -un cadre autour,de 3pixels d'épaisseur et le cadre en rouge----
*/
border:3px solid #FF0000; /* cadre= ou solid -
dotted */
/* ---------- choix sans image de fond et en couleur xxx ------ */
background-image:none; /* pas d'image
de fond */
background-color: #00FF00; /* choisir une couleur (ici en vert */
} /* ne pas oublier le crochet de fin */
|
|
|
|
|
2ème essai avec un fond en couleur jaune et un cadre en bleu en pointillé , autour:
coller le code ci-dessous à la place du précédent, ou dans le as de votre feuille CSS global
|
|
#formComment {
/* un cadre autour ici en 3pixels d'épaisseur et le cadre en rouge- */
border:3px dotted #0000FF; /* cadre= ou solid
-dotted */
//* ---choix sans image de fond et en couleur xxx --- */
background-image:none; /* pas d'image de
fond */
background-color: #FFFF00; /* choisir une couleur ici jaune */
} /* ne pas oublier le crochet de fin */
|
|
|
|
|
3 ème essai avec une image en fond et un cadre rouge plein , autour:
coller le code ci-dessous à la place du précédent, ou dans le as de votre feuille CSS global
|
|
#formComment {
/* --un cadre autour , ici en 3pixels d'épaisseur et le cadre en
rouge-- */
border:3px solid #0000FF; /* cadre= ou solid ou dotted
ou.. */
/* ---------- mettre mon image en fond ------------------------------ */
background-image:url(http://idata.over-blog.com/1/37/44/18/mes-photos/fond_comm.jpg);
/* ---------- positionnée l'image dans la fenêtre
----------------------- */
padding-left:10px; /* position a
gauche */
padding-right:10px; /* position a
droite */
padding-bottom:100px; /* position du bas , la derniere a régler */
} /* ne pas oublier le crochet de fin */
|
|
|
|
|
|
4éme essai, même que ci-dessus , mais en modifiant le texte à l'intérieur de la fenêtre.Je penses que
les commentaires associés au texte sont assez explicites.
|
|
#formComment {
/* -un cadre autour , ici en 3pixels d'épaisseur et le cadre en
rouge----- */
border:3px solid #0000FF; /* cadre= ou solid ou dotted
ou.. */
/* ---------- mettre mon image en fond ------------------------------ */
background-image:url(http://idata.over-blog.com/1/37/44/18/mes-photos/fond_comm.jpg);
/* --------- positionnée l'image dans la fenêtre
---------------------- */
padding-left:10px;
padding-right:10px;
padding-bottom:100px;
/* - infos pour modifier le texte à l'intérieur d'un cadre ----------------- */
font-family: arial, sans-serif; /* choix de la
police */
font-weight: bold; /* bold= gras
rien=none */
font-size:
12px; /* taille de la
police */
font-style: italic; /*
ecrire en italique
*/
letter-spacing: 0.06em; /* espacement entre les
cars */
color: #FFFF00; /*
FF0000=rouge FFFF=jaune */
} /* ne pas oublier le crochet de fin */
|
|
Voila les essais du grand cadre terminé.
Nous pouvons passé au grand cadre du titre en haut:
Mettre une image dans le cadre en haut "Ajouter un commentaire", (comme sur l'image à droite)
coller ce code sous le code de la précédente structure
|
|
#formComment h2 {
border:2px solid
#FF0000; /* un cadre avec 2 traits en couleur rouge */
/* ----infos pour la police de texte
-------------
*/
font-family: Verdana; /* choix de la
police
*/
font-weight: bold; /* bold= gras
rien=none */
font-size: 22px; /*
taille de la
police
*/
font-style: italic; /*
ecrire en
italique
*/
letter-spacing: 0.03em; /* espacement entre les
cars */
color: #FF0000; /*
FF0000=rouge FFFF=jaune */
/* ----gif a gauche de "ajouter un commentaire" --------------------------- */
background:url(http://dany.webdynamit.net/images/enfants60.gif)no-repeat bottom left;
padding-top:35px;
padding-left:50px;
/* -----position du texte Ajouter un commentaire----------------------------- */
margin-bottom:25px;
} /* ne pas oublier le crochet de fin */
|
|
Les 3 cadres 'nom' , 'mail' , 'site':
|
coller ce code sous le code de la précédente structure
|
|
/*------- interieur des saisies des 3 rectangles -nom-mail-site-------------*/
#formComment input {
border:2px solid #FF0000; /* cadre autour
des rectangles */
background:#D1B48C; /* couleur du fond des
rectangles */
/* -----------------infos pour la police de texte
------------- */
font-family: Verdana; /* choix de la
police
*/
font-weight: bold; /* bold= gras
rien=none */
font-size: 12px; /*
taille de la
police
*/
font-style: none; /* ecrire
en
italique
*/
letter-spacing: 0.03em; /* espacement entre les
cars */
color:
#FF0000; /* couleur du texte du
visiteur */
} /* ne pas oublier le crochet de fin */
|
|
Le cadre pour la saisie du message:
|
coller ce code sous le code de la précédente structure
|
|
|
|
/*----------------interieur du message------------------ */
#formComment textarea {
border:2px solid #FF0000; /* cadre
autour des rectangles */
background:#D1B48C; /* couleur du fond des
rectangles */
/* -----------------infos pour la police de texte ------------- */
font-family: Verdana; /* choix de la
police */
font-weight: bold; /* bold=
gras rien=none */
font-size:
12px; /* taille de la
police */
font-style: none; /*
ecrire en italique */
letter-spacing: 0.03em; /* espacement entre les
cars */
color:
#FF0000; /* FF0000=rouge
FFFF=jaune */
} /* ne pas oublier le crochet de fin */
|
|
Modifier le texte "Nous vous rappelons que....... votre adresse IP......:
|
coller ce code sous le code de la précédente structure
|
|
/* --modifier la police du texte 'nous vous rappelons..votre adresse IP... */
#formComment p {
font-weight: bold; /*
bold= gras rien=none */
font-size:
10px; /* taille de la
police */
font-style:
italic; /* ecrire en
italique */
letter-spacing: 0.06em; /* espacement entre les
cars */
color:
#FF0000; /* FF0000=rouge
FFFF=jaune */
} /* ne pas oublier le crochet de fin */
|
|
Le cadre 'Publier ce commentaire " :
|
coller ce code sous le code de la précédente structure
|
|
|
#formComment input[type="submit"] {
background: #FF9900
url(http://dany.webdynamit.net/images/smile_rolleyes.gif) no-repeat;
/* ---------------------régler la position --------------*/
padding:10px 10px 10px 20px;
/* -----------------infos pour la police de texte
-------------
*/
font-family: Verdana; /* choix de la
police */
font-weight: bold; /* bold=
gras rien=none */
font-size: 12px;
/* taille de la police */
font-style: none; /* ecrire
en italique */
letter-spacing: 0.03em; /* espacement entre les
cars */
color: #FF0000; /*
FF0000=rouge FFFF=jaune */
} /* ne pas oublier le crochet de fin */
|
|
Et voila mon code complet , que vous voyez ou aller voir en mettant un gentil commentaire ;=))
/*============================================*/
/* ------------ fond du module : ajouter commentaire ----------------------*/
#formComment {
/*choix du cadre: solid=plein,dotted=pointillé,épaisseur=border:2pixels */
border:2px solid #FF0000; /*cadre=solid ou dotted ou double */
/* mettre mon image en fond */
background-image:url(http://idata.over-blog.com/1/37/44/18/mes-photos/fond_comm.jpg);
/* positionnée l'image dans la fenêtre */
padding-left:10px;
padding-right:10px;
padding-bottom:90px;
/* infos pour la police de texte */
font-family: arial, sans-serif; /* choix de la police
*/
font-weight: bold; /* bold=
gras rien=none */
font-size: 12px; /* taille de la police */
font-style:
italic; /* ecrire
en italique */
letter-spacing:
0.06em; /* espacement entre les cars */
color:
#FF0000; /* FF0000=rouge FFFF=jaune */
}
/*=============================================*/
/* modifier la police du texte 'nous vous rappelons....votre adresse IP.. */
#formComment p {
font-weight: bold; /* bold=
gras rien=none */
font-size: 10px; /* taille de la police */
font-style: italic; /* ecrire en italique */
letter-spacing: 0.06em; /* espacement entre les cars */
color: #FF0000; /* FF0000=rouge FFFF=jaune */
}
/*=========================================== */
/* grand rectangle en haut 'Ajouter un commentaire' */
#formComment h2 {
border:2px solid #FF0000; /* un cadre avec 2 traits en couleur rouge */
/* infos pour la police de texte
*/
font-family: Verdana; /* choix de la
police */
font-weight: bold; /* bold= gras
rien=none */
font-size:
22px; /* taille de la
police */
font-style: italic; /* ecrire en
italique */
letter-spacing:
0.03em; /* espacement entre les cars */
color:
#FF0000; /*
FF0000=rouge FFFF=jaune */
/* gif a gauche de "ajouter un commentaire" */
background:url(http://dany.webdynamit.net/images/enfants60.gif);
background-repeat: no-repeat;
padding-top:35px;
padding-left:50px;
/* position du texte Ajouter un commentaire */
margin-bottom:25px;
}
/*======================================= */
/* interieur des saisies des 3 rectangles -nom-mail-site-*/
#formComment input {
border:2px solid #FF0000; /* cadre autour des rectangles */
background:#D1B48C; /* couleur du fond des rectangles */
/* infos pour la police de texte */
font-family: Verdana; /* choix de la
police */
font-weight: bold; /* bold= gras
rien=none */
font-size: 12px; /* taille de
la police */
font-style: none; /* ecrire en
italique */
letter-spacing:
0.03em; /* espacement entre les cars */
color: #FF0000; /*
couleur du texte du visiteur */
}
/*======================================== */
/*interieur du message */
#formComment textarea {
border:2px solid #FF0000; /* cadre autour des rectangles */
background:#D1B48C; /* couleur du fond des rectangles */
/* infos pour la police de texte */
font-family: Verdana; /* choix de la
police */
font-weight:
bold; /* bold= gras
rien=none */
font-size:
12px; /* taille de la
police */
font-style: none; /* ecrire en
italique */
letter-spacing:
0.03em; /* espacement entre les cars */
color:
#FF0000; /* FF0000=rouge FFFF=jaune
*/
}
/*============================================ */
/* [type="submit"] */
#formComment input[type="submit"] {
background: #FF9900 url(http://dany.webdynamit.net/images/smile_rolleyes.gif)
no-repeat;
/* réglage des positions */
padding:10px 10px 10px 20px;
/*----- infos pour la police de texte ----- */
font-family: Verdana;
/* choix de la police */
font-weight:
bold; /* bold= gras
rien=none */
font-size: 12px; /* taille de la
police */
font-style: none; /* ecrire en
italique */
letter-spacing:
0.03em; /* espacement entre les cars */
color: #FF0000; /* FF0000=rouge
FFFF=jaune */
}
|
Et bien sur , prenez vos précautions , faites des
sauvegardes, le mieux est d'avoir un blog pour faire vos essais.
Créez un nouveau blog chez OB , mettez le même style de blog , les mêmes configs et structures.
Ensuite vous pouvez faire vos essais sans problèmes
Et comme le dit sans arrêt OB, j'en fais donc autant, je ne suis pas responsable des ennuis que vous pourriez
rencontrer au cours ou après vos essais.
Bonne amusement.
:
