# Crafting css styling for a specific topic?

**URL:** https://meta.discourse.org/t/crafting-css-styling-for-a-specific-topic/118787
**Category:** Support
**Created:** [May 27, 2019, 1:33pm UTC](https://meta.discourse.org/t/crafting-css-styling-for-a-specific-topic/118787 "2019-05-27T13:33:33Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![craigconstantine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/craigconstantine/32/511195_2.png) [@craigconstantine](https://meta.discourse.org/u/craigconstantine)
#### Post date: [May 27, 2019, 1:33pm UTC](https://meta.discourse.org/t/crafting-css-styling-for-a-specific-topic/118787/1 "2019-05-27T13:33:33Z")

</div>

(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](http://Discourse.org) hosted installation) which has specific styling. I would like it to look like a landing/pitch page. Specifically, [this one](https://moversmindset.com/community/) 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?

---

<div class="post-metadata">

### Author: ![dax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dax/32/244677_2.png) [@dax](https://meta.discourse.org/u/dax)
#### Post date: [May 27, 2019, 1:44pm UTC](https://meta.discourse.org/t/crafting-css-styling-for-a-specific-topic/118787/2 "2019-05-27T13:44:45Z")

</div>

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

```plaintext
[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.

---

<div class="post-metadata">

### Author: ![craigconstantine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/craigconstantine/32/511195_2.png) [@craigconstantine](https://meta.discourse.org/u/craigconstantine)
#### Post date: [May 27, 2019, 5:52pm UTC](https://meta.discourse.org/t/crafting-css-styling-for-a-specific-topic/118787/3 "2019-05-27T17:52:47Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)
#### Post date: [May 27, 2019, 7:33pm UTC](https://meta.discourse.org/t/crafting-css-styling-for-a-specific-topic/118787/4 "2019-05-27T19:33:25Z")

</div>

> [@craigconstantine](#):
>
> Is there a way to add IDs or classes into the DOM via the topic editor?

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:

```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:

```css
[data-custom] {
    color: blue;
}

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

```

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [June 26, 2019, 7:33pm UTC](https://meta.discourse.org/t/crafting-css-styling-for-a-specific-topic/118787/5 "2019-06-26T19:33:26Z")

</div>

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