PapyClic - Design

PapyClic - Design

Personnalisation du formulaire flottant - Inscription au blog

 

Cet article vous aidera à intégrer dans le design de votre blog, le formulaire flottant qui s'affiche à la fin de la lecture d'un article pour les non-inscrits. Il s'affiche également si les membres ne se connectent pas au blog lors de leur visite, petit rappel, qui je pense, sera bien utile. 

Pour modifier le style de ce formulaire vous avez besoin d'ajouter des règles dans le CSS personnalisé, ci-dessous j'indique les sélecteurs avec les différentes parties qu'ils gèrent.

 

 

formulaire-flottant-nv.jpg

 

 

Ci-dessous, le code que j'ai ajouté à mon CSS personnalisé. 

 

/* Style du formulaire flottant */
#floating-form {
background-color: #8BB1ED !important;
background-image: url('https://static.blog4ever.com/2012/06/704535/artfichier_704535_3634007_201404112423494.png');
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);
}

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

#floating-form p.register{
background-color: #B0B0B0;
color: #0000CC;
font-size: 11.5px;
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);
}

#floating-form p.subscribers {
color: #CC0000;
}

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

 

 

Par défaut ce formulaire s'affiche en bas à droite de l'écran. Si cet emplacement ne vous convient pas vous pouvez le déplacer :

 

    1. verticalement
      Vous changez la valeur en rouge selon où vous voulez afficher le formulaire

      #floating-form {
      margin-bottom: 100px;
      }

    2. horizontalement
      Par défaut il est à droite vous n'avez rien à faire, ci-dessous le code pour le mettre à gauche :

      #floating-form {
      right: auto;
      left: 10px;
      }

 

 

 Vous ajoutez les règles dans la zone de personnalisation du CSS de l'assistant du RapidDesign ou pour les autres versions dans votre feuille de style.

 

Espace de gestion → VOTRE BLOG → Design du blog → CSS/HTML → CSS personnalisé.

 

Exemple de code collé dans la zone

 

Si votre espace de gestion est ouvert, cliquez sur : lien

 

N'oubliez pas, après visualisation dans l'assistant de cliquer sur "Appliquer" en bas de la colonne.

 

 


Si cet article vous a été utile, un petit J'aime me fera plaisir.

N'hésitez pas un mettre un commentaire, si vous avez apprécié cet article, mais également si vous n'êtes pas pleinement satisfait. 
Pour plus d'explications poster sur le forum

 

 

HautPrécédente



02/05/2015

A découvrir aussi


Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 165 autres membres