Je personnalise mon Thème Kiwi

Publié le par Thaddée

Le Thème gratuit Kiwi depuis longtemps proposé par Overblog offre de très nombreuses options de personnalisation : bannières et fonds de blog prêts à l'emploi, même des fonds de page, plusieurs Polices et tailles de Police déclinées dans plusieurs couleurs. C'est un des Thèmes les plus complets de la plate-forme ; il séduit beaucoup de blogueuses et de blogueurs par la simplicité de ses fonctionnalités.
Cependant, certains d'entre vous aimeraient peut-être aller plus loin. Il est très facile d'installer une bannière de son choix mais qu'en est-il du fond de blog ? - Effectivement le Thème Kiwi n'offre pas la possibilité de télécharger un background personnel. Il faut passer par le css.
Rien que le terme css fait peur à de nombreuses personnes, convaincues qu'elles vont casser leur blog si jamais elles tentent d'entrer dans le code. C'est une idée fausse, une crainte non fondée. En effet, il ne s'agit que d'ajouter quelques lignes de code à l'endroit indiqué pour vraiment faire un blog à son idée.
Nous allons voir dans les paragraphes qui suivent comment installer un fond de blog, comment le centrer, et comment rendre son fond de page transparent pour laisser voir à travers le fond de blog. Je vous donne l'impression de parler chinois ? - Alors traduction.

Captures d'écran effectuées sur l'administration de mon blog Papier de Verre - Clic pour voir au format réelCaptures d'écran effectuées sur l'administration de mon blog Papier de Verre - Clic pour voir au format réelCaptures d'écran effectuées sur l'administration de mon blog Papier de Verre - Clic pour voir au format réel

Captures d'écran effectuées sur l'administration de mon blog Papier de Verre - Clic pour voir au format réel

Dans un premier temps, nous allons nous positionner au bon endroit de l'administration ▲ pour effectuer les modifications qui nous intéressent. Nous allons dans Gérer → Thème → Sélectionner le Thème gratuit Kiwi → Personnaliser.
Dans la liste, tout à gauche, vous descendez jusqu'à Avancé, puis vous cliquez sur Editer le HTML, enfin vous confirmez votre choix en cliquant sur : Poursuivre l'édition. Le code css/html est sous vos yeux. Impressionnant, non ? - Mais pas d'affolement.
Descendez tranquillement dans le code jusqu'à la ligne 1424. Attention toutefois : les nouvelles mises à jour d'Overblog peuvent décaler le code de plusieurs lignes. Il faut donc avant tout chercher :

</style>
</head>
<body>

Une fois que vous avez trouvé vos repères, rien de plus simple : il suffit d'ajouter vos propres lignes de code, lesquelles annuleront les données initiales d'Overblog.
Vous pouvez y aller tranquille : modifier le code ne modifie pas votre blog tant que vous n'avez pas cliqué sur Appliquer. N'oubliez pas de prévisualiser vos modifications pour vérifier qu'elles sont bien conformes à vos attentes. Si ce n'est pas le cas, quittez le code, et revenez plus tard recommencer l'opération.

Entrez l'adresse url de votre fond de blog

Juste au-dessus de  </style>, copiez votre ligne de code comportant l'adresse url de votre fond de blog ; url que vous pouvez directement récupérer sur les sites dédiés au website design tels que Vintage Made for You, ou encore Digital BakeryDotty Dot Dot, Elegia's, The Cutest Blog on the Block ... ils sont innombrables. Voici la ligne de code qui correspond à l'installation du fond de blog de votre choix :

body {
background-image: url("http://2.bp.blogspot.com/-pT38JoIxSgo/TZD3-A34NZI/AAAAAAAADKc/Iiw2RWmGMpg/s1600/3+kolumner+X.jpg");
}

Inscrivez l'adresse url de VOTRE IMAGE DE FOND entre les parenthèses.

Centrez votre fond de blog

Le fond de blog est bien présent, mais il n'est pas centré - Clic pour voir au format réel

Le fond de blog est bien présent, mais il n'est pas centré - Clic pour voir au format réel

