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
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.
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:
Make space around content:
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
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.
Individual border radius starts from top-right and go clockwise
border-radius:15px 50px 30px 5px;
Box shadow defined position-right, position-down, blur, and color respectively:
box-shadow: 0px 3px 15px black;
The font of your post is customizable but there are only a limited amount of web safe fonts to choose from.
font color (again):
<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>
You can use
<br> to have as many returns as you want and
<hr> for line breaks.