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


(James Hahn II) #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 Communities - Discourse.Directory 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.

QA topics look like this.

Comments and suggested topics look like this.

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

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%;
}