C'est un premier pas car, à la prévisualisation, vous constatez que votre fond de blog n'est pas centré, et qu'il se répète peut-être verticalement et/ou horizontalement. Pour le centrer, il ne suffit que d'ajouter cette ligne de code juste au-dessous de la première, soit directement au-dessus de  </style>. Voici la ligne de code pour centrer votre fond de blog :

body {background-position:center;background-repeat:no-repeat;background-attachment:fixed; }

Votre fond de blog est maintenant bien centré - Clic pour voir au format réel

Votre fond de blog est maintenant bien centré - Clic pour voir au format réel

Supprimez votre fond de page

Vous voilà maintenant avec un fond de blog bien centré. Les manipulations touchent à leur fin. Vous pouvez en rester là, par exemple si vous avez peur de poursuivre, ou si votre fond de blog n'est pas lisible. Vous allez me dire : qu'est-ce que ça veut dire, un fond de blog qui n'est pas lisible ? - Eh bien tout est là, car dans l'opération qui nous intéresse à présent, il s'agit de rendre le fond de page (ou d'article) transparent, de sorte que c'est le fond de blog qu'on verra sous vos textes. Voilà pourquoi votre fond de blog doit être uni, clair, en un mot : lisible !
Pour ce faire, rien de plus simple : on ajoute un tout petit bout de code après les lignes de code que vous venez d'écrire, soit juste au-dessus de  </style>. Voici le code qui rendra votre fond de page (ou d'article) transparent :

.global, .ads-728x90 { background: none;}

Et voilà votre blog avec fond transparent - Clic pour voir au format réel

Et voilà votre blog avec fond transparent - Clic pour voir au format réel

Si vous êtes sûr(e) de vous, cliquez sur Appliquer. Et voilà le résultat. Bluffant, non ? A vous maintenant de choisir la bannière, la Police qui vous convient, les couleurs qui vous plaisent, pour avoir un blog 100% personnalisé par vos soins. Ca fait plaisir non ?
Je remercie Mehdi et Kinou du forum Overblog dont les explications patientes et détaillées m'ont permis de réussir à modifier avec succès le code de mon blog.
Bon week-end à toutes et tous et si vous avez besoin de plus amples renseignements ... vous savez où me trouver !

Publié dans Les blogs et moi

Commenter cet article

manou 18/09/2017 14:44

Merci beaucoup pour tes conseils qui seront précieux, je n'en doute pas le moment venu. Voilà,pourquoi j'hésite à changer de thème ! J'avais déjà tellement galéré pour personnaliser le mien :) Non en fait c'est surtout mais je te l'ai déjà dit parce que je trouve les thèmes proposés trop froids, mais bien sûr plus modernes que le mien :) Alors je ne me jette pas à l'eau à cause de ça...Par contre tu me diras pourquoi ce week-end, alors que je n'avais que mon tel portable pour venir sur vos blogs car je n'étais pas chez moi, et que j'avais pour une fois du réseau, je n'ai eu ton blog qu'en version web illisible donc même en grossissant alors que les autres blogs, quel que soit l'hébergeur se mettent sans que j'ai fait quoi que ce soit, en version lisible donc mise en page adaptée à l'écran du portable. Là j'avoue que je n'y comprends rien :) Bisous

Gérard 17/09/2017 19:06

j'ai fui OB depuis de nombreux mois sans regret, ceci dit j'aime beaucoup les kiwis

virjaja 17/09/2017 13:27

Holala, je n'ai rien compris....la blonde! en tout cas, c'est joli ton blog comme ça, bravo! gros bisous. cathy

Mimi 17/09/2017 09:28

C'est vrai que pour moi c'est du chinois tout ça, mais avec un bon professeur et une bonne traductrice comme toi, je devrais m'en sortir le jour où je changerai la vision de mon blog. Merci Thaddée et bon dimanche.

CathyRose 16/09/2017 21:44

Bon moi je suis chez canalblog ... donc pas concernée ! ;)
Belle soirée, bisous !
Cathy