Move status bar elements with CSS?

[peeragetalkers]

I want to move the backlink count to be after the word/character count.

I tried the Status Bar Organizer plugin and it got the job done but when I launch Obsidian, it takes a few moments for it to apply its modifications–unsightly!

I can achieve this by quite literally drag & dropping the div class in the dev tools:

But, obviously, things reset on app relaunch. Now how do I achieve this with a snippet?

[ariehen]

You’ve probably noticed that depending on what you are viewing (a note, a kanban, the Graph, etc., etc.) what’s in the status bar is going to change and/or shift around. If you enable a new plugin, that will be added, or not, depending on what you are viewing.

You could try order here. It’s a bit tedious finding all the names for everything that may show up, but it seems working. You can play around with the numbers, but 99 is on the far right, 98 to the left of that and so on. Anything not specified will just pile up on the left. Here’s a sampling of a few of mine:

/* order status bar items from the right */
.status-bar {
    & div.status-bar-item.plugin-mysnippets-plugin {
        order: 99;
    }
    & div.status-bar-item.plugin-editor-status {
        order: 98;
    }
    & div.status-bar-item.plugin-backlink {
        order: 97;
    }
    & div.status-bar-item.plugin-properties {
        order: 96;
    }
    & div.status-bar-item.plugin-word-count {
        order: 95;
    }
    & div.status-bar-item.plugin-pane-relief {
        order: 94;
    }
}

[peeragetalkers]

This scratched an itch, thank you! I like my status bar to be minimal. Other elements I have hidden away.

.status-bar {
    & div.status-bar-item.plugin-backlink {
        order: 98;
    }
    & div.status-bar-item.plugin-word-count {
        order: 97;
    }
    & div.status-bar-item.left-region {
        order: 99;
    }
}