How to: Advanced topic styling

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.

  1. To use these styles, you need to manually include <div> and </div> tags around your image.
  2. The opening <div> needs a special attribute data-custom="…"
  3. …and you put the name (see below) of the custom style inside the quotes.

For example:

<div data-custom="podcomm_align_right">

![example|300x300, 75%](upload://2NcszpyXtekUZ3zdMTdAfcu60FD.png)
</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

PodComm icon 200 white
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">

![podcaster_community_square_150|150x150](upload://eN9dolrGWylGPoetlI7daQyXlkI.png)
</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

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.”

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. :slight_smile:

podcomm_aside

And the code…

<div data-custom="podcomm_aside">I'm famous for...</div>
2 Likes

Craig geeks out

Cool! :sunglasses:

2 Likes