Reorder default composer icons?

General Discussion
  • Hi,

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

    best,
    Tom

  • 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;
    }
    
  • @yariplus probably the best way to select is with the data-format attribute

  • @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.

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

  • 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 😞

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

  • @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;
      }
    }
    
    
  • @pitaj I like feeling important. 😉

  • inspiringI inspiring referenced this topic on


Suggested Topics