Comment personnaliser le formulaire flottant

Le formulaire flottant en bas à droite de votre blog est entièrement personnalisable grâce au CSS.

Sans titre 1.png

Tous les codes donnés ci-dessous seront à copier dans votre CSS personnalisé (voir en bas de page comment y accéder)


Personnaliser le fond

fonddegradé.png

L'exemple comprend les bords arrondis et la bordure ombrée.

#floating-form {
background-image: url('http://ici adresse de votre image');
background-repeat: repeat;
background-position: 50% 50%;
margin-bottom: 100px;
right: 10px;
/* coins arrondis */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
/* bordures ombrées */
-webkit-box-shadow: 2px 4px 12px #666;
-moz-box-shadow: 2px 4px 12px #666;
box-shadow: 2px 4px 12px #666;
filter:progid:DXImageTransform.Microsoft.Shadow(color='#aaaaaa', Direction=135, Strength=12);
}

Si vous ne désirez pas les bords arrondis ni la bordure ombrée, le code sera :

#floating-form {
background-image: url('http://ici adresse de votre image');
background-repeat: repeat;
background-position: 50% 50%;
margin-bottom: 100px;
right: 10px;
}


Personnaliser la couleur de INSCRIVEZ-VOUS AU BLOG

inscrivez-vous.png

ici la couleur est noire, le code couleur est #000000;

remplacez-le par celle de votre choix

#floating-form h3 {
color: #000000;
}


Personnaliser SOYEZ PREVENU .... Fond et couleur d'écriture

soyez prevenus.png

L'exemple comprend les bords arrondis et la bordure ombrée.

#floating-form p.register{
background-color: #E0B6A4;
color: #000000;
font-size: 11px;
padding: 5px;
/* coins arrondis */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
/* bordures ombrées */
-webkit-box-shadow: 2px 4px 12px #666;
-moz-box-shadow: 2px 4px 12px #666;
box-shadow: 2px 4px 12px #666;
filter:progid:DXImageTransform.Microsoft.Shadow(color='#aaaaaa', Direction=135, Strength=12);
}

Si vous ne désirez pas les bords arrondis ni la bordure ombrée, le code sera :

#floating-form p.register{
background-color: #E0B6A4;
color: #000000;
font-size: 11px;
padding: 5px;
}

background-color: #E0B6A4; représente la couleur de fond, ici jaune

color:#00000; représente la couleur d'écriture, ici noire

font-size: 11px; représente la grosseur d'écriture. (Augmentez le chiffre pour une police plus grosse.)


Personnaliser INSCRIVEZ-MOI. Fond et couleur écriture

inscrivezmoi.png

#floating-form button{
background-color: #E0B6A4;
color: #000000;
border: 1px outset #000;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}

background-color: #E0B6A4; représente la couleur de fond, ici jaune

color:#00000; représente la couleur d'écriture


MARCHE A SUIVRE POUR ACCEDER AU CSS PERSONNALISE

Voici comment procéder :

Vous allez sur l'onglet VOTRE BLOG >>> DESIGN DU BLOG, vous obtenez la fenêtre ci-dessous

Screenshot_28.png

Screenshot_29.png

Lorsque vous avez cliqué sur "modifier" une fenêtre s'ouvre et vous collez les codes qui vous intéressent.


Ce guide vous a-t-il été utile ? Oui / Non
Vous avez une question ? Contactez-nous !