Discourse CSS tutorial - How to style your posts

General Chat
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 CSS Tutorial 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;

Gradients can be used with as many colors as you want. There are linear gradients that have a direction, and radial-gradients which transition from the center. You can add percentage values after each color if you want to define how much of each color is in the gradient

Background gradient color examples:

background: linear-gradient(90deg, black, white);


background: linear-gradient(45deg, black 10%, white 30%, red 80%);


background: radial-gradient(blue, #111212 50%);



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 give posts a nice…border for your posts. Its a good way to give your thread a unique look.

Thiccness of border: border-width:1px;

Border style: border-style:double;
border style options: none, dotted, dashed, solid (default), double, groove, ridge, inset, and outset.

border-color border-color: white;

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 clockwise border-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;
Text Shadow: text-shadow: 1px 2px #000000;

Example: <div style=" font-family: constantia; font-size: 20px; color: #ffffd1; text-shadow: 3px 2px black;"> This is an example </div>

This is an example

Fonts may not be consistent across all devices. Look up web safe fonts to see which are most likely to work.

CSS example

<div style="background-color:#353535; font-family: times new roman; border-radius:4px; padding:5%; border-style:double; border-width:2px; 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.

65 Likes