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.
22 Likes
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 Likes
Thank you, @awesomerobot, it looks slick!
2 Likes
I’m really digging it, thanks for working on this @awesomerobot!
Love the new theme, really stands out among the other Discourse forums I’m in.
2 Likes
Pretty minor, but I noticed the buttons have a tendency to blink rapidly upon mouse-over:
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
Testingtag; 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?
11 Likes
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.
1 Like
@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-textand 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-mapcontainer is a little low - The hover state in the “watching” button is broken
Here is a screenshot of some of those changes:
1 Like
Nice 
Does anyone know where the CSS for our site is kept, if it’s OSS, if we can make PRs to it, etc.?
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?
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:
4 Likes
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.
1 Like
The logo showed up on my phone this morning. Now it looks the best of the bunch
2 Likes
Oh yes, I updated it and completely forgot to let you know. Thanks for mentioning it.
2 Likes
Thanks for this!
Is it possible for me to use the theme locally, so I can test my changes before submitting PRs?
There are a couple of options to test themes:
2 Likes
hey @awesomerobot, thanks very much for your work on the theme update. Would it be possible to move that repo to something our community can update on our own over time? We’re glad you’re around to help out right now, but we also find that over a period of a few years it’s easy to lose track of who has access to what (especially if you end up taking a different job) 
Thanks!
Oh sure, that does make the most sense — I just requested to transfer the repo to you