pour embellir et personnaliser votre fenêtre de commentaires via le css

Publié le par nessa

à la demande de beaucoup d'entre vous voici un petit billet pour mettre une image dans votre fenêtre de commentaires sur Overblog;

pour cela vous devez avoir choisi un thème de blog modifiable; les lignes de CSS sont à rajouter en bas de votre CSS;

je vous rappelle qu' avant de rajouter quoique ce soit vous devez avoir faire une sauvegarde de CSS......

 

/* fenetre de commentaire */

 

.diablog p:first-letter { font-size:250%;font-family:Monotype Corsiva; }
.diablog{ background: url(votre image de fond);background-position:fixed; default;}
.ob_form fieldset ul li .w100prct {font-family:Comic Sans MS;opacity: 0.7!important;}
.diablog .buttons{background:transparent;border:0;margin-top:2em}
.diablog a img{border:0}
.diablog .title {padding-top:55px;background:url(url d'un gif);background-repeat:no-repeat;font-family:Gabrielle;text-align:center; font-size: 30px ; color:#004BAC;background-position:right; }
.diablog .content .ob_form fieldset p { font-size:13px!important; }


.ob_form fieldset ul li label{font-family:Gabrielle;font-size: 21px;font-weight:bold;color:#000099; }
.ob_form fieldset ul li .w100prct {font-family:Gabrielle;font-size: 21px;font-weight:bold;color:#000099; }
.OBSkin .mceIframeContainer { opacity: 0.6;}

#hotmailPromo { display:none; }


.ob-button .first-child {background-image:none;!important}
.ob-button.orange .first-child {background-image:none;!important; background-position: center;background-color:#transparent}
.ob-button {background-image :none; } 
.ob-button.orange {background-image :none; background-position: 0 -81px;} 
.ob-button button {color:#004BAC!important; font-weight:bold;font-size:30px;font-family:Gabrielle;}
.ob-button button a:hover { font-size:32px!important; }

 

 

 

Voilà c'est une possibilité de fenêtre, la mienne pour le moment pour comprendre certaines de ces lignes  et savoir ce qu'elles veulent dire; personnaliser selon vos goûts;

aller lire l' excellent tuto de christelle ici

En rouge ce que vous pouvez modifier ou rajouter

 

Explication de certaines lignes

#hotmailPromo { display:none; }

ceci est pour rajouter retirer (merci claude ! ) la phrase de  publicité pour hotmail sur la fenêtre

 

.OBSkin .mceIframeContainer { opacity: 0.6;}

.ob_form fieldset ul li .w100prct {font-family:Comic Sans MS;opacity: 0.7!important;}

Ces lignes sont pour rajouter de la transparence dans les fenêtres d'écriture;

CQFD: en rajoutant ces lignes vous ne pourrez plus modifier l'apparence de la police dans la rectangle réservé à l'écriture des commentaires;

 

.diablog p:first-letter { font-size:250%;font-family:Monotype Corsiva; }

Cette ligne sert à rajouter de belles majuscules aux lignes officielles OB ...

 

bonnejournee7.jpg

image trouvée sur le site ririfleur

 

Rendez-vous sur Hellocoton !

Partager cet article

Repost0

Commenter cet article

C
bonjour,<br /> peux tu m'aider à changer la couleur de"publier ce commentaire" j'ai essayé mais en vain.<br /> d'avance merci
Répondre
A
j'essaierai de me lancer là dedans quand j'aurais la tête plus claire.
Répondre
F
Bonjour,<br /> Merci beaucoup pour cet article qui m'a permis d'embellir ma fenêtre de commentaires :)<br /> Par contre ça fait deux heures que je cherche pour modifier une couleur et je n'y arrive pas :(<br /> J'aimerai changer la couleur de "Publier ce commentaire"<br /> et est-il possible de changer le titre "Ajouter un commentaire" en "Déposer votre plume" ? Merci beaucoup pour votre aide<br /> Bon weekend<br /> Amicalement
Répondre
S
<br /> <br /> Wouaaaaaaaaaaaaaa, je te remercie pour la réponse !<br /> <br /> <br /> Mais je n'ai jamais touché au css, alors je vais attendre de bien comprendre !<br /> <br /> <br /> Je te souhaite une bonne journée<br /> <br /> <br /> Bizzzzzzzzzzzzzzzzzzzzzzz<br /> <br /> <br /> Martine<br /> <br /> <br /> <br />
Répondre
C
<br /> <br /> ah super j'ai changé ma fenêtre :)<br /> <br /> <br /> bisous<br /> <br /> <br /> christelle<br /> <br /> <br /> <br />
Répondre
S
<br /> <br /> Coucou Nessa, je prends ... transparence dans les commentaires, merci à toi. C'est vrai qu'avec de la transparence, l'écriture est plus douce. Bonne soirée.<br /> <br /> <br /> <br />
Répondre
E
<br /> <br /> CoucouNESSA,  oserais je m'y coller, j'ai bien envie lol<br /> <br /> <br /> mon petit passage sonnant la minute<br /> <br /> <br /> <br />
Répondre
T
<br /> <br /> salut<br /> <br /> <br /> ben je m'en suis pas encore occupé<br /> <br /> <br /> mais je vais trouvé quelque chose<br /> <br /> <br /> bonne journée<br /> <br /> <br /> <br />
Répondre
J
<br /> <br /> je ne l'ai pas encore fait...<br /> <br /> <br /> <br /> <br /> <br /> bisous<br /> <br /> <br /> <br />
Répondre
C
<br /> <br /> oui il n'y a pas de lien vers tout mes jeux flash mais je voulais changer mon css et tout faire à ce moment là et je me suis fait prendre pas le temps, comme pour le moment j'ai super mal au dos<br /> ce sera pour quand je me sentirais mieux. BONne soirée d'anniversaire et profite bien de ton beau gateau<br /> <br /> <br /> <br />
Répondre
C
<br /> <br /> autant je n'ai pas de problèmes pour le création autant je suis récalcitrante pour comprendre le css , j'ai toujours peur de me tromper , ainsi cela reste comme c'est , à 62 ans , on a du mal à<br /> s'y faire<br /> <br /> <br /> <br /> <br /> <br />  <br /> <br /> <br /> bisous<br /> <br /> <br /> <br />
Répondre
P
<br /> <br /> bonjour nessa j y reviendrai car pas encore tout compris sur le css   car ou le rajouert  a la fin de quoi articles ou autre  dans le css  je m y pencherai des que j<br /> autrai un pt moment  bisous et merci  de cette aide<br /> <br /> <br /> <br />
Répondre
E
<br /> <br /> Merci et très belle soirée!<br /> <br /> <br /> <br />
Répondre
B
<br /> <br /> j'adore quand tu publies des astuces pour overblog<br /> <br /> <br /> gros kissss<br /> <br /> <br /> <br />
Répondre
K
<br /> <br /> merci pour ces super infos...<br /> <br /> <br /> on va bien pouvoir personnaliser nos blogs.<br /> <br /> <br /> <br /> <br /> <br /> <br />
Répondre
K
<br /> <br /> Bisous<br /> <br /> <br /> <br />
Répondre
C
<br /> <br /> dis moi, j'aurais besoin au moins provisoirement de changer la couleur de "publier ce commentaire", car ma photo de fond est noire, alors on ne le vois pas vraiment...si tu sais me dire Merci ;))<br /> <br /> <br /> bonne journée<br /> <br /> <br /> <br />
Répondre
S
<br /> <br /> je te souhaite une belle journé€ ensoleillée!!!!<br /> <br /> <br /> <br />
Répondre
T
<br /> <br /> en ce mardi je passe vous dire BONJOUR  et vous souhaite une très belle journée<br /> <br /> <br /> <br />
Répondre
S
<br /> <br /> Snif, j'y comprend rien, pourtant je ne suis pas blonde.<br /> <br /> <br /> Passe un très bon mardi<br /> <br /> <br /> Gros bisous<br /> <br /> <br /> <br />
Répondre
C
<br /> <br /> je te souhaite une bonne journée<br /> <br /> <br /> gros bisous<br /> <br /> <br /> christ'ailes<br /> <br /> <br /> <br />
Répondre
M
<br /> <br /> bonjour, je te remercie de ton passage chez moi.pour mes vidéos, j'essaye de faire passer un bon moment à ceux qui les regardent; @+<br /> <br /> <br /> <br />
Répondre
C
<br /> <br /> puis-je une tite question Nessa ? Comment faire apparaître l'avatar dans la réponse aux commentaires ? Merci ma  belle, bonne nuit à bientôt<br /> <br /> <br /> Chantal de ch'nord<br /> <br /> <br /> <br />
Répondre
T
<br /> <br /> salut<br /> <br /> <br /> ben je vais voir pour la fenetre de commentaire<br /> <br /> <br /> merci du tuyau<br /> <br /> <br /> bonne soirée<br /> <br /> <br /> <br />
Répondre
G
<br /> <br /> Ouh là,...ça me semble trop compliqué pour moi !!!!!<br /> <br /> <br /> bisous<br /> <br /> <br /> <br />
Répondre
<br /> <br /> Belle soirée à toi la miss ! bisous<br /> <br /> <br /> <br />
Répondre
A
<br /> <br /> bonsoir nessa, mille merci pour m'avoir presenter tes condoleances, et aussi pour mon anniv, gros bisous et bonne soirée<br /> <br /> <br /> <br />
Répondre
M
<br /> <br /> Après une chaude journée ensoleillée et de repos, je passe pour mon coucou du jour.<br /> <br /> <br /> <br />
Répondre
M
<br /> <br /> Coucou Nessa<br /> <br /> <br /> Me voilà de retour après de bons moments au soleil !<br /> <br /> <br /> c'est vrai que ta fenêtre des commentaires est sympa<br /> <br /> <br /> plein de bisous<br /> <br /> <br /> <br />
Répondre
M
<br /> <br /> Coucou !<br /> <br /> <br /> Il va falloir que je m'en occupe, c'est une bonne idée. Merci pour cette aide !<br /> <br /> <br /> Et bon début de semaine **<br /> <br /> <br />  <br /> <br /> <br /> Minéraline<br /> <br /> <br /> <br />
Répondre
I
<br /> <br /> bonsoir nessa je tenais a te remercier pour ton passage pour l'anniversaire de ma petite clara  gros bisous a toi et bonne nuit a pluche  bizzzzzzzzzzzzzzzzzzzzzzzzzzzzz<br /> <br /> <br /> <br />
Répondre
P
<br /> <br /> il va falloir que j'aie les neurones mieux alignes pour m'y mettre mais depuis le temps que je voulais svoir le faire....<br /> <br /> <br /> Alors merci pour ces explications.bises<br /> <br /> <br /> je suis ex Callophrys...le blog sera supprime bientot et remplace par celui là....<br /> <br /> <br /> <br />
Répondre
K
<br /> <br />  Bonne fin de journée.<br /> <br /> <br /> <br />
Répondre
S
<br /> <br /> Je vois que tu viens de changer ta fenêtre de commentaire.<br /> J'aimerais bien le faire aussi mais je n'ai pas trop le temps et j'ai bien peur de faire une bêtise.<br /> C'est sympa de mettre une photo.<br /> Bon lundi<br /> Bises <br /> <br /> <br /> <br />
Répondre
C
<br /> <br /> <br /> <br /> <br /> <br />
Répondre
S
<br /> <br /> coucou ! tu as reçu le badge "heal the world" sur mon blog ^-^bon lundi !<br /> <br /> <br /> <br />
Répondre
*
<br /> <br /> coucou !!!! aujourd'hui fait chaud et mais elle est belle ta barre over blog passe une bonne journée@++<br /> <br /> <br /> <br />
Répondre
T
<br /> <br /> un passage pour vous dire BONJOUR  et vous souhaiter une très bonne journée<br /> <br /> <br /> <br />
Répondre
S
<br /> <br /> Bonjour merci pour ta visite !!! Il est très bien fait ton blog !!! Je te souhaite de passer un bon lundi !!! Gros bisous !!!<br /> <br /> <br /> <br />
Répondre
L
<br /> <br /> Bonjour Nessa,<br /> <br /> <br /> Merci pour ces informations, c'est vrai que personnaliser ses commentaires c'est plus beau.<br /> <br /> <br />  <br /> <br /> <br /> <br /> <br /> <br />  Véronique de Thonon.<br /> <br /> <br /> <br />
Répondre
!
<br /> <br /> Bon je note pour quand j'aurais un css modifiable hein ! ça sera pour cet hiver maintenant hihi bisous à toi<br /> <br /> <br /> <br />
Répondre
M
<br /> <br /> coucou Nessa un superbe article mais pour moi trop difficile car je ne comprends rien et comme je ne sais même pas le css car c'est lin patine l'autre qui m'a tout fait je coule!!! mais c'est<br /> super sympa de faire profiter car j'aurai aimé décorer ma fenêtre de commentaires mais je ne suis pas trop douée pourtant je prends des cours d'informatique depuis + de 3 ans mais nous traitons<br /> toujours les mêmes sujets!!! photo excel etc.... j'en ai raz le bol et l'an prochain j'arrête car on devait justement traiter du langage html et tout ce qui concerne le blog mais pour me faire<br /> m'inscrire la prof m'a promis et la fin de l'année arrive et je n'ai rien vu de mes cours choisis que des merdes car c'est un cours de perfectionnement et il y en a qui ne savent rien faire!! je<br /> suis très déçue!! mais lorsque je reviendrai sur ob j'essaierai de mieux comprendre mais en ce moment je n'ai même pas le temps de publier j'ai mis mon blog en pause on se retrouvera certainement<br /> à la rentrée, j'espère peut-être un article avant mais je croule sous le poids de travail que j'ai à faire une grande maison et un grand terrain une petite fille des animaux un mari et un boulot<br /> et pleins de passions et aussi deux grands enfants que nous aidons du mieux que nous le pouvons et ma famille est plus importante en ce moment que le blog mais j'aime beaucoup le contact que nous<br /> avons et c'est super enrichissant, je te souhaite une bonne fin de week end de pentecote amitiés à toi<br /> <br /> <br /> <br />
Répondre
M
<br /> <br /> merci pour ton travail tu es très généreuse , bravo<br /> <br /> <br /> bisous))<br /> <br /> <br /> <br />
Répondre
T
<br /> <br /> je passe vous dire  BONSOIR  et vous souhaite une bonne fin de soirée en ce dimanche<br /> <br /> <br /> <br />
Répondre
*
<br /> <br /> merci pour le compliment du blog et merci tu lui diras qu'il a fait un bon choi merci@++<br /> <br /> <br /> <br />
Répondre
C
<br /> <br /> ça y est j'y suis arrivé, c'est bien la taille de ta fenêtre qui est différente de beaucoup de la mienne, donc forcément mes fonds ne sont plus à la bonne longueur ni largeur ;))<br /> <br /> <br /> <br />
Répondre
C
<br /> <br /> j'ai repris ton css, pour "jouer" sur mon blog d'essai, mais y a un truc qui cloche, ça ne me met pas l'image correctement<br /> <br /> <br />  <br /> <br /> <br /> <br /> <br /> <br />  <br /> <br /> <br />  <br /> <br /> <br /> tu vois, l'image se répète au lieu d'être une...peut être une question de hauteur....ta fenêtre est plus grande que la mienne<br /> <br /> <br />  <br /> <br /> <br /> <br />
Répondre
C
<br /> <br /> super ton tuto...par contre hotmailpromo, c'est pour l'enlever la pub, pas pour la mettre ???<br /> <br /> <br /> <br /> <br /> <br /> <br />
Répondre
L
<br /> <br /> <br /> <br /> <br /> <br />
Répondre
!
<br /> <br /> Bisous à toi et belle soirée<br /> <br /> <br /> <br />
Répondre