Overblog Suivre ce blog
Administration Créer mon blog
12 septembre 2010 7 12 /09 /septembre /2010 00:03

smile-sur-ordinateur.jpgSuite de la programmation pour avoir une image cliquable et affichage d'un texte au survol de la souris
->en 3 articles:
--->le 1er pour comprendre les zones cliquables  
[  ICI ] ,
--->le 2eme pour comprendre les IFRAME, cet article en cours
--->le 3ème pour finir la série avec l'affichage du texte sur le survol de la souris

2ème Article pour les IFRAME
cette fonction permet d'appeler une page web HTML depuis un article.

C'est utile sur Over-Blog, car celui-ci n'accepte pas toujours tous les codes HTML dans ces articles, en mode source bien sur , (et être en mode Privilège )...
Parfois même OB modifie les codes que nous avons mis dans l'article , c'est pourquoi je fais appel a une page web , page que je programme avec un programme genre Front page ou Dreamweaver, cela me permet d'écrire ce que je veux, de faire des essais sur mon PC sans toucher a mon article sur OB, quand ça fonctionne, il suffit d'insérer une ou deux lignes de codes dans OB en mode source
Des exemples d'utilisations:
mon 1er essai, avec appel de 3 IFRAME !! impressionnant  [ ICI ]
ou sur le blog des églises , voir la page d'accueil [ http://eglises.over-blog.fr/]



Voici la ligne de code pour l'exemple ci-après:

 <iframe src="http://dany.enchine.over-blog.com/article-34726244.html" name="I1" id="I1" width="700" frameborder="no" height="690" scrolling="yes"></iframe>
 
-on ouvre avec "IFRAME" et on ferme le code avec "/IFRAME"
-le "SRC" permet de mettre l'adresse de la page que l'on veut afficher
-le "ID=" est l'identifiant pour un appel, si vous faite un 2ème appel de page, vous pouvez mettre ID=I2...
- la hauteur et la largeur d'affichage sur votre article, comme une 'fenêtre' pour voir votre page web
et le "scrolling" pour ajouter les ascenseurs pour pouvoir visualiser entièrement la page web appelée


je ne mets pas d'appel d'un article pour l'exemple car OB n'aimes pas les IFRAMES

Published by Dany85 - dans Programmation
commenter cet article
11 septembre 2010 6 11 /09 /septembre /2010 00:03

smile-sur-ordinateur.jpgPHOTOFILTRE: Un logiciel gratuit et performant pour retoucher ,manipuler, etc... des photos

Installer le logiciel.

Il vous faut d'abord le logiciel , aller sur le site de l'auteur [ ICI ].
cliquer à gauche sur "Téléchargement":
vous voyez en haut de la page:
PhotoFiltre 6.4.0 / Janvier 2010 et dessous la petite disquette, cliquez sur:
Version française avec installeur et Barre d'outils Ask (3.72 Mo)
après le chargement ,cliquez sur le fichier pour l'installer.

à l'installation:
cocher la case" j'accepte...."
décocher les cases "Faire de Ask mon moteur par défaut"
décocher "Faire de Ask ma page d'accueil"
(ou laisser si vous désirez utiliser ASK).

Pour changer la taille d'une photo
trop grande ,donc trop "lourde" en octets, par exemple pour envoyer par email ou mettre sur un blog , sur mon blog ici , en général les photos font 740x 555 px.

