Crafting css styling for a specific topic?

Product Support

AI-generated summary

Crafting CSS Styling for a Specific Topic

craigconstantine is looking to create a topic with custom styling, similar to a landing page. dax suggests targeting a single topic using the topic ID in CSS, such as [data-topic-id="118787"] { /* CSS here */ }.

craigconstantine asks if it’s possible to add IDs or classes via the topic editor. simon replies that while it’s not possible to add IDs or classes directly, you can add a data attribute to a div tag, which won’t be stripped. This allows you to target the div with CSS, as seen in the example:

[data-custom] {
    color: blue;
}

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

This approach enables users to add custom styling to specific posts or topics.

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?

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.

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;
}