Custom CSS in ACP

Teemberland

I started with very simple CSS rule:

body {
    background-color: red;
}

With that, it's suppose to change the background color of my forum to red without rebuild right? And I'm suppose to see another css rule for body in inspect with background-color set to red? Thing is, the rule is not showing when I inspect it.

I'm using Slick theme by the way.

Teemberland

@baris Update: Custom CSS works in Persona, but not in Slick.

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

https://github.com/pichalite/nodebb-theme-slick/blob/master/templates/header.tpl#L26

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