Activating custom CSS/HTML

Product Support

AI-generated summary

A user, lyseoy, added custom CSS and HTML to their Discourse forum but couldn’t see the changes live, only in preview mode. Vaping_Community suggested checking if the edited theme was selected as the active default theme, which lyseoy confirmed.

Vaping_Community then asked lyseoy to list the changes made, and lyseoy provided the custom CSS code. Vaping_Community spotted a syntax error in the code, which was causing the issue. After correcting the error, lyseoy confirmed that the changes were now live.

Vaping_Community explained that any errors in the CSS code would render it void and noted that they had never used the preview feature before. They also mentioned that there used to be an error notification on the page.

1

I’ve added some custom CSS and HTML. Checked the preview, and everything looks great.

Now I want to commit these changes, but how? I don’t see any commands for this, and I tried rebuilding the discourse app, but nothing happens.

My searches come up empty. This is probably so easy, nobody ever asked how to do it, but this noob could use a hint…

2

Seems irrelevant but I don’t really understand.

3

Where? Custom Theme, default theme?
Common css / desktop css / mobile css?
More details on what you have done will be helpful.

Usually you just select a theme /admin/customize/themes and do this:

Theme Css
Theme Css640×292 1010 KB

Once you hit that save button, changes show up pretty much instantly as long as the theme you have edited is active.

4

What you did. In the video. Except I can only see the changes when I hit the Preview button.

5

Have you got the theme selected as the active default theme? See the green tick?

screenshot-vapingcommunity.co.uk-2020.09.08-15_44_09
screenshot-vapingcommunity.co.uk-2020.09.08-15_44_091065×358 21.5 KB

screenshot-vapingcommunity.co.uk-2020.09.08-15_45_16
screenshot-vapingcommunity.co.uk-2020.09.08-15_45_16706×171 7.68 KB

6

Yes. I’ve edited the standard light theme, and it’s active and default.

7

Ok, can you list the changes you made please

Link to the website would also be helpful

8

CSS:

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400, 400i, 700");
    .docked #main-outlet {
    margin-top: 0;
}
.docked nav#bar {
    display: none;
}
nav#bar {
    font-family: 'Open Sans',  sans-serif;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
}
nav#bar ul {
    display: inline-flex;
    list-style-type: none;
    margin: 0 0 0 25px;
    align-items: center;
}
nav#bar ul li {
    margin-left: 20px;
}
@media (max-width: 650px) {
    nav#bar {
    flex-wrap: wrap;
    justify-content: center;
}
nav#bar #logo {
    display: flex;
    justify-content: center;
    flex-basis: 100%}
nav#bar #logo img {
    width: 120px;
}
nav#bar ul li {
    margin-left: 8px;
}
nav#bar ul li a {
    font-size: 14px;
}
nav#bar ul li a.www-btn {
    padding: 3px 8px 5px;
}
}
nav#bar li a {
    text-decoration: none;
    color: #333;
}
nav#bar li a:hover {
    border-bottom: 5px solid;
}
nav#bar li:nth-of-type(1) a:hover {
    border-color: #D13239;
}
nav#bar li:nth-of-type(2) a:hover {
    border-color: #f15c22;
}
nav#bar li:nth-of-type(3) a:hover {
    border-color: #F2E88F;
}
nav#bar li:nth-of-type(4) a:hover {
    border-color: #00953A;
}
nav#bar li:nth-of-type(5) a {
    font-weight: bold;
}
nav#bar li:nth-of-type(5) a:hover {
    border-color: #14A0F4;
}
nav#bar img {
    width: 150px;
    height: auto;
    max-height: 40px;
}
nav#bar .www-btn {
    border: none;
    border-radius: 100px;
    background: #13a0f5;
    color: #fff;
    padding: 5px 20px 7px;
}
nav#bar .www-btn.big {
    font-size: 1.5rem;
    padding: 7px 30px 10px 30px;
}
nav#bar .www-btn:hover {
    background: #0a5783;
}
nav#bar .www-btn:active {
    background: #08476b;
    box-shadow: none;
}
nav#bar a.www-btn {
    text-decoration: none;
    color: #fff !important;
}
.d-header {
    background: linear-gradient(-90deg,  #F2E88F,  #a3e6ff);
    background-size: 100% 100%;
    background-repeat: repeat-x;
    box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.15);
}
.d-header .icons .icon {
    color: #555;
}

I’ll post the content of the Header in a bit. The forum keeps rendering the html when I paste it…

9

This is wrong, it should be

nav#bar #logo {
    display: flex;
    justify-content: center;
    flex-basis: 100%;
}
10

That’s it! Well spotted, you’ve got a keen eye!

Funny that the preview didn’t mind that syntax error.

11

Glad you got it working :smile:

  • Any errors in your CSS will render that CSS void.
  • I’ve never used preview before so I can’t comment on that.
  • I’m sure there used to be an error notification on the page :thinking:

Oh and Happy Birthday @tshenry :tada: Have a good one