Custom CSS in ACP

<baris>

The custom css is added in the head section of the html, https://github.com/pichalite/nodebb-theme-slick/blob/master/templates/header.tpl#L26. Did you inspect the page and see if your custom css is there?

Teemberland

@baris said in Custom CSS in ACP:

nodebb-theme-slick/templates/header.tpl at master · pichalite/nodebb-theme-slick

Slick theme for NodeBB. Contribute to pichalite/nodebb-theme-slick development by creating an account on GitHub.

GitHub (github.com)

Yup, I do.
Screen Shot 2022-11-02 at 16.22.27 PM.png

<baris>

Then maybe another css rule that comes after is overriding it. You should be able to see if that's the case in the inspector and selecting the body tag.

Teemberland

@baris right, but in my case, I'm not seeing

body{background-color:var(--primary-bg-color)}

In styles in inspector at all. I do see the code above when I switch to Persona though. Here's what it looks like right now.
Screen Shot 2022-11-02 at 16.35.39 PM.png

<baris>

So you are saying the style block disappears from the <head> section when you switch to slick theme from persona? That's weird its clearly there https://github.com/pichalite/nodebb-theme-slick/blob/master/templates/header.tpl#L25-L27

Teemberland

@baris yeah I agree it's weird. here's Persona for comparison
Screen Shot 2022-11-02 at 16.43.56 PM.png

<baris>

Do you have anything else that might change header.tpl? Plugins or nodebb-plugin-customize etc?

Teemberland

This post is deleted!

Teemberland

This post is deleted!

Teemberland

@baris Okay, I just made it work. I just copied useCustomHTML from Persona and added style type. It looks like this now.

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

and this code does not work anymore, just FYI:
https://github.com/pichalite/nodebb-theme-slick/blob/master/templates/header.tpl#L25-L27

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