Overblog Suivre ce blog
Editer l'article Administration Créer mon blog
11 mars 2008 2 11 /03 /mars /2008 00:07

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.

 


 







Pagerank de dany.enchine.over-blog.com

 

Published by Dany - dans Programmation
commenter cet article

commentaires

Example Button 26/09/2014 10:05

Example Button
Example Button

Mahina 23/03/2009 07:45

Quichottine m'a donné le lien de cet article, merci à elle, et merci à toi...Il y a longtemps que je n'avais pas cheché la p'tite bête au css, mais j'avais envie de changer juste cette fenetre de commentaire!

Quichottine 23/03/2009 01:30

Je suis étourdie, je n'avais pas regardé au bon endroit ! Merci Dany !Bonne journée à toi.

mengs 07/12/2008 11:50

Merci, pour ces conseils, bon alors j'en ai pour des heures, avant de comprendre, l'idée du blog annexe, c'est bien. Encore un grand merci.....

canelle56 08/06/2008 09:59

merci dany ca fait bien une dizaine de fois que je viens lire et relire ton article ilest tres bien fait!! mais j ai trop peur de tout gacher donc je ne me lance pas et c est dommage !! c est pas grave bonne journee dany

** infos diverses**

France 法国 ______Chine 中国

 

Le temps : à Paris

Le temps : à Canton

L'heure à
Paris
L'heure à
Canton
Bienvenue, ce blog est dédié principalement à la Chine, mais je vais mettre aussi mes autres passions. Pour marquer votre passage, écrivez vos commentaires, cliquer sur 'recommander ce blog' , inscrivez-vous à la newsletter, et avant de partir : votez aussi pour moi. ;=) ..merci ~il y a visiteur(s) sur ce blog ~

Publicités

*Exoclic: 1 clic/jour merci *


*Pubovore: 1 clic/jour merci*


*AdHitz : 1 clic/jour merci*