Being able to expand and customize how our topics get displayed is one of the neat features of building our own community.
How it works
In the site administration, I can add our own custom, CSS rules. When anyone writes a topic (or a reply) they can add a little bit of code to tell Discourse to apply that additional CSS styling.
- To use these styles, you need to manually include
<div>and</div>tags around your image. - The opening
<div>needs a special attributedata-custom="…" - …and you put the name (see below) of the custom style inside the quotes.
For example:
<div data-custom="podcomm_align_right">
</div>
That  goop is Markdown for “put this image right here.” That part happens automatically when you add an image to your topic.
What you have to do is then type the <div ...> and </div> bits around it. The blank line before the image is critical—it won’t work right without that.
Left and right alignment for images
using podcomm_align_right
Normally, if you put an image into a post it just flops there. This bit of styling lets you align images to one side, and make the text flow around the image. Once you see this, you’ll want to do it all over the place. :)
podcomm_align_left
podcomm_align_right
That right-aligned example image is done by wrapping the following div around an image. Don’t forget that blank line after the opening <div … > tag!
<div data-custom="podcomm_align_right">
</div>
Highlight sections of text
Sometimes it’s nice to be able to highlight text.
podcomm_highlight
Do I have your attention now?
That highlighted example is done by wrapping the following div around your text:
<div data-custom="podcomm_highlight">
Do I have your attention now?
</div>
Quoting
Quoting is often done by including an image, but that isn’t accessible (think: screen readers) and it doesn’t react well on different size devices. It’s much better if we can present quoted text as, well, text. The coding for this is a little trickier, but well worth the additional effort.
Discourse has the > I am basic, quoted text (a leading > is the trick) which looks like:
I am basic, quoted text
…but we can do a lot more than that.
podcomm_quote
podcomm_attribution
Said no one ever
And the code to create that is below. Notice there’s an outermost <div> … </div> pair styled with “podcomm_quote”, and then an inner <div> … </div> wrapping the attribution text.
<div data-custom="podcomm_quote">
"Lorem ipsum dolor sit amet, consectetur adipiscing…”
<div data-custom="podcomm_attribution">
<hr>
Said no one ever
</div>
</div>
Asides
Sometimes you want to add in more, but you don’t want it to be overly distracting…
I’m famous for getting far too far into the weeds with the details. So it’s nice to be able to throw stuff in as an aside. Not quite as “out of site” as the hide-/reveal-details feature that Discourse provides, but not quite as in-your-face as the main content. 
podcomm_aside
And the code…
<div data-custom="podcomm_aside">I'm famous for...</div>
