Ember Forum Theme 🎉

Meta
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:

image
image2882×1804 619 KB

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

image
image2882×1802 510 KB

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:

image
image2880×1800 498 KB

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