27 août 2010

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

9 commentaires:

  1. hello, article sympa, je n'avait pas pensé que l'on pouvais personnaliser ce code, merci de m'avoir remis les idées au clair

    RépondreSupprimer
  2. ah mais c'est une super idee dis donc :) moi non plus je n'y avais meme pas songé :)))

    trp contente, surtout que je deteste le blanc (et le gris lol) j'aime la couleur, je fais ca a mon retour :)

    dis miss tu n'aurais pas la meme idee pour le tres hideux widget de facebook (networked blog) tout blanc sur mes belles pages en couleur par hasard? :))))

    lol, lol, je plaisante, fini d'abord avec tes 2 petites colonnes lol :)
    Bisoussss :):x:x:x

    RépondreSupprimer
  3. je n'ai pas encore essayé ces modifications, j'ai retiré ce widget car il alourdissait considérablement la page.....penses tu que ce soit possible d'y mettre un fond image ?

    RépondreSupprimer
  4. Thierry > je pensais que tu étais une fille au vu de ton pseudo sur Hello Coton :)

    Loulou > Le blanc me fatigue les yeux sur écran, je n'en rafole pas non plus. Pour Facebook, pas encore regardé. Il suffit de regarder l'HTML et souvent le CSS y est présent. Il suffit d'imposer un nouveau CSS à la place.

    Nessa :) oui, au lieu de background:#couleur, tu mets background:url(adresse) ; parfois, il faudra rajouter background:transparent.

    RépondreSupprimer
  5. coucou Anna, merci d'avoir regardé, j'ai bien reçu ton message sur mon blog comme quoi la couleur est sur le script de facebook et donc je ne peux agir dessus :( tampissss ça viendra peu-être un jour qui sait ...
    Bisous :)

    RépondreSupprimer
  6. Coucou anna
    encore une fois impossible d'insérer du java script en confiance sur over blog donc impossibilité de mettre ce mignon widget ( je trouve ca stupide......)
    Ps je préfére ce fond là sur ton blog.....avis perso......

    RépondreSupprimer
  7. Bonjour Lady C :) c'est un des inconvénients d'OB et comme il y a bcp de widgets contenant du javascript, ça limite beaucoup les possibilités d'enrichir son blog.
    Le fond est plus doux, plus fille :)

    RépondreSupprimer
  8. je fais un petit "hs mais pas trop" (suis sur qu'Anna m'en voudra pas :P )

    Hellocoton, c'est réservé aux Dames, ou il y a de la place pour un blog a matous?

    et je préfère aussi le nouveau fond de ce blog^^

    RépondreSupprimer
  9. Bonjour Booba :) il y a aussi des messieurs sur Hello Coton. Mais je ne sais pas trop dans quelle catégorie te ranger : famille ? écologie ?

    RépondreSupprimer

1/ Choisissez Nom/URL comme profil pour poster, si vous hésitez
2/ Si vous désirez une aide personnalisée, pensez à laisser l'adresse de votre blog, ce qui me permettra de tester.
3/ Vous pouvez vous abonner par email pour suivre les réponses de cet article (lien sous la zone de rédaction du commentaire)