samedi 8 août 2015

Trouver facilement les codes couleurs pour harmoniser son blog


trouver les codes couleurs facilement html css
En ce moment dans la blogosphère, on peut constater une évolution des blogs où le sujet est le blogging : des blogs qui t'aident à changer le design de ton blog ou à ajouter des petites touches personnelles à ton blog en jouant avec le CSS. Bien souvent, l'une des choses que l'on veut modifier en premier lieu sont les couleurs. J'ai appris lors de mes cours sur la création de site web, que pour qu'un site soit harmonieux visuellement, il faut que les couleurs soient proche des couleurs du logo ou de la bannière. Et souvent sur ces blogs de blogging, que j'aime beaucoup puisque j'aime beaucoup jouer avec le CSS / code HTML, les codes couleurs ne sont pas donnés. Forcément, il y en a énormément !!! De plus, dans l'interface de bloguer pour l'apparence de nos blogs (et surement aussi sur les autres plateformes), ce n'est pas toujours simple de tomber pile sur la couleur rouge qu'il y a sur notre bannière. De coup, connaissant une façon très simple d'avoir le code couleur que l'on souhaite (puisque comme vous le voyez, les couleurs de mon blog reprennent celles de ma bannière), je me suis dit que j'allais la partager avec vous car en tant que blogueuse, l'apparence d'un blog est à mon sens assez importante (bien que le contenu sera toujours de première importance, un blog joli à voir donnera toujours plus envie de lire. C'est pas forcément juste, mais c'est comme ça, la vie est injuste) ! En plus, cela pourra aussi vous servir pour les signatures sur vos photos de blog si vous voulez également utiliser un même code couleur que votre site ou que votre photo.

Tout d'abord, il vous faudra un logiciel de montage photo tel que Photofiltre (qui est gratuit) et votre bannière bien évidemment (ou la photo où vous souhaiter utiliser un même code couleur). Ce qui va suivre sera donc basé avec l'interface de blogger et de photofiltre puisque c'est le logiciel que je maîtrise le mieux. Cependant, c'est la même chose avec d'autres logiciels de part l'outil qui sera utilisé  (même sur Paint je crois) ! J'ai donc profité de la personnalisation de la barre des cookies pour vous montrer comment faire, puisque j'ai utilisé cette méthode pour le choix des couleurs de celle-ci ! Et en dernier lieux, je vous expliquerai où mettre le code couleur souhaité lorsque vous êtes dans la modification de l'apparence de votre blog via blogger pour les changements simples qui ne demande pas de modification du CSS, en utilisant la personnalisation du modèle que propose le tableau de bord de la plateforme.

Voici à quoi ressemble la barre des cookies par défaut. Pour plus d'harmonisation avec le blog et parce-que je la trouve moche, je décide de la mettre de la même couleur que le nœud de ma bannière.
customiser son blog

Etape n° 1 : j'ouvre ma bannière sur un logiciel tel que PhotoFiltre, puisque c'est ce logiciel qui va me permettre de connaître le code de la couleur que je veux.

customiser son blog

Etape n° 2 : je sélectionne l'outil Pipette (visible en 1), je clique sur l'image là où il y a la couleur que je veux (ici c'est le nœud en 2) et je sélectionne le code qui s'affiche sous "web" (visible en 3) pour le copier, sans oublier le " # ".

customiser son blog

Etape n° 3 : je me rends sur le code HTLM ou CSS où je souhaite mettre le code couleur et je le colle au niveau du code correspondant. Ici, il s'agit du code correspondant au le fond de la barre des cookies. 

customiser son blog

Et voici le rendu (après d'autres modifications sur la taille et la police) ! Le fond de ma barre des cookies est bien à la couleur du nœud et coïncide donc avec le reste de mon blog l'ayant customisé aux couleurs de ma bannière.
customiser son blog

Pour mettre le modèle de votre blog avec la ou les couleurs de votre bannière en passant par l'interface de Blogger (plutôt que de passer par le HTML) il vous suffit d'aller dans " Modèle " > " Personnaliser " > " Avancé " > " Liens " (par exemple) et de coller le code couleur avec cette méthode, dans l'emplacement où un code couleur figure déjà, après l'avoir effacé pour le remplacer par le nouveau code précédemment copier.

Globalement, lorsque vous changer les couleurs de votre design, il vous suffira donc d'ouvrir sous un logiciel l'image principale de votre blog pour " pipetter " les couleurs et les remplacer par un simple copier coller dans le code HTML/CSS ou dans l'apparence du tableau de bord de Blogger ! Cela peut vous permettre de créer / modifier votre design simplement. De plus, les codes couleurs sont universels et sont les mêmes peu importe la plateforme / l'hébergeur de votre blog. Si vous avez des questions n'hésitez pas et si vous appliquez ma méthode pour customiser votre blog, laisser moi un "avant / après" !

Sarah**

Rendez-vous sur Hellocoton !

8 commentaires:

  1. Merci Sarah!! Va falloir que j'harmonise un peu chez moi grâce à ton aide!! :D

    RépondreSupprimer
  2. Merci pour cette petite astuce très utile ! J'avais photofiltre mais je n'avais même pas remarqué qu'il y avait le CSS en dessous de la couleur lol !

    RépondreSupprimer
    Réponses
    1. De rien :) C'est un prof d'informatique qui nous l'a montré en cours, car comme toi, je n'avais pas capté que ça correspondait au code css ^^

      Supprimer
  3. Merci pour cet article ! Je m'apprête à passer sur wordpress.org, tes conseils me seront très utiles dans la personnalisation de la nouvelle interface !

    RépondreSupprimer

Merci de ne pas faire de pub pour votre blog/site en commentaire, c'est-à-dire de ne pas mettre de liens vers celui-ci.
Notamment car il suffit de cliquer sur votre pseudo pour atterrir sur votre blog !
Si non, il suffit de changer le profil et de sélectionner "nom/url". Ainsi, un lien vers votre blog se mettra sur le pseudo utilisé.
Je me réserve le droit de ne pas valider le commentaire si ceci n'est pas respecté.

Merci de votre compréhension.

Sarah