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