Style the embedded Discourse frame on your web page

Community wiki Administrators
1

How to style the embedded Discourse frame on your web page

Getting Started

To get started you have to create a new CSS stylesheet under admin -> customize -> css/html, even if you don’t want to change the normal styling of your forum. Just leave the other categories empty and just modify Embedded CSS. Don’t forget to set it to enabled under the textfield.

Link and Button Colors

You probably want to style the links and buttons according to your web page.

footer a.button {
    background-color: #e26826;
    color: white;
}

a, a:visited, a:hover, a:active, a.in-reply-to {
    color: #e26826;
}

Adjust Staff Highlights

Usernames of members from the staff are usually highlighted with a light yellow background. If you don not want this you can change it with something like this.

.username a.staff {
    background-color: #e26826;
    color: white;
    padding-left: 0.2em;
    padding-right: 0.2em;
}

Put Filter over Avatars

If you want to keep a certain color palette on your blog, bright colored avatars can cramp your style. The following snippets desaturates them, but you could also use other filters like sepia.

div.author > a > img {
    -webkit-filter: grayscale(80%);
    filter: grayscale(80%);
}
9 Likes