Order position of options?

[kzipp]

Is there any way to change the position of the items (like get the clock on the bottom)? I should be able to do some with CSS but I was looking for a position or order placement option. Is something like that available or possible in the future?

[cismarine]

That would be nice.

[CSchlipp]

I'd be interested in this feature as well. This has been closed as completed, but unfortunately without an further information on how this can be done. What needs to be configured to change the order?

[DBuit]

@CSchlipp dont know why it is closed but it can be done with CSS. with the order property.

Dont know how good your element inspect and css skills are but the sidebar contains a div with the class sidebar-inner. Each element in this div are the base functions the sidebar has like the clock, menu, date, bottomCard etc.

To make it work you should add an order to each element otherwise it does not know where to put something so if you the css below you get the order as it is right now.

But change the order to -1 on one item and it will show first or just change it up. 1 thing the bottomCard got an extra margin-top property on it that makes sure it is on the bottom of the sidebar even when it got space above it, so if you change that one you should also add margin-top: 0; for the .bottom class.

Let me know if you get it working.

.digitalClock { order:1; }
.clock { order:2; }
.title { order:3; }
.date { order:4; }
.sidebarMenu { order:5; }
.template { order:6; }
.bottom { order:7; }

[CSchlipp]

Awesome, thanks a lot!

I was able to put it directly in the style property. bottomCard would need some more config, but for the others it was straight forward as you proposed. Some minor changes might be required in padding/margin/font-size, but that's up to the individual.

Just for reference, in case somebody is looking for the same thing, here's a more complete example of a config:

sidebar:
  title: Reordered Example
  digitalClock: true
  digitalClockWithSeconds: true
  date: true
  dateFormat: ddd, DD. MMMM YYYY
  width:
    mobile: 0
    tablet: 20
    desktop: 20
  style: |
    .title { order: 1; }
    .digitalClock { order: 2; }
    .date { order: 3; }
    .template { order: 4; }
    .sidebarMenu { order: 5; }
    .bottom { order: 6; }