# Coloured category boxes on Oops-page (404)

**URL:** https://meta.discourse.org/t/coloured-category-boxes-on-oops-page-404/67977
**Category:** UX
**Created:** [2017年八月13日 18:23 UTC](https://meta.discourse.org/t/coloured-category-boxes-on-oops-page-404/67977 "2017-08-13T18:23:47Z")
**Posts on this page:** 12
**Page:** 1

<div class="post-metadata">

### Author: ![tophee](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tophee/32/73406_2.png) [@tophee](https://meta.discourse.org/u/tophee)
#### Post date: [2017年八月13日 18:23 UTC](https://meta.discourse.org/t/coloured-category-boxes-on-oops-page-404/67977/1 "2017-08-13T18:23:47Z")

</div>

We all hope that this page is rarely needed, but when it is displayed, I noticed that the colourful category boxes are shown _after_ each topic title under “Popular” and “Recent” and that means that the box sometimes ends up on a line by itself making the visual impression a bit confusing:

 ![image](https://global.discourse-cdn.com/meta/original/3X/f/0/f0e03cf53474714c114e940cc09af5052d03c5da.png)

Suggestion: Put those little boxes _before_ each title instead of after.

And while I’m at it: My impression/guess is that the page is often displayed when people access closed categories on a new device (e.g. via email link). To less tech-savvy users, this can be confusing, especially when they are not used to thinking about logging in (thanks to the long default login time). So I changed the copy for the message on that 404 page to

> Oops! That page doesn’t exist or is private. Are you logged in?

Maybe that would be something to consider as the default copy?

Just a suggestion.

---

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [2017年八月13日 22:24 UTC](https://meta.discourse.org/t/coloured-category-boxes-on-oops-page-404/67977/2 "2017-08-13T22:24:18Z")

</div>

Oh! An explicit “you know, if you logged in, you might be able to read that page” message might help.

I got an email today saying that a link I sent was broken because the person wasn’t logged in, and for whatever reason, logging in wasn’t an obvious solution.

---

<div class="post-metadata">

### Author: ![tophee](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tophee/32/73406_2.png) [@tophee](https://meta.discourse.org/u/tophee)
#### Post date: [2017年八月13日 22:26 UTC](https://meta.discourse.org/t/coloured-category-boxes-on-oops-page-404/67977/3 "2017-08-13T22:26:23Z")

</div>

> [@pfaffman](#):
>
> Oh! An explicit “you know, if you logged in, you might be able to read that page” message might help.

You mean even my “Are you logged in?” is not enough?

---

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [2017年八月13日 22:27 UTC](https://meta.discourse.org/t/coloured-category-boxes-on-oops-page-404/67977/4 "2017-08-13T22:27:39Z")

</div>

Oops. Yeah, maybe just liking your post is what I should have done!

Apparently, I don’t read either.

---

<div class="post-metadata">

### Author: ![tophee](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tophee/32/73406_2.png) [@tophee](https://meta.discourse.org/u/tophee)
#### Post date: [2017年八月13日 22:28 UTC](https://meta.discourse.org/t/coloured-category-boxes-on-oops-page-404/67977/5 "2017-08-13T22:28:56Z")

</div>

But it’s good to know you came up with the same idea regardless.

---

<div class="post-metadata">

### 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: [2017年八月13日 22:36 UTC](https://meta.discourse.org/t/coloured-category-boxes-on-oops-page-404/67977/6 "2017-08-13T22:36:01Z")

</div>

Hmm no this is a bug the category names are no longer showing up here @techapj probably a casualty of recent UI theming refactoring?

---

<div class="post-metadata">

### Author: ![tophee](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tophee/32/73406_2.png) [@tophee](https://meta.discourse.org/u/tophee)
#### Post date: [2017年八月13日 22:41 UTC](https://meta.discourse.org/t/coloured-category-boxes-on-oops-page-404/67977/7 "2017-08-13T22:41:19Z")

</div>

Oh, I see. But even with the category names, it looks confusing to have them on a line by themselves. Maybe somewhat increase the space after each topic?

---

<div class="post-metadata">

### Author: ![techAPJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/techapj/32/342990_2.png) [@techAPJ](https://meta.discourse.org/u/techAPJ)
#### Post date: [2017年八月14日 11:23 UTC](https://meta.discourse.org/t/coloured-category-boxes-on-oops-page-404/67977/8 "2017-08-14T11:23:38Z")

</div>

This was regressed 17 days ago in this commit: [REFACTOR: CSS improvements to improve targetting and remove !important · discourse/discourse@e4c2b5e · GitHub](https://github.com/discourse/discourse/commit/e4c2b5e43087a8327991978b1e3dcbdbd1ac6147)

Fixed via – [UX: fix category badge style on 404 page · discourse/discourse@2f3f547 · GitHub](https://github.com/discourse/discourse/commit/2f3f5477b06f020da0ea09d3cb578d5876da6f9a)

 ![48](https://global.discourse-cdn.com/meta/original/3X/4/6/46273cc378ba85551eb9d86e27e1d95e57a52992.png)

---

<div class="post-metadata">

### Author: ![dax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dax/32/244677_2.png) [@dax](https://meta.discourse.org/u/dax)
#### Post date: [2017年八月14日 12:55 UTC](https://meta.discourse.org/t/coloured-category-boxes-on-oops-page-404/67977/9 "2017-08-14T12:55:10Z")

</div>

此修复对深色主题无效。或许您可以使用 `$primary` 颜色，而不是 `#222222`

 ![SPn1GOg](https://global.discourse-cdn.com/meta/original/4X/d/8/d/d8d413c28e6e575d397b15f8145c354864344d44.png)

---

<div class="post-metadata">

### Author: ![dax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dax/32/244677_2.png) [@dax](https://meta.discourse.org/u/dax)
#### Post date: [2017年八月14日 14:38 UTC](https://meta.discourse.org/t/coloured-category-boxes-on-oops-page-404/67977/10 "2017-08-14T14:38:42Z")

</div>

You can find a little restyling of this page here

> [@Customize the 404 page ("Oops! That page doesn't exist or is private")](https://meta.discourse.org/t/that-page-doesnt-exist-or-is-private-restyling-with-css/68017):
>
> Before: After (categories on the right): Or categories on the left: page width increased buttons and google search are always visible categories aligned on the right (or left) topics title cut if too long added the content “Are you logged in?” as described [here](https://meta.discourse.org/t/coloured-category-boxes-on-oops-page-404/67977) tested only for desktop (not mobile) Note: the code it’s still a work in progress! Here the CSS I used: /\*----------- GENERAL CSS -----------\*/ .span8 { width: 480px; } /\*Categories aligned to to…

---

<div class="post-metadata">

### Author: ![techAPJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/techapj/32/342990_2.png) [@techAPJ](https://meta.discourse.org/u/techAPJ)
#### Post date: [2017年八月15日 09:13 UTC](https://meta.discourse.org/t/coloured-category-boxes-on-oops-page-404/67977/12 "2017-08-15T09:13:10Z")

</div>

Should be fixed via: [UX: make 404 page look better on dark theme · discourse/discourse@7e9b228 · GitHub](https://github.com/discourse/discourse/commit/7e9b2289bd9737e3672c111c0c137a70c0669c7c)

---

<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: [2017年八月16日 22:00 UTC](https://meta.discourse.org/t/coloured-category-boxes-on-oops-page-404/67977/13 "2017-08-16T22:00:17Z")

</div>

This topic was automatically closed after 31 hours. New replies are no longer allowed.
