# Theme refresh

**URL:** <https://discourse.mozilla.org/t/theme-refresh/5056>\
**Category:** Meta\
**Created:** [November 3, 2015, 10:17am UTC](https://discourse.mozilla.org/t/theme-refresh/5056 "2015-11-03T10:17:10Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![leo](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/leo/32/35237_2.png) [@leo](https://discourse.mozilla.org/u/leo)\
**Post date:** [November 3, 2015, 10:17am UTC](https://discourse.mozilla.org/t/theme-refresh/5056/1 "2015-11-03T10:17:10Z")

</div>

We’ve been pretty bad at maintaining our current Discourse theme - new issues have cropped up, and there are some which have never been fixed…

![](https://us1.discourse-cdn.com/flex001/uploads/mozilla/original/2X/9/94c371d199130c8274d33a8ad795d943344935ee.png)

Mozilla’s visual style has also moved on a bit in the last year or so, and seems to suit the simplicity which I think a forum like this should have. This is why I propose we switch to the theme in use on [staging](https://csa-megadiscourse.mofostaging.net/) (thx @jan, I tweaked a few tiny things):

 ![](https://us1.discourse-cdn.com/flex001/uploads/mozilla/original/2X/2/2e7a93222a80f2c568746d21255f699a2174917f.png)

Images are broken on staging for some reason unrelated to the theme, so you’re not quite getting the full _experience_.

It’s simpler (both in design and lines of CSS used), easier to maintain (because it mainly uses the in-built colour customizer which I don’t think existed when the first theme was created), and _actually_ uses Open Sans.

Objections?

---

<div class="post-metadata">

**Author:** ![nukeador](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/nukeador/32/20533_2.png) [@nukeador](https://discourse.mozilla.org/u/nukeador)\
**Post date:** [November 3, 2015, 11:08am UTC](https://discourse.mozilla.org/t/theme-refresh/5056/2 "2015-11-03T11:08:05Z")

</div>

Like it, but log-in/register buttons are weird in blue with a red background, also missing tabzilla.

Also, is it possible to also fix notifications button to have some text explaining what it is?

![](https://us1.discourse-cdn.com/flex001/uploads/mozilla/original/2X/c/cb1308ea911c838fc521ee46fe3c6a281976f8ae.png)

![](https://us1.discourse-cdn.com/flex001/uploads/mozilla/original/2X/9/95f40b953320b8116438f16fe1799b3ae2e51d47.png)

---

<div class="post-metadata">

**Author:** ![leo](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/leo/32/35237_2.png) [@leo](https://discourse.mozilla.org/u/leo)\
**Post date:** [November 3, 2015, 3:45pm UTC](https://discourse.mozilla.org/t/theme-refresh/5056/3 "2015-11-03T15:45:47Z")

</div>

> [@nukeador](#):
>
> Like it, but log-in/register buttons are weird in blue with a red background, also missing tabzilla.

Done.

 ![](https://us1.discourse-cdn.com/flex001/uploads/mozilla/original/2X/1/1a1f69a0dc836961d446946c6a9fc1a16dbb3b49.png)

> [@nukeador](#):
>
> Also, is it possible to also fix notifications button to have some text explaining what it is?

That sounds like a [feature request](https://discourse.mozilla-community.org/t/add-explanation-to-notifications-button/5059) to me 😉

---

<div class="post-metadata">

**Author:** ![nukeador](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/nukeador/32/20533_2.png) [@nukeador](https://discourse.mozilla.org/u/nukeador)\
**Post date:** [November 3, 2015, 4:13pm UTC](https://discourse.mozilla.org/t/theme-refresh/5056/4 "2015-11-03T16:13:22Z")

</div>

Looking great.

Should the main logo said something more than “mozilla” like “mozilla forums” or “mozilla discussions” as we do with other sites?

Edit: Or event better “mozilla community”.

Cheers.

---

<div class="post-metadata">

**Author:** ![majken](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/majken/32/21188_2.png) [@majken](https://discourse.mozilla.org/u/majken)\
**Post date:** [November 3, 2015, 6:42pm UTC](https://discourse.mozilla.org/t/theme-refresh/5056/5 "2015-11-03T18:42:14Z")

</div>

Yes, that feature request already exists, not sure if we have an old topic on it.

---

<div class="post-metadata">

**Author:** ![majken](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/majken/32/21188_2.png) [@majken](https://discourse.mozilla.org/u/majken)\
**Post date:** [November 3, 2015, 6:45pm UTC](https://discourse.mozilla.org/t/theme-refresh/5056/6 "2015-11-03T18:45:03Z")

</div>

It should probably say something else, but I’m not sure if we’re ready to start a branding discussion. I think we might be better off leaving it in obvious need of a change, than picking something now that we will inevitably get stuck with.

---

<div class="post-metadata">

**Author:** ![asdofindia](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/asdofindia/32/31946_2.png) [@asdofindia](https://discourse.mozilla.org/u/asdofindia)\
**Post date:** [November 20, 2015, 8:11pm UTC](https://discourse.mozilla.org/t/theme-refresh/5056/7 "2015-11-20T20:11:49Z")

</div>

I was using the site just before and just after the theme was applied. And I found the red too bright for my eyes (could be just me)

---

<div class="post-metadata">

**Author:** ![majken](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/majken/32/21188_2.png) [@majken](https://discourse.mozilla.org/u/majken)\
**Post date:** [November 20, 2015, 8:42pm UTC](https://discourse.mozilla.org/t/theme-refresh/5056/8 "2015-11-20T20:42:03Z")

</div>

Two things I’ve noticed now that it’s applied:

Having a bold banner colour messes with the category colours. I’d suggest we swap the banner for a grey and use red for the text?

The banner isn’t quite at the top of the window. When I scroll down a topic I can see the artifacts of the text just above the banner.

---

<div class="post-metadata">

**Author:** ![EdoPut](https://avatars.discourse-cdn.com/v4/letter/e/aeb1de/32.png) [@EdoPut](https://discourse.mozilla.org/u/EdoPut)\
**Post date:** [November 20, 2015, 8:53pm UTC](https://discourse.mozilla.org/t/theme-refresh/5056/9 "2015-11-20T20:53:17Z")

</div>

![](https://us1.discourse-cdn.com/flex001/uploads/mozilla/original/2X/c/cf4b64a1bba1c2c5bea8c86ee4dc2f30bc554c4a.png)

In the title of each category page there is this output

---

<div class="post-metadata">

**Author:** ![nukeador](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/nukeador/32/20533_2.png) [@nukeador](https://discourse.mozilla.org/u/nukeador)\
**Post date:** [November 20, 2015, 10:36pm UTC](https://discourse.mozilla.org/t/theme-refresh/5056/10 "2015-11-20T22:36:41Z")

</div>

We need more margin here

 ![](https://us1.discourse-cdn.com/flex001/uploads/mozilla/original/2X/7/7ec93af4a691f704e14bd8c493d4000d885cc017.png)

Also, maybe we should get rid of category colors here, some categories have colors that don’t match with a red background.

---

<div class="post-metadata">

**Author:** ![nukeador](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/nukeador/32/20533_2.png) [@nukeador](https://discourse.mozilla.org/u/nukeador)\
**Post date:** [November 20, 2015, 10:44pm UTC](https://discourse.mozilla.org/t/theme-refresh/5056/11 "2015-11-20T22:44:42Z")

</div>

Also the blue notification bubble over the avatar is weird with the red background, maybe we should change the tone of blue.

![](https://us1.discourse-cdn.com/flex001/uploads/mozilla/original/2X/5/5545d22d68bb155de9a0424e91af6923f9d263f3.png)

---

<div class="post-metadata">

**Author:** ![Mte90](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/mte90/32/37835_2.png) [@Mte90](https://discourse.mozilla.org/u/Mte90)\
**Post date:** [November 20, 2015, 10:47pm UTC](https://discourse.mozilla.org/t/theme-refresh/5056/12 "2015-11-20T22:47:59Z")

</div>

![](https://us1.discourse-cdn.com/flex001/uploads/mozilla/original/2X/4/4f0a6924ffc60305aa9e1aff4c558e863d4e85c5.png)

Object Object also in the menu for latest page.

---

<div class="post-metadata">

**Author:** ![nukeador](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/nukeador/32/20533_2.png) [@nukeador](https://discourse.mozilla.org/u/nukeador)\
**Post date:** [November 20, 2015, 10:53pm UTC](https://discourse.mozilla.org/t/theme-refresh/5056/13 "2015-11-20T22:53:36Z")

</div>

> [@Mte90](#):
>
> Object Object also in the menu for latest page.

That’s maybe an incomplete Italian localization.

---

<div class="post-metadata">

**Author:** ![sotos](https://avatars.discourse-cdn.com/v4/letter/s/f19dbf/32.png) [@sotos](https://discourse.mozilla.org/u/sotos)\
**Post date:** [November 21, 2015, 12:30am UTC](https://discourse.mozilla.org/t/theme-refresh/5056/14 "2015-11-21T00:30:55Z")

</div>

i think the color of the text bellow the “Theme refresh” must be something else. To see that’s “its active” ![](https://us1.discourse-cdn.com/flex001/uploads/mozilla/original/2X/4/4eda05453bc37bad74c7390a97d3861c4641b6bc.png)

---

<div class="post-metadata">

**Author:** ![tanner](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/tanner/32/30590_2.png) [@tanner](https://discourse.mozilla.org/u/tanner)\
**Post date:** [November 21, 2015, 1:57am UTC](https://discourse.mozilla.org/t/theme-refresh/5056/15 "2015-11-21T01:57:14Z")

</div>

> [@majken](#):
>
> The banner isn’t quite at the top of the window. When I scroll down a topic I can see the artifacts of the text just above the banner.

I can’t reproduce, and I believe Yousef and Leo said the same. It might just be taking a little bit to redraw.

> [@EdoPut](#):
>
> In the title of each category page there is this output

That’s probably part of a localization missing. Discourse changed their i18n backend, so that’s probably related.

> [@r\_oVhPfcJCUUC5wbm6i4\_C2Q](#):
>
> Also the blue notification bubble over the avatar is weird with the red background, maybe we should change the tone of blue.

Agreed, I’ll play around a bit with that later.

> [@sotos](#):
>
> i think the color of the text bellow the “Theme refresh” must be something else. To see that’s “its active”

That’s no different than it was on our previous theme. What would you recommend?

---

<div class="post-metadata">

**Author:** ![comzeradd](https://avatars.discourse-cdn.com/v4/letter/c/57b2e6/32.png) [@comzeradd](https://discourse.mozilla.org/u/comzeradd)\
**Post date:** [November 21, 2015, 1:41pm UTC](https://discourse.mozilla.org/t/theme-refresh/5056/16 "2015-11-21T13:41:43Z")

</div>

> [@majken](#):
>
> Having a bold banner colour messes with the category colours. I’d suggest we swap the banner for a grey and use red for the text?

I agree. All categories have a color (plus avatars and notifications) that doesn’t fit well with a high saturation background color.

---

<div class="post-metadata">

**Author:** ![nukeador](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/nukeador/32/20533_2.png) [@nukeador](https://discourse.mozilla.org/u/nukeador)\
**Post date:** [November 21, 2015, 1:43pm UTC](https://discourse.mozilla.org/t/theme-refresh/5056/17 "2015-11-21T13:43:41Z")

</div>

> [@comzeradd](#):
>
> I agree. All categories have a color (plus avatars and notifications) that doesn’t fit well with a high saturation background color.

I personally like the red header like [mozilla.org](http://mozilla.org). I don’t know if is there a way to have it and at the same time colors that fit over it.

---

<div class="post-metadata">

**Author:** ![comzeradd](https://avatars.discourse-cdn.com/v4/letter/c/57b2e6/32.png) [@comzeradd](https://discourse.mozilla.org/u/comzeradd)\
**Post date:** [November 21, 2015, 1:49pm UTC](https://discourse.mozilla.org/t/theme-refresh/5056/18 "2015-11-21T13:49:07Z")

</div>

Maybe not use category colors in such a narrow bar. Here is an example with turning category colors to something else, and inverting the notification balloon.

![](https://us1.discourse-cdn.com/flex001/uploads/mozilla/optimized/2X/8/804ac453aa6faaf073024e320a2d8f77d0bf3e17_2_690x36.jpeg)

---

<div class="post-metadata">

**Author:** ![Mte90](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/mte90/32/37835_2.png) [@Mte90](https://discourse.mozilla.org/u/Mte90)\
**Post date:** [November 22, 2015, 1:45pm UTC](https://discourse.mozilla.org/t/theme-refresh/5056/19 "2015-11-22T13:45:06Z")

</div>

Good point, to help for the translation of discourse they are on Transifex [https://www.transifex.com/discourse/discourse-org/](https://www.transifex.com/discourse/discourse-org/)

---

<div class="post-metadata">

**Author:** ![comzeradd](https://avatars.discourse-cdn.com/v4/letter/c/57b2e6/32.png) [@comzeradd](https://discourse.mozilla.org/u/comzeradd)\
**Post date:** [November 22, 2015, 3:11pm UTC](https://discourse.mozilla.org/t/theme-refresh/5056/20 "2015-11-22T15:11:43Z")

</div>

Is the theme maintained in a repo?

[Next page](https://discourse.mozilla.org/t/theme-refresh/5056.md?page=2)