# Category specific CSS not refreshing unless F5

**URL:** https://meta.discourse.org/t/category-specific-css-not-refreshing-unless-f5/226596
**Category:** Bug
**Created:** [May 9, 2022, 8:17pm UTC](https://meta.discourse.org/t/category-specific-css-not-refreshing-unless-f5/226596 "2022-05-09T20:17:00Z")
**Posts on this page:** 16
**Page:** 1

<div class="post-metadata">

### Author: ![Fma965](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fma965/32/259795_2.png) [@Fma965](https://meta.discourse.org/u/Fma965)
#### Post date: [May 9, 2022, 8:17pm UTC](https://meta.discourse.org/t/category-specific-css-not-refreshing-unless-f5/226596/1 "2022-05-09T20:17:00Z")

</div>

Hey guys,

I have this specific CSS

```plaintext
body[class^="category-documentation"] {
        .topic-list .topic-list-header .posts, 
        .topic-list .topic-list-header .views,
        .topic-list .topic-list-body .posts,
        .topic-list .topic-list-body .views,
        .topic-list .topic-list-body .posters,
        .topic-list .topic-list-header .posters
        {
            display: none !important;
        }
        
        .topic-list .topic-list-body .main-link,
        .topic-list .topic-list-header .topic-list-data
        {
            width: 90% !important;
        }
        
        .topic-list .topic-list-header .activity, .full-width .contents .topic-list .topic-list-body .activity {
            width: 10% !important;
        }

        .topic-list .topic-excerpt {
            display: none !important;
        }
    }

```

This works great for hiding loads of elements on a “documentation” category (yes i know a docs plugin exists, i find the native layout better though) my issue is when i click from say “Ford” to “Documentation” the CSS doesn’t refresh and therefore my stuff is not hidden unless i refresh the whole page with f5 / ctrl + R

Is there something i am missing to allow this to work?

The same applies the other way around also

You can visit any category on [https://community.cyanlabs.net](https://community.cyanlabs.net) and then go to documentation and will see the hidden CSS elements still show.

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [May 9, 2022, 8:36pm UTC](https://meta.discourse.org/t/category-specific-css-not-refreshing-unless-f5/226596/2 "2022-05-09T20:36:54Z")

</div>

It looks like you’re using the Air Theme, which includes the Discourse Loading Slider theme component.

If you disable that component from `admin > customize > themes > components`, and then try again… does that change anything? sometimes that component can cause an issue where classes linger between pages until you refresh.

---

<div class="post-metadata">

### Author: ![Fma965](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fma965/32/259795_2.png) [@Fma965](https://meta.discourse.org/u/Fma965)
#### Post date: [May 9, 2022, 8:43pm UTC](https://meta.discourse.org/t/category-specific-css-not-refreshing-unless-f5/226596/3 "2022-05-09T20:43:22Z")

</div>

Thanks for your reply,

I just tested this and unfortunately that hasn’t made any difference in this instance.

If there isn’t something simple then i’m just going to check the body class in javascript using api.onPageChange(() but it does seem a bit odd

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [May 9, 2022, 8:52pm UTC](https://meta.discourse.org/t/category-specific-css-not-refreshing-unless-f5/226596/4 "2022-05-09T20:52:20Z")

</div>

Ah ok… taking a closer look, it seems like there’s a dynamic class getting added by a theme to the body tag `category-documentation-21` and `category-ford-5` for example… on page transitions those classes don’t seem to be removed properly.

---

<div class="post-metadata">

### Author: ![Fma965](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fma965/32/259795_2.png) [@Fma965](https://meta.discourse.org/u/Fma965)
#### Post date: [May 9, 2022, 8:55pm UTC](https://meta.discourse.org/t/category-specific-css-not-refreshing-unless-f5/226596/5 "2022-05-09T20:55:09Z")

</div>

EDIT, i see what you mean now, it’s keeping that class in the body element for somereason 🤔

EDIT2 : i made a copy of the theme with no components, same issue persists, so it must be in a plugin or core.

 ![image](https://global.discourse-cdn.com/meta/original/4X/0/3/b/03b808732b0f698e12064f3d31903003c8d93f11.png)

Jankiest solution award goes to me 😃

```plaintext
<script type="text/discourse-plugin" version="0.8.19">
  api.onPageChange((url) => {
        if (url.indexOf("/c/documentation/") >= 0) {
            $( "<style id='documentationworkaround'>.topic-list .topic-list-body .posters,.topic-list .topic-list-body .posts,.topic-list .topic-list-body .views,.topic-list .topic-list-header .posters,.topic-list .topic-list-header .posts,.topic-list .topic-list-header .views{display:none!important}.topic-list .topic-list-body .main-link,.topic-list .topic-list-header .topic-list-data{width:90%!important}.full-width .contents .topic-list .topic-list-body .activity,.topic-list .topic-list-header .activity{width:10%!important}.topic-list .topic-excerpt{display:none!important}</style>" ).appendTo( "head" )
        } else {
            $( "#documentationworkaround").remove();
        }
        
    });
</script>

```

But yeah if anyone knows what’s causing it please let me know 🙂

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [May 10, 2022, 6:38pm UTC](https://meta.discourse.org/t/category-specific-css-not-refreshing-unless-f5/226596/6 "2022-05-10T18:38:14Z")

</div>

This appears to be a bug in core, so I’m re-categorizing it.

To repro:

1. Visit a category like [Support - Discourse Meta](https://meta.discourse.org/c/support/6)
2. Refresh the page
3. Switch to another category
4. Take a look at the classes on the body tag, the previous category sticks around

![Screen Shot 2022-05-10 at 2.31.33 PM](https://global.discourse-cdn.com/meta/original/4X/1/5/b/15b609fb44d29bb54e209150518187a0d07ab7da.png)

Seems to be added server-side, I had an engineer help troubleshoot and more specifically it seems to come from:

> <https://github.com/discourse/discourse/blob/main/app/helpers/application_helper.rb#L184>

---

<div class="post-metadata">

### Author: ![Fma965](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fma965/32/259795_2.png) [@Fma965](https://meta.discourse.org/u/Fma965)
#### Post date: [May 10, 2022, 6:53pm UTC](https://meta.discourse.org/t/category-specific-css-not-refreshing-unless-f5/226596/7 "2022-05-10T18:53:18Z")

</div>

Thanks for the update, for now my janky javascript works around the issue, how can i track the status of this bug?

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [May 10, 2022, 6:55pm UTC](https://meta.discourse.org/t/category-specific-css-not-refreshing-unless-f5/226596/8 "2022-05-10T18:55:09Z")

</div>

We’ll update this topic when it’s fixed (or something else related). If you change your tracking level to “watching” in the dropdown at the bottom of the topic, you’ll get notified of new posts.

 ![Screen Shot 2022-05-10 at 2.53.53 PM](https://global.discourse-cdn.com/meta/original/4X/8/0/9/809d784ce16edf92bd97c747d4d00379a0dcfa0d.png)

---

<div class="post-metadata">

### Author: ![Fma965](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fma965/32/259795_2.png) [@Fma965](https://meta.discourse.org/u/Fma965)
#### Post date: [May 10, 2022, 6:57pm UTC](https://meta.discourse.org/t/category-specific-css-not-refreshing-unless-f5/226596/9 "2022-05-10T18:57:09Z")

</div>

Ideal, didn’t know if there was a github issue or anything, already watching this topic so will stay updated.

Thanks again for your help.

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [June 2, 2022, 3:35pm UTC](https://meta.discourse.org/t/category-specific-css-not-refreshing-unless-f5/226596/13 "2022-06-02T15:35:07Z")

</div>

This should be fixed in this commit, so the next time you update Discourse the category classes should be added/removed as expected.

[https://github.com/discourse/discourse/commit/333c58dd05030cc413b5c3283f35d07b7ec3a67b](https://github.com/discourse/discourse/commit/333c58dd05030cc413b5c3283f35d07b7ec3a67b)

---

<div class="post-metadata">

### Author: ![Fma965](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fma965/32/259795_2.png) [@Fma965](https://meta.discourse.org/u/Fma965)
#### Post date: [June 2, 2022, 4:04pm UTC](https://meta.discourse.org/t/category-specific-css-not-refreshing-unless-f5/226596/14 "2022-06-02T16:04:59Z")

</div>

Thanks, the classes are updated correctly now but the css is still not applied when switching between categories

```plaintext
body[class^="category-documentation"] {
        .topic-list .topic-excerpt, .topic-list .topic-list-body .posts, .topic-list .topic-list-header .posts {
            display: none !important
        }
    }

```

> **[Documentation](https://community.cyanlabs.net/c/documentation/51)**
>
> Discussion for all our documentation found at https://cyanlabs.net/docs/

move around categories, it won’t work correctly.

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [June 2, 2022, 4:22pm UTC](https://meta.discourse.org/t/category-specific-css-not-refreshing-unless-f5/226596/15 "2022-06-02T16:22:53Z")

</div>

oh hmm, that’s unexpected… is that CSS added with JS?

---

<div class="post-metadata">

### Author: ![Fma965](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fma965/32/259795_2.png) [@Fma965](https://meta.discourse.org/u/Fma965)
#### Post date: [June 2, 2022, 4:28pm UTC](https://meta.discourse.org/t/category-specific-css-not-refreshing-unless-f5/226596/16 "2022-06-02T16:28:48Z")

</div>

Nope, just plan css in the common or desktop.css files, i tried both.

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [June 14, 2022, 8:57pm UTC](https://meta.discourse.org/t/category-specific-css-not-refreshing-unless-f5/226596/19 "2022-06-14T20:57:09Z")

</div>

> [@Fma965](#):
>
> `body[class^="category-documentation"]`

Ah ok, this just dawned on me… `class^=` checks the beginning of the class, and the category isn’t always the first class in the list.

If you update to `body[class*="category-documentation"]` it should work, this checks for the class name wherever it appears in the list.

---

<div class="post-metadata">

### Author: ![Fma965](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fma965/32/259795_2.png) [@Fma965](https://meta.discourse.org/u/Fma965)
#### Post date: [June 18, 2022, 4:51pm UTC](https://meta.discourse.org/t/category-specific-css-not-refreshing-unless-f5/226596/20 "2022-06-18T16:51:26Z")

</div>

This + the core fix seems to work. thanks

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [June 20, 2022, 2:09am UTC](https://meta.discourse.org/t/category-specific-css-not-refreshing-unless-f5/226596/21 "2022-06-20T02:09:35Z")

</div>


