The CSS code you need to make your Discourse forum stand-out

dev
1

Howdy, y’all. Many of you have helped me so much over the past couple weeks I’ve felt a bit inadequate in the value exchange. Which is to say your help has been so critical in bringing me up-to-speed with full stack development, I haven’t known how I could return the favor.

But, last night I stumbled upon https://www.discoursehub.com/communities/ and opened every forum on the page. Since so many Discourse installs end up being simple modifications of the stock theme with only a handful of changes to the color pallete, I thought I might-could offer some value on the front-end design side of things.

With that in mind, this is what our front page looks like today.

23
232810×1440 430 KB

QA topics look like this.

36
362806×1560 324 KB

Comments and suggested topics look like this.

33
332752×1400 230 KB

And topics long enough to warrant the scroll bar look like this.

47
472804×1548 525 KB

If you like this look, here is the CSS to produce it. Simply switch-out the color hex codes with your brand colors and upload to Settings >> Customize >> Light >> Edit CSS/HTML.

h/t to the guys at https://mothership.cx/ for doing a lot of the heavy-lifting that produced this CSS. They’re getting a new Discourse forum up and running at https://lounge.mothership.cx/, which is where I got the central ideas for this code.

Hope this helps.

Cheers!

.btn-primary {
    border: none;
    font-weight: normal;
    color: #fff;
    background: #009a49;
    padding: 8px 14px;
    box-shadow: 0 1px 5px rgba(6, 6, 6, 0.5);
}

.d-icon.d-icon-d-tracking, .d-icon.d-icon-d-watching {
    color: #009a49;
}

a {
    color: #009a49;
}

a:active {
    color: #009a49;
}

a:visited {
    color: #009a49;
}

.d-label {
    color: #009a49;
}

.btn-primary:hover, .btn-primary.btn-hover {
    color: #fff;
    background: #009a49;
}

.open .grippie {
    cursor: row-resize;
    padding: 4px 0;
    background: #009a49;
}

.badge-notification.new-topic {
    background-color: transparent;
    color: #009a49;
    font-weight: normal;
    font-size: .8706em;
}

.vote-button {
    display: block;
    margin-top: 5px;
    padding: 2px 0px;
    color: #ffffff;
    background-color: #009a49;
    cursor: pointer;
}

.nav-pills>li.active>a, .layouts-nav-button>li.active>a, .nav-pills>li>a.active, .layouts-nav-button>li>a.active {
    color: #fff;
    background-color: #009a49;
}

.nav-pills>li>a:hover, .layouts-nav-button>li>a:hover {
    color: #fff;
    background-color: #009a49;
}

.select-kit.combo-box .select-kit-collection .collection-header a {
    white-space: nowrap;
    color: #222;
    line-height: 1.2;
    font-weight: bold;
    display: block;
    padding: 6px 10px;
    color: #009a49;
}

.badge-notification.new-posts, .badge-notification.unread-posts {
    background-color: #009a49;
    color: #fff;
    font-weight: normal;
}

.admin-customize .themes-list-container .themes-list-item.active {
    color: #fff;
    font-weight: bold;
    background-color: #009a49;
}

#reply-control {
  &.draft,
  &.saving {
    background-color: #009a49;
  }
}

.nav-stacked a.active {
    color: #fff;
    background-color: #009a49;
}

a:hover {
    color: #777;
}

.custom-wizard .control-group input {
    width: 225px;
    line-height: 24px;
}

.categories-and-latest .column.categories {
    max-width: 40%;
}

.list-cell, .table-heading, .category-list td, .category-list th {
    color: #222;
}

h1, #topic-title .title-wrapper #edit-title, h2, h3 {
    margin-bottom: 0.4rem;
}

#main {
    background: #fbfbfb !important;
}

.latest-topic-list {
    box-shadow: 0 1px 5px rgba(6, 6, 6, 0.5);
    background-color: #fff;
    padding: 0px 30px 40px 30px;
    border-radius: 3px;
}

.latest-topic-list .title {
    font-weight: bold;
}

.topic-body {
    width: 75%;
    margin: 0 auto;
    background-color: #fff;
    padding: 12px 11px 0 11px;
    border-radius: 3px;
    box-shadow: 0 1px 5px rgba(6, 6, 6, 0.5);
}

#topic-title {
    z-index: 1;
    padding-top: 14px;
    margin-bottom: 10px;
    border-bottom: 1px solid #e9e9e9;
}

.topic-body .contents .cooked {
    overflow: hidden;
    max-width: 90%;
    margin: 0 auto;
}

.topic-body.clearfix {
    margin-top: 1%;
}

.topic-status-info {
    height: 20px;
    max-width: 757px;
}

.vote-count {
    height: 40px;
    line-height: 40px;
    font-weight: bold;
    font-size: 18px;
    background-color: #fff;
}

.topic-avatar {
    padding: 1% 1%;
    width: 45px;
    float: left;
    z-index: 2;
    border: none;
}

.topic-meta-data {
    align-items: center;
    padding-bottom: 5px;
}

.cooked h1, .cooked h2, .cooked h3, .cooked h4, .cooked h5, .cooked h6, .d-editor-preview h1, .d-editor-preview h2, .d-editor-preview h3, .d-editor-preview h4, .d-editor-preview h5, .d-editor-preview h6 {
    margin: 15px 0 10px;
}

.gap {
    padding: 1.25em 0 0.5em 4.6em;
    color: #919191;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: bold;
    font-size: .8706em;
}

#suggested-topics {
    clear: left;
    padding: 3% 5% 1% 5%;
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 1px 5px rgba(6, 6, 6, 0.5);
}

.qa-tip-container {
    position: relative;
    padding-bottom: 1%;
}

.topic-post.answer .topic-body {
    width: 75%;
}
7 Likes