L'image du logiciel pour changer la taille:
changer-la-taille
Comment faire (en texte,équivalent à l'image ci-dessus)
=> Fichier, rechercher votre photo sur votre ordi
--> faire comme sur l'image:
1- cliquer sur "Image"
2-cliquer sur "Taille de l'image"
une petite fenêtre s'ouvre avec les valeurs de la photo originale

les changements par l'image:
changer-la-taille 2
changer les valeurs dans "nouvelle taille",
par exemple comme sur mon blog, 700 pour la largeur, la 2ème valeur change toute seule
la résolution est la qualité de la photo, mon appareil photo numérique est réglé sur "bonne qualité",
et ça me donne des photos de 180 px (pixels/pouce) ce qui est très correct pour une photo.
Pour le blog, je change cette valeur entre 96 et 110 de résolution.

Enregistrez votre photo:
important: pour faire des essais, il est impératif de créer un répertoire ,par exemple "essais" et de mettre une copie de vos photos dedans pour les tests !!
aller dans "fichier" , et cliquez sur  "Enregistrer sous" :
choisissez votre répertoire où vous voulez enregistrer.
choisissez le format , par exemple "gif" ou "jpg" , le plus standard et mettre (ou garder" la valeur de 90 ), enregistrer.
Si vous voulez avoir une image de moindre qualité donc moins lourde, mettez 80 au lieu de 90.

A suivre d'autres utilités.

Article lié aux articles pour une image cliquable:
Partie 1 : apprendre comment fonctionne les zones cliquables [ ICI ]
Partie 2 : apprendre comment fonctionne la fonction IFRAME [ ICI ]

Published by Dany85 - dans Programmation
commenter cet article
27 août 2010 5 27 /08 /août /2010 00:09

smile-sur-ordinateur.jpgPour changer un peu des photos, une de mes passions, et mon ancien métier, la programmation.
Plusieurs personnes me demandes comment faire une image avec des zones sur cette image qui soient cliquables et avec un texte qui s'affiche au passage de la souris , ce qui permet de choisir avant de cliquer. voici un exemple [ http://eglises.over-blog.fr/ ]
Aujourd'hui, comment rendre une image cliquable. Il faut être en mode privilège.

Ces infos ont été trouvées sur internet bien sur, sur des sites ou forums qui parles de la programmation HTML et/ou javascript ,comme:
[ http://www.commentcamarche.net/contents/html/htmlimages.php3 ]
Les images réactives ("images MAP")
ou
[ http://www.allhtml.com/forums/posts_list/topic:422710 ]

Moi je fais mes essais avec un logiciel de creation de page web, comme Front page ou autre Dreamweaver. Cela est utile pour faire des essais et comprendre les termes employés , comme AREA , SHAPE , MAP ou HREF

On fait un essai pour comprendre ces instructions:
Il faut d'abord une image ou une photo. Et déterminer les points entre lesquels on peut cliquer.
J'utilise Photofiltre comme logiciel de dessin , il est performant et gratuit.
Je charge mon image dans photofiltre et je dessine dessus des traits rouges pour faire mes carrés ou rectangles qui seront cliquables, ce n'est pas l'image originale bien sur ,mais une copie.
Je fais l'essai par exemple avec la carte de l'ile d'Yeu:
carte_ile_Yeu.jpg
On voit bien les carrés et rectangles à cliquer.
Pour saisir les coordonnées d'un carré, il suffit dans photofitre,de positionner la souris au dessus du coin
supérieur gauche les valeurs relevées seront , 317,106
on positionne la souris au dessus du coin inférieur droit, ici ce sera 360,154
ainsi j'ai déjà les coordonnés du 1er carré cliquable.

Ce qui donne pour faire l'essai:

-- les informations concernant l'image
:

on donne l'adresse où est stocké l'image,ici c'est sur OB, la taille et diverses infos que vous recopiées comme ici:
<IMG SRC="http://idata.over-blog.com/1/21/44/25/photos2/carte_ile_Yeu.jpg" Width="730" Height="562" name="Image1" width="730" height="562" border="0" usemap="#Map" id="Image1" alt="mon essai de zone cliquable">

-- et les informations pour créer la map:


on "ouvre" et on "ferme" MAP et dedans on écrit la ligne AREA, autant de fois que l'on a des carrés, il suffit de changer les coordonnés de chaque carré.
le HREF sert a ouvrir une nouvelle fenêtre avec une adresse d'article si on clique sur le carré
  <map name="Map">
<AREA SHAPE="rect" COORDS="317, 105, 360, 154" HREF="http://eglises.over-blog.fr/article-36140914.html" TARGET="_blank">

    </MAP>
Nota: a la place des carrés, on peut faire aussi des cercle ou des polygones, recherche sur Google avec AREA SHAPE vous donneras toutes les infos, voir aussi le 3eme article de cette série avec des AREA SHAPE POLY

un essai: avec le carré en haut:

mon essai de zone cliquable

Published by Dany85 - dans Programmation
commenter cet article
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

** 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*