Crafting css styling for a specific topic?

Support
1

(This is probably a common question, but I couldn’t find anything here on Meta. Pointers to existing docs/topics welcome.)

I would like to create a topic (Discourse.org hosted installation) which has specific styling. I would like it to look like a landing/pitch page. Specifically, this one which lives on a different web site—I want to move this page… not literally copy it of course, but conceptually—built a topic to take over the job of this page.

It need not be exactly the same, but I’d like to have variations of the backgrounds, font styling that sort of thing.

Thoughts?

1 Like
2

You will be able to target a single topic using the topic ID like

[data-topic-id="118787"] {
   /*your CSS here*/
}

For example the topic ID of this topic is 118787, as you can see in the URL on your browser.

5 Likes
3

that would do it!

Is there a way to add IDs or classes into the DOM via the topic editor? For example, I can <p>, but I can’t seem to set any attributes in there. I understand why it’d be wise to disallow style="" in the editor, but I’d expected to be able to add IDs and/or classes directly.

4

If you need to add styles to posts, you can wrap the post content in a div that has a data attribute. The data attribute will not be stripped from div tags. For example, if you create a post with the following HTML:

<div data-custom>
This is in a custom div
</div>

<div data-custom=true>
This is a custom div with the attribute set to true
</div>

you can target the divs with the following CSS:

[data-custom] {
    color: blue;
}

[data-custom=true] {
    background: red;
}
3 Likes
5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.