• Oops ! J'ai planté mon blog et je ne peux plus rien faire.

    Je crois que nous y sommes tous passés à un moment ou à un autre. A force de vouloir améliorer notre blog, on rajoute du code css, du code javascript encore et encore ! Seulement la dernière modif est celle de trop. On n'a pas fait attention et maintenant notre blog ressemble à un champ de bataille et pire encore, on ne peut plus accéder au panneau d'administration pour corriger le tir !

    Alors que peut-on faire ? Contacter l'équipe d'Eklablog pour qu'ils remedient au problème ? Oui bien sur c'est une solution. Seulement voilà, ils ont bien d'autres choses à faire qu'a corriger nos erreurs.

    Bon ok mais que peut-on faire d'autre ?

    Eh bien on va se prendre en main et réparer nous mêmes (en tous les cas on va essayer). Je vais vous montrer ici quelques cas concrets de récupération de votre blog à l'aide de Google Chrome.

    Exemple 1

    Supposons que l'on écrive le code CSS suivant:

    #menubar li
    {display:none;}

    Ce code supprime l'affichage de tous les li de la menubar. Cela aura pour incidence que lorsque l'on cliquera sur la barre de menu (par exemple sur Oops ! J'ai mis un code CSS défectueux et je ne peux plus rien faire.apparence), le menu ne se déroulera plus et l'on ne pourra plus aller modifier le code CSS. Donc là, on est bien coincé ! Comment corriger si l'on a plus accès au panel d'administration ?

    En réalité on a un moyen de s'en sortir en quelques clics de souris. Pour cela, on va utiliser Chrome le navigateur de Google. (On peut réaliser le même genre de manipulations avec Firefox et son module complémentaire Firebug. La version 10 de Firefox dispose maintenant d'outils pour l'analyse de votre page web et notamment pour connaître le CSS)

    On accède à notre blog depuis chrome. Les pages sont d'apparence normales mais on constate bien que l'on ne peut plus rien modifier puisque le menus de la menubar ne se déroulent plus.

    On va faire un clic-droit sur notre page et cliquer sur inspecter l'élément. On va ensuite tout simplement supprimer la partie qui charge le CSS.

    Oops ! J'ai planté mon blog et je ne peux plus rien faire.Celle-ci se trouve entre les balises <head> et </head>(voir la ligne surlignée en jaune dans l'image ci-contre).

    Un clic-droit sur cette ligne ( celle ou id="css_theme") puis sur "delete node" dans le menu contextuel. Ne vous inquiétez pas, pour l'instant vous travaillez localement sur votre navigateur. Vous allez perdre toute la partie CSS mais seulement en apparence. Votre page qui est stockée sur les serveurs d'Eklablog n'est pas modifiée.

     

     

     



    Oops ! J'ai planté mon blog et je ne peux plus rien faire.Vous obtenez donc votre blog sans mise en forme (ou presque). Voir image ci-contre.

    Fermez la partie inférieure puis cliquez sur Oops ! J'ai planté mon blog et je ne peux plus rien faire.Apparence / Modifier le thème.

    Et miracle ! Vous avez de nouveau accès à la partie Ajout du CSS. Il ne vous reste plus qu'à supprimer le code défectueux, enregistrer et recharger la page.

     

     

    Exemple 2

    Je reprend ici l'exemple qui m'a inspiré ce tuto. Pour la beauté du geste, je l'ai appliqué à l'un de mes blogs. 

    Dans le CSS, j'ai écrit le code suivant:

    div
    {width:200px;} 

    Oops ! J'ai planté mon blog et je ne peux plus rien faire.L'effet ne s'est pas fait attendre et le blog a pris l'apparence ci-contre:

    Comme vous pouvez le constater, menus et contenu ont été coupés à une largeur de 200 px;

     

     

    Pire encore, même mes fenêtres d'administration ont pris cette largeur !

    Oops ! J'ai planté mon blog et je ne peux plus rien faire.

    Mais alors comment faire pour accéder à la partie de modification du CSS ? Pas de panique, ne dit-on pas que Google is your friend ?

    Comme dans l'exemple 1, on va faire un clic droit sur l'entête de la fenêtre de personnalisation puis cliquer sur Inspecter l'élément pour obtenir une fenêtre de ce type:

    Oops ! J'ai planté mon blog et je ne peux plus rien faire.Sous l'onglet Style de la partie droite de la fenêtre (Zone surlignée en jaune), on retrouve notre propriété source de tous nos ennuis: Le fameux width:200px

    En passant votre souris dessus, une case à cocher apparaît à sa droite (voir l'image). 

    Il suffit alors tout simplement de décocher cette case pour avoir notre fenêtre de personnalisation à taille normale.Oops ! J'ai planté mon blog et je ne peux plus rien faire. A partir de là, il suffit de fermer la partie inférieure et de s'empresser d'aller enlever ce code problématique de notre CSS.

     

     

    Au lieu de cliquer sur la case à cocher, on aurait pu aussi cliquer sur la valeur 200 et par exemple la remplacer par 500 . Dans cette zone il est même possible d'ajouter des propriétés, ce qui permet d'en voir les effets avant de l'appliquer à notre blog.

    Et n'oubliez pas que tout ce que vous faites dans cette partie n'affecte pas vos pages mais juste l'affichage au sein de votre navigateur.