# Adding a category class to a Published Page
**URL:** https://meta.discourse.org/t/adding-a-category-class-to-a-published-page/246404
**Category:** Development
**Tags:** page-publishing
**Created:** [November 1, 2022, 12:19pm UTC](https://meta.discourse.org/t/adding-a-category-class-to-a-published-page/246404 "2022-11-01T12:19:42Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [November 1, 2022, 12:19pm UTC](https://meta.discourse.org/t/adding-a-category-class-to-a-published-page/246404/1 "2022-11-01T12:19:42Z")
> [@Page Publishing](https://meta.discourse.org/t/page-publishing/151971/103):
>
> `text/javascript`
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.
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [November 1, 2022, 4:50pm UTC](https://meta.discourse.org/t/adding-a-category-class-to-a-published-page/246404/2 "2022-11-01T16:50:44Z")
Hello,
I am not sure I fully understand it but the category is available on body so you can target that.
For example:
You can target all lounge category topics with:
```scss
.published-page.lounge {
...
}
```
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [November 1, 2022, 5:40pm UTC](https://meta.discourse.org/t/adding-a-category-class-to-a-published-page/246404/3 "2022-11-01T17:40:54Z")
Sorry, I wasn’t clear enough and I should have explained better the purpose.
Currently, page publishing doesn’t use the category background.
Setting:
Topic view:
Published page view:
The category background is defined in color\_definitions.scss:
```css
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:
```scss
.published-page {
&.test-category {
background-image: url("/uploads/default/original/1X/1851d5e9eb66a9ecf49f0dc747dfbad1a0fd220b.jpeg");
}
}
```
---
### Author:  [@Aizada\_M](https://meta.discourse.org/u/Aizada_M)
#### Post date: [November 1, 2022, 5:49pm UTC](https://meta.discourse.org/t/adding-a-category-class-to-a-published-page/246404/4 "2022-11-01T17:49:02Z")
I agree, very good idea 👍
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [November 1, 2022, 8:56pm UTC](https://meta.discourse.org/t/adding-a-category-class-to-a-published-page/246404/5 "2022-11-01T20:56:55Z")
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 · GitHub](https://github.com/VaperinaDEV/published-page-category-background-image)
But maybe there is a better solution I’m not sure. 🙂
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [November 1, 2022, 11:04pm UTC](https://meta.discourse.org/t/adding-a-category-class-to-a-published-page/246404/6 "2022-11-01T23:04:36Z")
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:
```css
.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](https://meta.discourse.org/t/published-pages-could-inherit-categories-background-image-setting/243851)