J'ai apporté des modifications que je ne peux pas annuler

J’ai fouillé dans mon code CSS et apporté des modifications qui semblent irréversibles. Je crains le pire, mais je suis un total débutant en CSS et je n’aurais jamais dû toucher à cela dès le départ. Voici à quoi ressemble actuellement mon site :

Le seul flou ajouté à cette image concerne les noms des fichiers de sauvegarde. Le reste correspond à l’affichage réel de la page web.

C’est pareil ici : vous pouvez voir que le bouton « Modifier le CSS », que j’utilisais précédemment pour modifier le CSS du thème, a disparu. En gros, je suis bloqué et je demande gentiment à quelqu’un de bien vouloir m’aider à trouver une solution.

Heureusement, je ne suis pas totalement dépourvu de cerveau et j’ai effectivement sauvegardé une ancienne version du CSS avant de le modifier. Voici à quoi il ressemblait avant mon coup fatal :

    // Utiliser la police Roboto
html {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
}

.background {
  
  position: absolute;
  width: 100%;
  height: 100%;
}


body input,
body button,
body select,
html { 
  background: url(linktoimage) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


body textarea {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
}

@mixin boxShadow {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 0 0 0 rgba(0, 0, 0, 0.12);
}

@mixin buttonShadow {
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
}

// Soulever et arrondir les boutons
.btn {
  border-radius: 2px;
  @include boxShadow;
}

// Supprimer l'ombre de certains boutons
.d-editor-button-bar .btn,
.bulk-select-all,
.bulk-clear-all,
.period-chooser-header,
.topic-map .btn.no-text,
.badge-section .btn,
#revision .btn,
#new-account-link,
#login-link {
  border-radius: 0;
  box-shadow: none;
}


Dans le code ci-dessus, j'ai supprimé

html { 
  background: url(linktoimage) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


et ajouté

.page-bg {
  background: url('linktoimage');
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

Pensant naïvement que j’avais tout en ordre, j’ai cliqué sur Enregistrer. Merci de m’aider.

Vous pouvez utiliser le mode sans échec pour désactiver temporairement le thème, puis apporter les modifications nécessaires :

Sinon, vous pouvez utiliser les outils de développement de votre navigateur pour trouver le bouton dans le code HTML et désactiver temporairement les règles CSS qui rendent le bouton invisible. Cependant, la solution de David semble plus simple et plus fiable.

Bonjour David, Il semble que je ne puisse cocher aucune case au niveau mondial. Peut-être que la solution la plus simple serait de procéder manuellement à un retour en arrière vers la sauvegarde d’il y a 1 jour ?

Ajoutez ?safe_mode=no_custom%2Cno_plugins%2Conly_official à la fin de l’URL lorsque vous êtes sur la page d’accueil de votre site, puis appuyez sur Entrée.

Mon ami, tu es un sauveur de vies. Toi et tous les autres dans ce fil, merci. Vraiment.

Hmm, je pense qu’on devrait probablement supprimer le CSS du thème de la page /safe-mode, pour que cela ne puisse plus se produire… Qu’en penses-tu @Falco ?

Ça a quand même fonctionné avec la solution de contournement suggérée, mais j’ai eu un léger malaise en voyant que même en mode sans échec, je ne pouvais cocher aucune case. Je ne toucherai plus jamais au CSS, mais si je le fais, je le clonerai et le testerai d’abord dans un environnement séparé.

Je serais fier d’être l’idiot qui vous a poussé à améliorer votre mode sans échec pour le rendre encore plus résistant aux erreurs stupides comme la mienne.

Au fait, c’est de loin le meilleur logiciel de forum que j’ai jamais utilisé. Merci pour tout votre travail et votre soutien !

Oh non, s’il vous plaît, ne lâchez pas ! Nous faisons de notre mieux pour rendre l’expérimentation avec les thèmes aussi sûre que possible.

N’oubliez pas que vous pouvez créer un nouveau composant de thème et utiliser le bouton « Aperçu » pour le tester sans le définir comme thème par défaut du site. Vous pouvez également utiliser Theme Creator pour expérimenter avec des thèmes sur un site entièrement isolé (bac à sable).

J’adore l’idée d’un mode sans échec encore plus sécurisé - voici une PR :

Donc je ne suis pas tout à fait familiarisé avec GitHub. Puis-je pousser cette mise à jour vers mon site via Git ?

N'oubliez pas que vous pouvez créer un nouveau composant de thème et utiliser le bouton « Aperçu » pour l'essayer sans en faire le thème par défaut du site. Sinon, vous pouvez utiliser le Créateur de thèmes pour expérimenter avec des thèmes sur un site entièrement isolé.

Je ne sais pas si je passe à côté d’un article de FAQ qui expliquerait cela plus clairement, mais les conteneurs de thèmes dont vous parlez semblent, par leur fonction, davantage ressembler à des plugins pour thèmes qu’à de véritables thèmes… Ai-je tort de faire cette hypothèse ? J’ai vu, dans les instructions d’installation de plusieurs plugins publics, qu’il faut créer un nouveau conteneur de thème et y installer certains composants via ce nouveau conteneur, plutôt que de simplement coller l’URL Git dans l’installateur de composants de thème. Je pense suivre la logique correctement, mais si vous pouviez me confirmer le contraire, ce serait très utile.

Pas facilement. Nous l’intégrerons à Discourse dans les prochaines semaines, et vous pourrez alors mettre à jour votre site. En attendant, nous avons la solution que @Falco a partagée.

Désolé, j’ai probablement créé une confusion en parlant de composants. Vous pouvez faire la même chose avec des thèmes classiques : créez-en un nouveau et utilisez le lien d’aperçu.

Si vous ne l’avez pas déjà lu, c’est un bon point de départ :

Lorsque je dois ajuster du CSS, que ce soit sur Discourse ou sur tout autre site, j’essaie souvent (en fait, toujours) de nouvelles règles CSS à l’aide d’une extension de navigateur d’éditeur CSS en direct, celle-ci :

(remarquez qu’elle prend en charge la syntaxe SASS)

Pour Discourse, cela me permet d’essayer des choses en temps réel sur la fenêtre actuelle sans avoir à ajouter mon CSS dans le panneau de personnalisation, puis à cliquer sur « Enregistrer », et enfin à consulter une autre fenêtre Discourse pour voir le résultat.

Si vous faites une erreur dans cet éditeur, par exemple :


(comme je suis maladroit !)

Cela aura pour effet de masquer tous les éléments de la page, y compris l’éditeur CSS. Oups !

Si cela arrive, il vous suffit de cliquer sur l’icône de l’extension :

Et l’éditeur réapparaîtra avec les règles désactivées (c’est basculable) :

Si vous n’êtes pas à l’aise pour modifier directement votre CSS dans Discourse, je vous suggère cette alternative pour tester des choses avant de les écrire réellement dans Discourse.

Wow, c’est super utile. Merci beaucoup !