Bouge ton blog !

« Traduire son blog (2) | Page d'accueil | Bouge ton blogSpirit ! »

27/05/2005

Mettez de la vie dans vos formulaires

Envie de formulaires plus sympa pour votre blog ?

Voici ce que "Bouge ton blog" vous propose :

C'est en tout cas comme cela que s'affichera vos formulaires de commentaires sous Firefox ou Opera. Sous Internet Explorer, les bordures arrondies deviendront carrées mais le reste du formulaire tient la route. Qui sait ? Peut-être Microsoft décidera un jour d'accorder un peu plus ses navigateurs avec les capacités du CSS...

Repérez la ligne /* Comentaires */ dans votre feuille de styles (Présentation -> Configuration Avancée -> Feuille de styles). C'est à ce niveau que sont définis les styles des formulaires.
Puis remplacez les styles input { } et textarea {} par le code suivant :

input {
font-size: 100%;
font-family: Verdana, Arial, sans-serif;
color: #01717f;
background-color: #addfe8;
border: 2px solid #addfe8;
-moz-border-radius: 4px;
}

textarea {
clear: both;
width: 99%;
font-size: 100%;
font-family: Verdana, Arial, sans-serif;
color: #000;
background-color: #addfe8;
border: 2px solid #addfe8;
-moz-border-radius: 4px;
}


Notez que le code couleur affiché ici pour la couleur de fond et les bordures est #addfe8, essayez de remplacer ce code par le code couleur d'un de vos éléments (bannière, liens, colonnes etc...) : les différents codes couleurs de votre blog sont tous présents dans votre feuille de style (exemple : #99cc33 ou #4E8ABE). Un petit conseil : préférez une couleur clair pour plus de lisibilité...

Un autre exemple utilisé sur "Bouge ton blog !" :

Le code CSS :

input {
font-size: 100%;
font-family: Verdana, Arial, sans-serif;
background-color: #ffffff;
border: 1px solid #cc6600;
-moz-border-radius: 4px;
}

textarea {
clear: both;
width: 99%;
font-size: 100%;
font-family: Verdana, Arial, sans-serif;
background-color: #ffffff;
border: 1px solid #cc6600;
-moz-border-radius: 4px;
}


Même chose, je vous conseille de remplacer le code couleur #cc6600 par une couleur de votre choix s'accordant avec la charte de votre blog !

Trackbacks

Voici l'URL pour faire un trackback sur cette note : http://technoblog.blogspirit.com/trackback/144838

Commentaires

Un code qui arrondi les angles ..... Bravo !!!!!

Ecrit par : Lionel | 28/05/2005

Meci beaucoup pour cette p'tite astuce.

Puis-je soumettre une question ?

Sur mon blog, sur la colonne de droite en-dessous des archives, s'est incrusté un bloc de liens hautetfort que je ne retrouve pas dans d'autres blogs.

Les liens en bas de pages de commentaires ne me dérangent pas, mais en revanche, ceux-ci me troublent un peu.

Comment puis-je les enlever ???

Merci de m'aider si c'est possible. Et merci pour le reste !

Ecrit par : Laurette | 19/06/2005

Le problème s'est résolu tout seul... désolée de ce message inutile !!

Ecrit par : Laurette | 20/06/2005

Superbe!!!... j'y suis arrivée sur mes 2 blogs...

Et pourtant dans le genre pas douée pour ce style de bidouilles pire que moi y'a pas....

Merci c'est vraiment agréable de pouvoir personnaliser un peu son blog grâce à tes conseils.

Un premier essai réussi cela donne de l'élan, je vais écumer ton blog pour voir si je peux améliorer davantage...

Ecrit par : La Duchesse | 26/06/2005

Laurette -> Laisse l'url de ton blog la prochaine fois !

La Duchesse -> Génial, n'hésite pas à piocher dans les nombreuses astuces de Bouge ton blog !

Ecrit par : thomas | 26/06/2005

Coucou, moi par contre ça n'a pas du tout marché et je ne comprends pas pourquoi...

Ecrit par : SaraKa | 20/07/2005

Je viens de me rendre compte que la modif est visible sous IE mais pas du tout avec Firefox. C'est bizarre, non?

Ecrit par : SaraKa | 20/07/2005

Saraka -> fait un Ctrl+F5 sur ta page Firefox

Ecrit par : thomas | 20/07/2005

mais qu'est ce que c'est que cette magie du ctrl F5?

Ecrit par : SaraKa | 20/07/2005

Ca c'est vraiment cool merci pour ces infos !!!!!

Ecrit par : BnJ | 01/09/2005

Ctrl + F5 = rafrachir sa page internet, suivant ta configuration, le navigateur met en cache les pages que tu visites. Conséquence : tu n'obtiens pas toujours la dernière version en ligne de ta page internet.

Ecrit par : thomas | 06/09/2005

Y aurait-il moyen de changer la police pour les commentaires et juste pour les commentaires????

Ecrit par : démosthène | 17/03/2006

Y aurait-il moyen de changer la police pour les commentaires et juste pour les commentaires????

Ecrit par : démosthène | 17/03/2006

Ecrire un commentaire