I was poking around in my CSS code and made some changes that are seemingly irreversible, I am fearing the worst but am a total noob when it comes to CSS and really had no business tinkering, to begin with. This is what it currently looks like on my site. [image] The only blur I have added to this image is over the backups filenames. The rest is how the webpage displays. [image] Same with this, you can see that the edit CSS button where I was going before to edit the themes CSS is no longer there. Essentially am stuck and am now asking kindly if someone could help me find a solution. Luckily, I’m not totally braindead and actually backed up an old version of the CSS before editing it. This is what it showed before my death dealing blow. //use Roboto font 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); } //raise and round buttons .btn { border-radius: 2px; @include boxShadow; } //remove shadow from a few buttons .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; } From the code listed above, I removed html { background: url(linktoimage) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } and I added .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; } Foolishly assuming I had my ducks in a row, I clicked save. Please help.

Add ?safe_mode=no_custom%2Cno_plugins%2Conly_official to the end of the URL while on your site homepage and press enter.

You can use safe mode to temporarily disable the theme, and then make the changes you need: [image] Using Safe Mode to troubleshoot issues with themes and plugins Site Management bookmark This guide explains how to use Discourse’s Safe Mode to troubleshoot issues with themes and plugins. person_raising_hand Required user level: All users Discourse offers a “JavaScript Safe Mode” that allows any user to isolate the root cause of JavaScript issues caused by plugins, themes, or theme components. This feature is particularly useful for troubleshooting problems on your Discourse site. Accessing Safe Mode To access Safe Mode, follow these steps: Open a new browse…

Alternatively, you can use your browser’s dev tools to find the button in the HTML code and disable temporarily the CSS rules that make the button invisible. But david’s solution seems easier and more reliable.

Hello David, It looks like globally I can’t check any of the boxes. Maybe the easiest way is to manually push a rollback to the 1 day old backup? [image]

My friend, you are a saver of lives. You and everyone else in this thread, thank you. Very much.

Hmm, I think we should probably remove theme CSS from the /safe-mode page, so that this can’t happen… what do you think @Falco?

It still worked with the suggested workaround, but I did have a slight heart attack when I saw that even in safe mode I couldn’t check any boxes. Never again will I touch the CSS, but if I do, I’ll clone it and test first on a separate environment. I would be proud to be the idiot that drove you guys to the dev board to make your safe mode even safer from dumb mistakes like mine. By the way, this is easily the best forum software I have ever used. Thanks for all your work and support!

[image] cipherd: Never again will I touch the CSS Oh no - please don’t give up! We try to make it as safe as possible for people to experiment with themes. Remember you can create a fresh theme component and use the “preview” button to try it out without making it the site default. Alternatively you can use Theme Creator to experiment with themes on a completely sandboxed site. [image] cipherd: safe mode even safer I like the idea of a safer safe mode - here’s a PR: https://github.com/discourse/discourse/pull/9052

So I’m not entirely familiarized with github, am I able to push this update to my site via git? Remember you can create a fresh theme component and use the “preview” button to try it out without making it the site default. Alternatively you can use Theme Creator to experiment with themes on a completely sandboxed site. I don’t know if I’m glazing over a FAQ article that explained this better, but the theme containers you mentioned seem in function more like plugins for themes, than actual themes themselves… Am I wrong in making that assumption? I saw in a few of the public plugins install instructions that you are to make a new theme container and install some components via your new container rather than just pasting the git url into the theme component installer. I think I’m following things correctly, but if you could let me know otherwise that would be helpful.

[image] cipherd: am I able to push this update to my site via git? Not easily. We’ll merge it into Discourse within the next few weeks, and then you’ll be able to update your site. In the meantime, we have the solution @Falco shared [image] cipherd: theme containers you mentioned seem in function more like plugins for themes, than actual themes themselves… Sorry, I probably confused things by mentioning components. You can do the same thing with regular themes: create a fresh one and use the preview link. If you haven’t already read it, this is a good place to get started: [image] Beginner's guide to using Discourse Themes Site Management This is a crash course in Discourse theme basics. The target audience is everyone who is not familiar with Discourse themes. If you’ve already used Discourse theme / theme components, this guide is probably not something you need to read. What are themes and theme components? A theme or theme component is a set of files packaged together designed to either modify Discourse visually or to add new features. Let’s start with themes. Themes In general, themes are not supposed to be compatible …

When I have to tweak CSS, wether it’s on Discourse or any other site, I often (or always, actually) try new CSS rules using a live CSS editor browser extension, this one: https://github.com/webextensions/live-css-editor (note that it supports the SASS syntax) For Discourse it allows me to try stuff in real-time on the current windows without having to add my CSS in the customization panel, then clicking “Save”, and then looking at another Discourse Windows to see how it goes. If you do a mistake in this editor, for example: [image] (how clumsy I am!) It will indeed hide all the page elements including the CSS editor. Oopsie! If this happens you just have to click the extension icon: [image] And it will show the editor again with the rules disabled (this is togglable): [image] If you feel uncomfortable editing your CSS directly in Discourse, I suggest this alternative to try things before actually writing them in Discourse.

Made some changes I cannot revert

Product Support

david (David Taylor) February 26, 2020, 11:12am 2

You can use safe mode to temporarily disable the theme, and then make the changes you need:

Topic		Replies	Views
Need help reverting forums. I made a mistake Product Support	5	995	December 4, 2020
Code and text in customize section not saving due to Cloudflare Product Support	13	1055	May 15, 2018
Edit HTML/CSS button missing on one theme after latest update Product Support	1	759	November 30, 2020
Missing "edit html&css" and "uploads" button for components Feature	7	1369	December 4, 2020
Custom CSS/HTML editor panel access button disappeared Product Support	2	841	May 21, 2018

Made some changes I cannot revert

Related topics