Fond blanc comme neige

Source : Karolina, KaboomPics

Nous poursuivons la route dans la personnalisation de notre blog. Au menu en ce jour, rendre le fond du blog blanc comme neige. Ainsi, la partie extérieure du blog aura exactement la même couleur que la partie centrale du blog. Fini cet effet de rectangle dans un rectangle ! Il existe bien entendu plusieurs méthodes pour y parvenir, dont une simplissime consistant à choisir ladite couleur dans l'outil de création des modèles. Néanmoins, le résultat peut être décevant en empruntant cette voie. En effet, le fond ne sera pas parfaitement blanc ; il subsitera des ombres et des dégradés de couleurs. La méthode envisagée ici permet de rendre le fond complètement blanc. Suivez le guide !

Pour rappel, voici l'apparence du blog avant toute modification (image ci-dessous). Vous constatez la présence d'ombres autours de la partie centrale du blog, actuellement en blanc. Le fond, lui est pour l'instant orange et nous le rendrons lui aussi blanc ; de telle sorte qu'on disposera d'un grand espace blanc et non plus deux parties, une blanche et une orange, distinctes. Enfin, remarquez cette ligne horizontale qui traverse le blog d'un bout à l'autre dans la partie supérieure. Nous l'enlèverons elle aussi.

Les manipulations du jour impliquent de modifier le code de notre modèle. Le premier réflexe à avoir, avant d'antamer toute modification est de réaliser une sauvegarde du modèle actuel. Ainsi, si on fait une erreur de manipulation, il est toujours possible de revenir en arrière et rétablir le modèle avant modifications. On évite ainsi des larmes bien inutiles.

Rendez-vous dans le tableau de bord et sélectionnez la catégorie Modèle. Dans le coin supérieur droit, cliquez sur Sauvegarder/Restaurer.

A ce stade, une lightbox apparait. Pour sauvegarder le modèle, cliquez sur Télécharger le modèle complet. En procédant ainsi, vous réalisez une sauvegarde de votre modèle sur votre disque dur.

Si vous désirez revenir en arrière à la suite de modifications et les écraser, il suffit de s'intéresser à la partie inférieure de cette lightbox et de choisir le modèle préalablement téléchargé via le bouton Browse.

Maintenant que cette étape de sauvegarde est derrière nous, nous pouvons commencer nos changements à proprement dits. Pour cela, nous allons dans Modèle puis Modifier le code HTML.

Une nouvelle page s'ouvre. Dans la partie inférieure, dans le cadre, se trouve le code HTML du modèle. C'est là que s'effectueront toutes les modifications.

Dans les première lignes, vous trouverez ce code :

<b:skin>...</b:skin>

Cliquez alors sur le petit triangle noir situé avant le début de cette ligne. En procédant ainsi, vous déloyez la portion de code comprise entre les balises <b:skin> et </b:skin>. Si vous ne voyez pas de petit triangle noir, c'est que le code est déjà déployé. Ignorez cette étape et passez directement à l'étape suivante.

Cliquez n'importe où dans la boite de code. Ensuite faites ctrl + f pour faire apparaitre une boite de recherche. Dans celle-ci, saisissez l'expression conter-outer. Appuyez sur enter.

Le résultat de la recherche devrait ressembler à quelque chose comme l'image ci-dessous. Supprimer les quatre lignes de codes suivantes :

-moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;
box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);

En procédant ainsi, nous avons supprimé les ombres autour de la boite centrale du blog. Le résultat à ce stade est visible sur l'image ci-dessous.

Maintenant, nous allons supprimer la ligne horizontale traversant la partie supérieure du blog et faire en sorte qu'il n'y ait qu'une seule couleur et non plus deux couleurs accompagnées d'un dégradé. Pour cela faites ctrl + f et rechercher l'expressiosn cap-top. Au premier résultat, supprimez les lignes sélectionnées sur l'image ci-dessous.

Enregistrez les modifications apportées et vous pouvez admirer le fond de couleur parfaitement unie.

La dernière étape consiste à rendre le fond tout blanc. Pour cela, rendez-vous dans Modèle, puis Personnaliser. Choisissez ensuite l'option Avancé, puis Arrière-plans. Il s'agit ensuite de choisir le blanc pour l'arrière-plan extérieur ainsi que pour l'arrière-plan intérieur. Normalement, le blanc est le premier carré, celui tout à gauche. Sinon, le code hexadécimal du blanc est #ffffff.

Voici donc à quoi ressemble le bloc après avoir suivi toutes ces étapes.

Et voilà, c'est fini pour aujourd'hui. Nous sommes parvenus à obtenir un arrière-plan blanc immaculé.

A bientôt pour de nouvelles personnalisations !