Change the order of topic footer buttons


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:

Does anybody have any idea, please?


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!

#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;
1 Like

Awesome, it works! Thank you! :pray:

1 Like

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