# Planned tag color issue when scrolled down **URL:** \ **Category:** Bug\ **Created:** [30. November 2016 um 17:30 UTC](https://meta.discourse.org/t/planned-tag-color-issue-when-scrolled-down/53582 "2016-11-30T17:30:16Z")\ **Posts on this page:** 9\ **Page:** 1 ## AI-generated summary [jomaxro](/t/-/53582/1) reported a bug where the `#planned` tag appears black instead of blue when viewing a topic with a collapsed header, though it displays correctly in `/latest` or at the top of the topic. [codinghorror](/t/-/53582/2) asked if this was a confirmed bug, to which [sam](/t/-/53582/3) suspected a missing CSS class. [cpradio](/t/-/53582/4) identified the root cause: the selector `header .discourse-tag` is more specific than the tag color rules, and both use `!important`, preventing the correct style from applying. After [sam](/t/-/53582/5) joked about needing a `!super-super-important` modifier, [cpradio](/t/-/53582/6) tested removing the `!important` flag from the relevant stylesheet and confirmed it resolved the issue without side effects. [sam](/t/-/53582/7) agreed, stating that stock Discourse CSS should never use `!important`, and requested a Pull Request. [cpradio](/t/-/53582/8) noted that while `!important` is sometimes necessary for third-party overrides like Select2, it should be avoided for native elements, and subsequently submitted a PR ([#4579](https://github.com/discourse/discourse/pull/4579)) to fix the issue.
**Author:** ![jomaxro](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jomaxro/32/126216_2.png) [@jomaxro](https://meta.discourse.org/u/jomaxro)\ **Post date:** [30. November 2016 um 17:30 UTC](https://meta.discourse.org/t/planned-tag-color-issue-when-scrolled-down/53582/1 "2016-11-30T17:30:16Z")
Here on Meta the #planned tag is blue. It works properly when view a topic from `/latest`, as well as when scrolled to the top of the topic, but is currently not working when viewing the topic itself and the header has “collapsed”. In this instance the color is black, and only turns blue on mouse hover. **Latest:** (works) ![](https://global.discourse-cdn.com/meta/original/3X/5/0/50063328858372d43df4fcb9168d0563ed7643c2.png) **Top of topic:** (works) ![](https://global.discourse-cdn.com/meta/original/3X/c/d/cdc75b119bb01c5c90f4cd2fca71b93a5a85492c.png) **Scrolled down:** (broken) ![](https://global.discourse-cdn.com/meta/original/3X/c/e/ce274833f7e9cab048d66d467098d5774ae81971.png) ---
**Author:** ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)\ **Post date:** [30. November 2016 um 23:15 UTC](https://meta.discourse.org/t/planned-tag-color-issue-when-scrolled-down/53582/2 "2016-11-30T23:15:27Z")
Interesting is this a bug @sam? ---
**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:** [30. November 2016 um 23:16 UTC](https://meta.discourse.org/t/planned-tag-color-issue-when-scrolled-down/53582/3 "2016-11-30T23:16:26Z")
Probably, my guess is that a class is missing ---
**Author:** ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)\ **Post date:** [30. November 2016 um 23:36 UTC](https://meta.discourse.org/t/planned-tag-color-issue-when-scrolled-down/53582/4 "2016-11-30T23:36:29Z")
`header .discourse-tag` is overriding `.tag-planned, .tag-planned:visited, .tag-planned:hover` because it is being more specific. Both items have `!important` which is why that isn’t taking effect. ---
**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:** [30. November 2016 um 23:41 UTC](https://meta.discourse.org/t/planned-tag-color-issue-when-scrolled-down/53582/5 "2016-11-30T23:41:32Z")
Some days I wish for !super-super-important CSS modifier, and then I gently lay my crack pipe down on the table and exhale ---
**Author:** ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)\ **Post date:** [1. Dezember 2016 um 00:06 UTC](https://meta.discourse.org/t/planned-tag-color-issue-when-scrolled-down/53582/6 "2016-12-01T00:06:00Z")
So playing around with this, removing the !important at > Seems to solve the issue. I’ve been navigating Meta for a while with it removed and haven’t noticed anything obvious yet. I have a feeling that `!important` is unnecessary. ---
**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:** [1. Dezember 2016 um 00:07 UTC](https://meta.discourse.org/t/planned-tag-color-issue-when-scrolled-down/53582/7 "2016-12-01T00:07:30Z")
Sure submit a PR for it, as a general rule NONE of our stock CSS should ever include !important ever. ---
**Author:** ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)\ **Post date:** [1. Dezember 2016 um 00:11 UTC](https://meta.discourse.org/t/planned-tag-color-issue-when-scrolled-down/53582/8 "2016-12-01T00:11:49Z")
That is very true, there are a few places though it does make sense, when overriding select2 styles and anything else from a third party vendor. But stock elements that discourse creates, I 100% agree, it shouldn’t use !important. PR submitted [https://github.com/discourse/discourse/pull/4579](https://github.com/discourse/discourse/pull/4579) ---
**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:** [1. Dezember 2016 um 00:15 UTC](https://meta.discourse.org/t/planned-tag-color-issue-when-scrolled-down/53582/9 "2016-12-01T00:15:21Z")