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.