# Separating Pinned Topics
**URL:** https://meta.discourse.org/t/separating-pinned-topics/322567
**Category:** Development
**Tags:** pinned-topics
**Created:** [August 20, 2024, 8:40pm UTC](https://meta.discourse.org/t/separating-pinned-topics/322567 "2024-08-20T20:40:03Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@Terise](https://meta.discourse.org/u/Terise)
#### Post date: [August 20, 2024, 8:40pm UTC](https://meta.discourse.org/t/separating-pinned-topics/322567/1 "2024-08-20T20:40:03Z")
Hello!
I’m not exactly sure how to go about doing this and was looking for a bit of assistance.
Basically, I’d like to have visual separation between the pinned topics and regular topics. This would be for a game studio’s community forums and that separation would be helpful for the users.
What I’m looking for is something like this:
```plaintext
[PINNED] Topic Name
Regular topic
```
Instead of:
```plaintext
[PINNED] Topic Name
Regular topic
```
I’ve already changed the background colour of the pinned topics to create a slight difference between the two. I’ve tried CSS, which has worked, but only on a page refresh.
I’ve attempted creating my own theme component, but that’s where I’m getting stuck as I’d need to add something, but I’m not sure where.
My goal is to add before the original (regular topics) tbody.
Any guidance is greatly appreciated!
---
### Author:  [@Alteras](https://meta.discourse.org/u/Alteras)
#### Post date: [August 20, 2024, 10:49pm UTC](https://meta.discourse.org/t/separating-pinned-topics/322567/2 "2024-08-20T22:49:03Z")
You can look into using the [Filtered Topic Lists](https://meta.discourse.org/t/filtered-topic-lists/321031) theme component with the `in:pinned` query.
If you instead want to stick to CSS, you can do something like this:
```css
// target the last pin in the list
tr.topic-list-item.pinned:has(+ tr:not(.pinned)) td {
// rough way to force space inside a table row
padding-bottom: 1.8em;
}
tr.topic-list-item.pinned:has(+ tr:not(.pinned))::after {
// content to display in the space if wanted
content: 'regular';
width: 100%;
position: absolute;
display: flex;
height: 1em;
left: 0;
right: 0;
bottom: 0;
justify-content: center;
border-top: 1px solid var(--primary-low);
}
```
---
### Author:  [@Terise](https://meta.discourse.org/u/Terise)
#### Post date: [September 1, 2024, 6:49am UTC](https://meta.discourse.org/t/separating-pinned-topics/322567/3 "2024-09-01T06:49:49Z")
Thanks for the help! Unfortunately, that didn’t work. I do have an attempt at a plugin that should do what I need it to do, but I can’t seem to get it working on Discourse 3.4.0-beta2.
[https://github.com/darkpsy3934/discourse-mistflux-plugin](https://github.com/darkpsy3934/discourse-mistflux-plugin)
Any assistance with this would be greatly appreciated!
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [September 1, 2024, 2:31pm UTC](https://meta.discourse.org/t/separating-pinned-topics/322567/4 "2024-09-01T14:31:01Z")
Hey Terise,
I looked at your code, and you’re close!
Here are some feedbacks:
- You can modify it with a theme component (not a plugin). I would encourage you to use this template: [GitHub - discourse/discourse-theme-skeleton: Template for Discourse themes · GitHub](https://github.com/discourse/discourse-theme-skeleton)
- Using a connector is correct. The right path is `/discourse/connectors/`…
- The arguments passed to the connector can be retrieved with `outletArgs`. You can see the connector here:
[https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/components/topic-list/list.gjs#L126-L136](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/components/topic-list/list.gjs#L126-L136)
This means this should be:
```js
export default class PinnedTopicBody extends Component {
get pinnedTopics() {
return this.outletArgs.topics.filter((t) => t.get("pinned"));
}
}
```
and the template:
```hbs
{{#if this.pinnedTopics}}
{{#each this.pinnedTopics as |topic|}}
{{/each}}
| |
{{/if}}
```
- _Note_: Unfortunately, `showPosters` is not passed as an argument; you must hardcode its value here.
- _Note_: By default, it will look like this:
```js
import { classNames, tagName } from "@ember-decorators/component";
@tagName("tbody")
@classNames("pinned-topics")
export default class PinnedTopicBody extends Component {
...
}
```
```hbs
{{#if this.pinnedTopics}}
{{#each this.pinnedTopics as |topic|}}
...
{{/each}}
| |
{{/if}}
```
(if you know you will do nothing on the element, you can keep the `tbody` in the template and use `tagName("")`).
Then, you get this:
I did not thoroughly examine it to see if there was a better way.
I just wanted to help make your code work! 😄
---
### Author:  [@Terise](https://meta.discourse.org/u/Terise)
#### Post date: [September 1, 2024, 7:56pm UTC](https://meta.discourse.org/t/separating-pinned-topics/322567/5 "2024-09-01T19:56:49Z")
Would I need anything in the components directory or would all the files reside in connectors?
The only reason I was doing this as a plugin instead of a Theme Component is because I have plans to add more functionality later on.
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [September 1, 2024, 8:02pm UTC](https://meta.discourse.org/t/separating-pinned-topics/322567/6 "2024-09-01T20:02:03Z")
You don’t need the `components` directory here in this connector and code context.
You can see it in my screenshot because I modified an existing component. 😄
That said, it depends on what you want to do later. It’s also possible to create a component in the connector that refers to another component (and this one, you would place it in `components` directory).
---
### Author:  [@Terise](https://meta.discourse.org/u/Terise)
#### Post date: [September 1, 2024, 8:12pm UTC](https://meta.discourse.org/t/separating-pinned-topics/322567/7 "2024-09-01T20:12:16Z")
That’s perfect, thank you so much!
I do have one last question, if you don’t mind. Is there a way to stop the pinned topics from appearing in the normal topic list so that the pinned topics aren’t duplicated?
**Edit:** I was actually able to do that with a bit of CSS.
Again, thank you so much for your help!
---
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [October 1, 2024, 8:12pm UTC](https://meta.discourse.org/t/separating-pinned-topics/322567/8 "2024-10-01T20:12:52Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.