Made some changes I cannot revert

[cipherd (dan)]

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.

The only blur I have added to this image is over the backups filenames. The rest is how the webpage displays.

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.

[david (David Taylor)]

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

Use Safe Mode to troubleshoot issues with themes and plugins

Discourse has a “JavaScript Safe Mode”, where any user can use to isolate the root cause of a JavaScript issue caused by plugins, themes or theme components. To access safe mode go to: http://your-site-name/safe-mode for example this is the safe mode for our demo site: https://try.discourse.org/safe-mode [safe mode options] [safe mode is enabled] To exit safe mode simply close your browser tab When entering safe mode you can select between: Disable all themes and theme-components …

[Canapin (Coin-coin le Canapin)]

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.

[cipherd (dan)]

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?

[Falco]

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

[cipherd (dan)]

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

[david (David Taylor)]

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?

[cipherd (dan)]

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!

[david (David Taylor)]

@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.

@cipherd

safe mode even safer

I like the idea of a safer safe mode - here’s a PR:

FEATURE: Always disable customizations on the `/safe-mode` route

[cipherd (dan)]

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.

[david (David Taylor)]

@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

@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:

Beginner's guide to using Discourse Themes

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 …

[Canapin (Coin-coin le Canapin)]

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:

(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:

And it will show the editor again with the rules disabled (this is togglable):

If you feel uncomfortable editing your CSS directly in Discourse, I suggest this alternative to try things before actually writing them in Discourse.

[cipherd (dan)]

Wow, that is super useful. Thanks so much!