# Change the order of topic footer buttons

**URL:** https://meta.discourse.org/t/change-the-order-of-topic-footer-buttons/294698
**Category:** Development
**Created:** [February 8, 2024, 3:08pm UTC](https://meta.discourse.org/t/change-the-order-of-topic-footer-buttons/294698 "2024-02-08T15:08:08Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![katelion](https://avatars.discourse-cdn.com/v4/letter/k/6f9a4e/32.png) [@katelion](https://meta.discourse.org/u/katelion)
#### Post date: [February 8, 2024, 3:08pm UTC](https://meta.discourse.org/t/change-the-order-of-topic-footer-buttons/294698/1 "2024-02-08T15:08:08Z")

</div>

Hi,

We would like to change the order of the topic footer buttons. I didn’t find any plugin for that and with css it didn’t seem easy either.

Our goal is to make it look like this:

 ![image](https://global.discourse-cdn.com/meta/original/4X/b/a/5/ba5aa6878c564bdd5e9f1b1de5004a0424e15177.png)

Does anybody have any idea, please?

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [February 8, 2024, 4:45pm UTC](https://meta.discourse.org/t/change-the-order-of-topic-footer-buttons/294698/2 "2024-02-08T16:45:12Z")

</div>

Hi,

Can you try this CSS?

It assumes you want to hide the default notification text.  
It’s based on the default theme. Let me know if it needs adjustments!

```css
#topic-footer-buttons {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    
    button.create { order: -4; }
    button.bookmark { order: -3; }
    button.share-and-invite { order: -2; }
    button.flag-topic { order: -1; }
    
    .topic-notifications-button {
        margin-block: 0;
        
        .reason {
            margin-top: 0;
            
            .text {
                display: none;
            }
        }
    }
}

@media screen and (max-width: 924px) {
    html.desktop-view #topic-footer-buttons .topic-notifications-button {
        margin-top: 1em;
    }
}

```

---

<div class="post-metadata">

### Author: ![katelion](https://avatars.discourse-cdn.com/v4/letter/k/6f9a4e/32.png) [@katelion](https://meta.discourse.org/u/katelion)
#### Post date: [February 9, 2024, 12:55pm UTC](https://meta.discourse.org/t/change-the-order-of-topic-footer-buttons/294698/3 "2024-02-09T12:55:14Z")

</div>

Awesome, it works! Thank you! 🙏

---

<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: [March 10, 2024, 12:55pm UTC](https://meta.discourse.org/t/change-the-order-of-topic-footer-buttons/294698/4 "2024-03-10T12:55:16Z")

</div>

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