Home | Wiki | Discord | Dev Stream | YouTube | Archived Forums | Contact

Discourse CSS tutorial - How to style your posts


#1

How to use CSS to style your discourse posts

You can use inline CSS to change the style of your posts. Internal CSS ( <style></style> ) does not work so there will be a lot of copy and pasting.

How to add CSS: <div style=" put css here"> Put content here </div>

This also works for <span> tags to add style to just a few words.

Visit https://www.w3schools.com/css/default.asp for a comprehensive list of css references.

Here are some of the most relevant CSS parameters you can put in discourse posts


Colors

All colors can be typed out from a set list of colors (eg. red, blue) or selected by hex code (eg. #70BCCF). Visit https://htmlcolorcodes.com/ for easy hex code selection.

background color: background-color: black;
font color: color: red;


Size and spacing

You can put a div around a block of text to style your own "blockquotes". Most parameters measured by pixels (px) can also be measured by percentage of the div (%). Using percentages make your post responsive, meaning it will look consistent between a phone screen and PC screen. Also keep in mind many parameters can have negative numbers.

Define width or height of div: max-width:50%; max-height:100px;

Make space around content: padding: 50px;
Define individual sides: padding-top: 50px; padding-right: 30px; padding-bottom: 10%; padding-left: 15%;

Float content (or two things side by side): float:right; float:left; float:none;

To place things side by side with float, you need one div floated right and one left, each with a max-width. This can be a little finicky to work with.

After floating a div, use <div style='clear:both'> or <br clear="all">


Borders

Borders can be styled be individual parameters or all at once.

Border with border-width, border-style, and border-color defined respectively: border: 2px solid white;
border style options: none, dotted, dashed, solid (normal), double, groove, ridge, inset, and outset.
Individual sides can be defined by border-right, border-left, border-top, and border-bottom.

Rounded edges:border-radius:10px;
Individual border radius starts from top-right and go clockwiseborder-radius:15px 50px 30px 5px;

Box shadow defined position-right, position-down, blur, and color respectively:box-shadow: 0px 3px 15px black;


Fonts

The font of your post is customizable but there are only a limited amount of web safe fonts to choose from.

Change font: font-family: verdana;
Font Size: font-size: 15px;
font color (again): color: grey;


CSS example

<div style="background-color:#353535; font-family: times new roman; border-radius:4px; padding:5%; border-style: 1px double grey; box-shadow: 0px 3px 15px black;"> This is my content </div>


Extras

You can use <br> to have as many returns as you want and <hr> for line breaks.