Tiles Image Gallery

Theme component
66

We already moved the toolbar to flexbox when we redid the composer :mage: — so @Caroline_Early, to rearrange the buttons this CSS can be added to your theme:

.d-editor-button-bar {
  button:nth-of-type(n+7),
  div:nth-of-type(n+2)  { // Tiles button, divider, and gear dropdown
    order: 2;
  }

  button.upload { // Place upload button before above elements
    order: 1;
  } 
}

What this is doing:

By default order is set to 0.

Adding order: 2 to the tile button and all elements after it means they’ll be placed after anything with a lower order. Since they all share the same order value, they’ll fall back to the sequence of appearance in the HTML.

Adding order: 1 puts the upload button before everything with order: 2 and after everything with the default order: 0. So this puts it to the left of the tile button instead of the right.

6 Likes