Reorder default composer icons?

[TLINDEN]

Hi,

is it possible somehow to reorder the appearance of the icons in the composer toolbar?

best,
Tom

[yariplus]

You can reorder them using some CSS. You have to set the order for each icon individually though. They are ordered from lowest to highest order value, and have a default of 0. You can use negetive values to pull to the left also.

Ref: https://stackoverflow.com/questions/39217732/is-it-possible-to-change-the-order-of-list-items-using-css3

.formatting-bar > ul {
  display: flex !important;
  flex-direction: row;
}
.formatting-bar > ul > li[data-format="list"] {
  order: -2;
}
.formatting-bar > ul > li[data-format="strikethrough"] {
  order: -1;
}
.formatting-bar > ul > li[data-format="emoji-add-emoji"] {
  order: 1;
}

[PitaJ]

@yariplus probably the best way to select is with the data-format attribute

[TLINDEN]

@yariplus doesn't work unfortunately. I tried it with the numbered items, since I run multi language, so ordering by title may not work anyway.

[yariplus]

@tlinden fixed it. Needed an important on the display. As PitaJ says, use the data-format, it is not language specific.

[TLINDEN]

Ok, changed it to data-format, but nothing changes. Do I need to restart? Browser reload has no effect.

Update: I restarted, and cleaned all browser history, cookies etc, doesn't change

[TLINDEN]

Ok, I forgot the "important". Now it works! Wow, love it, Thanks a lot!!!

[PitaJ]

@tlinden You don't need !important, you just need more specificity.

The following arranges the composer buttons for this forum in alphabetic order:

.composer .formatting-bar .formatting-group {
  display: inline-flex;
}

.composer .formatting-bar .formatting-group [data-format="bold"] {
  order: 0;
}
.composer .formatting-bar .formatting-group [data-format="canned-responses"] {
  order: 1;
}
.composer .formatting-bar .formatting-group [data-format="emoji-add-emoji"] {
  order: 2;
}
.composer .formatting-bar .formatting-group [data-format="gif"] {
  order: 3;
}
.composer .formatting-bar .formatting-group [data-format="italic"] {
  order: 4;
}
.composer .formatting-bar .formatting-group [data-format="link"] {
  order: 5;
}
.composer .formatting-bar .formatting-group [data-format="list"] {
  order: 6;
}
.composer .formatting-bar .formatting-group [data-format="picture"] {
  order: 7;
}
.composer .formatting-bar .formatting-group [data-format="picture-o"] {
  order: 8;
}
.composer .formatting-bar .formatting-group [data-format="strikethrough"] {
  order: 9;
}
.composer .formatting-bar .formatting-group [data-format="upload"] {
  order: 10;
}
.composer .formatting-bar .formatting-group [data-format="zen"] {
  order: 11;
}

You can clean it up by using less, which does work in the ACP:

.composer .formatting-bar .formatting-group {
  display: inline-flex;

  [data-format="bold"] {
    order: 0;
  }
  [data-format="canned-responses"] {
    order: 1;
  }
  [data-format="emoji-add-emoji"] {
    order: 2;
  }
  [data-format="gif"] {
    order: 3;
  }
  [data-format="italic"] {
    order: 4;
  }
  [data-format="link"] {
    order: 5;
  }
  [data-format="list"] {
    order: 6;
  }
  [data-format="picture"] {
    order: 7;
  }
  [data-format="picture-o"] {
    order: 8;
  }
  [data-format="strikethrough"] {
    order: 9;
  }
  [data-format="upload"] {
    order: 10;
  }
  [data-format="zen"] {
    order: 11;
  }
}

[yariplus]

@pitaj I like feeling important.