Adding a category class to a Published Page

Dev
1

If we can’t use type="text/discourse-plugin" in a script tag, is there a way to get the current category slug of a published page?
The purpose is to add a new class containing the slug in a page HTML tag.

2 Likes
2

Hello,

I am not sure I fully understand it but the category is available on body so you can target that.

For example:

Screenshot 2022-11-01 at 17.42.55

You can target all lounge category topics with:

.published-page.lounge {
  ...
}
2 Likes
3

Sorry, I wasn’t clear enough and I should have explained better the purpose.

Currently, page publishing doesn’t use the category background.

Setting:

image
image636×743 82.3 KB

Topic view:

image
image1432×772 71.6 KB

Published page view:

image
image898×330 19 KB

The category background is defined in color_definitions.scss:

body.category-test-category {
    background-image: url(/uploads/default/original/1X/1851d5e9eb66a9ecf49f0dc747dfbad1a0fd220b.jpeg)
}

The published page doesn’t have the category-test-category class, and thus doesn’t inherit the background image.

My idea is to use javascript to get the category slug and add a category-[category slug] class to the body tag, whatever the category name is, so category backgrounds will automatically be applied, instead of writing custom CSS for each published page’s categories, such as:

.published-page {
    &.test-category {
        background-image: url("/uploads/default/original/1X/1851d5e9eb66a9ecf49f0dc747dfbad1a0fd220b.jpeg");
    }
}
4 Likes
4

I agree, very good idea :+1:

2 Likes
5

Oh I see… Yeah it is a good idea but unfortunately I don’t think it is possible to modify published page with a theme component (javascript)… Probably with a plugin or add in the core the category- part before category name.

I think for now the manual way works. Create a theme component with the relevant SCSS to published pages categories and add settings for this.

I mean something like this maybe: GitHub - VaperinaDEV/published-page-category-background-image

But maybe there is a better solution I’m not sure. :slightly_smiling_face:

3 Likes
6

That’s a very clever solution, but I agree that having such a thing by default (or customizable) in the core could be nice. The current intent is explicitly having a default background using the theme’s colors, as we can see in publish.scss:

.published-page {
  background-color: var(--secondary);
  color: var(--primary);

What about if the custom category background images URL were stored in CSS variables we could easily have access to in our custom CSS? At least, we wouldn’t bother using the full image URL in our CSS.

I’ve made a feature request here: Published pages could inherit categories' background image setting

4 Likes