NodeBB Theme/Skin Switcher

[phenomlab]

@Teemberland can you try the site under incognito mode? I’m interested to know if this is related to caching.

[Teemberland]

@phenomlab tried it, CSS class is still not showing.

[phenomlab]

@Teemberland can you remove all JS and leave the custom CSS with just the basic body class and let me know if that works?

[Teemberland]

@phenomlab that doesn’t work either.

[phenomlab]

@Teemberland ok, there’s definitely something wrong here. Are you sure there’s no errors in the console or you don’t have any script blockers running in your browser that could be interfering with execution?

[Teemberland]

@phenomlab correct. No console error or script blockers.
EDIT:
It shouldn’t matter what theme I use, correct? I’m currently using Slick theme.

EDIT #2: I added my CSS rule to a widget. I can now see it on the page. Perhaps this is my only work around at this point.

[phenomlab]

@Teemberland can you switch to Persona and see if the issue exists there as well ? I know that the Slick theme does have some issues.

[Teemberland]

@phenomlab BINGO! It does work in Persona. Unfornately, we have to use our custom Slick theme per my company’s request.

I guess for now I have to put the styles in a widget for it to work. Unless you can think of something else?

[phenomlab]

@Teemberland thought as much. I personally don’t use Slick for anything because of the issues it has. However, it’s abundantly clear that this theme doesn’t seem to recognize or inline any css from the ACP which is bizarre.

The good thing is that there’s nothing wrong with your NodeBB installation, but as you say, you have to use Slick, so the only way this will work is to embed the CSS in a widget. Whilst this works, here be dragons. If you decide to change the theme or have to reset it, the widgets are all removed and placed into the drafts section - you have to put these back manually.

My last remaining suggestion would be to minify the CSS once you have it finalized as it’s presence in the widget could well affect page load speed.

[Teemberland]

@phenomlab Thanks! I’ll make sure the company is aware of this.

Thank you for putting up with me, @phenomlab ! I really appreciate all your help. You can mark this as resolved for now.

[Teemberland]

@phenomlab by the way, I fixed the issue in Slick. I just copied this code from Persona to my header.tpl in Slick.

{{{if useCustomHTML}}}
{{customHTML}}
{{{end}}}
{{{if useCustomCSS}}}
<style type="text/css">{{customCSS}}</style>
{{end}}}

It used to looke like this:

<!-- IF useCustomHTML -->
{{customHTML}}
<!-- END -->
<!-- IF useCustomCSS -->
<style type="text/css">{{customCSS}}</style>
<!-- END -->

[phenomlab]

@Teemberland great spot ! You should create a PR for that so they can include it in the official repository.

Just be aware that any subsequent releases will overwrite your fix without the PR.