Ember Forum Theme 🎉


#1

:wave: I’m a designer on the Discourse team, and I’ve spent some time this week building a theme to get things feeling a bit more Embery.

I’ve just enabled it as the default here. If you notice any issues or have any feedback let me know.


#2

It is looking good!

The one thing that I noticed that looked weird is the login buttons (social networks).

Thanks for working on this!


#3

Thank you, @awesomerobot, it looks slick!


#4

I’m really digging it, thanks for working on this @awesomerobot!


#5

Love the new theme, really stands out among the other Discourse forums I’m in.


#6


look nice!


#7

Pretty minor, but I noticed the buttons have a tendency to blink rapidly upon mouse-over:


#8

Great work @awesomerobot!

The other day I was reading a post on Elm’s discourse form and really liked the readability of their theme. I wanted to float some suggestions out there and see if they resonate with you/our community.

Here’s a screenshot from an example post over there:

And here’s a post from Ember’s forum:

Some thoughts:

  • I like how their general color & typographic choices put the content front-and-center, and deemphasize other aspects of the interface.
  • Ember’s current theme has lots of elements that grab your attention - a strong orange header with larger buttons; the strong Testing tag; the bright orange slider for paginating
  • I like how Elm’s site uses gray text to deemphasize the secondary parts of the interface (the author name, the date of the post, the elements of the paginator)
  • I also like how their code blocks feel like part of the post, with the low-contrast background. Ember’s code blocks really stand out and distract the natural flow of the post’s content
  • Elm’s typography is also a bit smaller which makes the whole interface a bit denser & fits more content on a single screen. I like approach as I feel it’s aligned with the nature & expectation of the site: a forum for developers

And here’s a screenshot after making a few tweaks:

Here’s the CSS code for the tweaks:

html {
  font-size: 15px;
}

#topic-title h1 {
  font-size: 1.6511em
  margin: 0 0 6px 0;
}
  
a.badge-wrapper {
  font-size: .8em;
  text-transform: uppercase;
}

a.badge-wrapper.box {
  padding: 2px 10px;
}

.badge-wrapper.box span.badge-category-bg,
.badge-wrapper.box span.badge-category-parent-bg {
  border-radius: 2px;
}

.cooked p, .d-editor-preview p {
  line-height: 1.4;
}

.cooked pre code,
.cooked p>code,
.cooked li>code,
.cooked pre>code,
.d-editor-preview pre code,
.d-editor-preview p>code,
.d-editor-preview li>code,
.d-editor-preview pre>code {
  background: #f7f7f7;
}

code, pre {
  font-size: 0.94em;
}

.cooked, .d-editor-preview {
  line-height: 1.5;
}

This next rule I just removed to lighten the text of the author name, post date, and paginator elements:

  .names span a, .topic-body .reply-to-tab, .topic-meta-data .post-info a, .timeline-container .topic-timeline .start-date, .timeline-container .topic-timeline .now-date, .topic-list th, #reply-control .reply-to, #reply-control .reply-to i, .latest-topic-list .table-heading, .top-topic-list .table-heading, .group-nav li a, .group-nav li i, .user-navigation .nav-stacked a, .user-nav li a {
-   color: #444;
  }

This darkened the borders which also pulled attention away from the content a bit, so I removed it to lighten them:

  .topic-body, .topic-avatar, .embedded-posts.bottom .row .topic-avatar, .embedded-posts.bottom .row .topic-body, .embedded-posts, .embedded-posts.top .row .topic-avatar, .embedded-posts.top .row .topic-body, .small-action, .timeline-container .topic-timeline .timeline-scrollarea, .category-list tbody tr, .latest-topic-list-item, .category-list tbody tr:first-of-type, .latest-topic-list .table-heading, .top-topic-list .table-heading, .user-main .about .secondary, .nav-stacked li, .content-list ul li, .post-links-container .post-links {
-   border-color: #E5DBD6;
  }

I have some more ideas for the overview page (I think the way Elm handles the topic labels with a small colored box instead of a full-color background is good) but figured I’d start out with this and put it out there.

What do y’all think?


#9

Really nice!

I would avoid uppercasing all category/badge names and leave them as they’re entered.

And a small vote to revert the header from orange background to white. It takes a lot of focus.


#10

@samselikoff, I definitely agree with these thoughts.

I sent some feedback along about the buttons privately, but I’ll post theme here was so it’s part of the public dialog:

My suggestions would be:

  • For btn-text, btn-icon-text and pills
    • Remove the border, keep a white background. I think the icon spacing is sufficient to communicate that it’s a button
    • For the active state, just have orange text (no background or border)
    • For the hover state, use the orange, but very light and with darker text background: rgba(224, 78, 57, 0.10); color: #c7341f;
    • Definitely a bit of personal preference here, but putting the border-radius to something like 3px over 5px for buttons and category pills
  • The contrast in the message in the topic-map container is a little low
  • The hover state in the “watching” button is broken

Here is a screenshot of some of those changes:


#11

Nice :+1:

Does anyone know where the CSS for our site is kept, if it’s OSS, if we can make PRs to it, etc.?


#12

From what I saw of other discourse theme-builder stuff it’s behind the admin of our site and kept in the db (or something). I could be completely wrong.

@awesomerobot, what would be the best way to get changes made?


#13

Thanks for the feedback everyone. I think there are some good suggestions here.

Very good question. The theme was living in the admin section of this site, but I moved it to a repo on github so anyone can feel free to make a PR.

I’ll be around to help maintain the theme and fix bugs, but for iterative style changes submitting a PR will be the quickest way to get them implemented.

Also, if you have questions about how themes in Discourse work - this is a good place to start:


#14

Would it be possible to get the forums logo to show up when you save it to your phones home screen? I have a few different forums saved to my homescreen (all discourse apps) and the ember forum is the only one missing a logo.


#15

The logo showed up on my phone this morning. Now it looks the best of the bunch


#16

Oh yes, I updated it and completely forgot to let you know. Thanks for mentioning it.


#17

Thanks for this!

Is it possible for me to use the theme locally, so I can test my changes before submitting PRs?


#18

There are a couple of options to test themes:

  • You could install Discourse locally and test it there (howto)
  • You could use our theme-creator test site (howto)