Personnaliser le widget HelloCoton

Hellocoton est une communauté qui a pour ambition de réunir et de mettre en avant les talents et la richesse des blogs féminins. Si votre blog correspond aux critères, n'hésitez pas à vous inscrire, l'ambiance y est excellente.

Il se peut que le design original du widget HelloCoton ne corresponde pas au design de votre blog.

Rappel : pour obtenir le code à installer sur votre blog, dans votre administration HelloCoton, vous cliquez sur Moi en haut à droite > Outils pour mon blog > Mini-Profil

Voici comment le personnaliser :

Lorsque vous collez le code donné par HelloCoton, vous rajoutez à la suite, toujours en HTML :

<style type="text/css">
Les lignes CSS
</style>

A la place de Les lignes CSS, vous collez celle(s) dont vous avez besoin. Sur ce modèle :

<style type="text/css">
.hellocoton-widget {background:#CFD2E2!important;border:1px solid #AAAAAA!important;}
.hellocoton-widget .header {background-color:#DDDDEE!important;}
</style>

A noter : la mention !important doit toujours apparaître.

Voici les plus utilisées :

POUR MODIFIER LE FOND BLANC ET L'ENCADREMENT

.hellocoton-widget {background:#CFD2E2!important;border:1px solid #AAAAAA!important;}

POUR MODIFIER LE FOND BLEU CLAIR D'ENTETE

.hellocoton-widget .header {background-color:#DDDDEE!important;}

POUR MODIFIER LA COULEUR DES LIENS (pseudo - j'aime les articles - Suivie par x amies - pseudos des amies)

.hellocoton-widget a {color:red!important;}

POUR MODIFIER LA COULEUR DE Voir tout

.hellocoton-widget h1 span.tabs a {color:yellow!important}

POUR EFFACER Retrouvez X sur HelloCoton SOUS LE WIDGET 

Lorsque vous collez le code donné par HelloCoton en HTML, il suffit d'effacer ce qui est en rouge

<script src="http://widget.hellocoton.fr/blog/annak/300px" type="text/javascript"></script><div style="font-size:8px;color:#888;text-decoration:none;clear:both;padding:5px;text-align:left">Retrouvez <a href="http://www.hellocoton.fr/mapage/annak" style="color:#444;text-decoration:none;">annak</a> sur<a href="http://www.hellocoton.fr/" style="color:#444;text-decoration:none;">Hellocoton</a></div>

POUR MODIFIER LA LARGEUR DU WIDGET

Tourjours dans le code donné par HelloCoton, vous modifiez ce qui est en rouge :

<script src="http://widget.hellocoton.fr/blog/annak/300px" type="text/javascript"></script><div style="font-size:8px;color:#888;text-decoration:none;clear:both;padding:5px;text-align:left">Retrouvez <a href="http://www.hellocoton.fr/mapage/annak" style="color:#444;text-decoration:none;">annak</a> sur<a href="http://www.hellocoton.fr/" style="color:#444;text-decoration:none;">Hellocoton</a></div>

Et voici mon Widget personnalisé :

Si besoin est : les codes couleur, les encadrements et les background