Reorder default composer icons?



  • Hi,

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

    best,
    Tom


  • Community Rep

    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;
    }
    

  • Global Moderator

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


  • Community Rep

    @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!!!


  • Global Moderator

    @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;
      }
    }
    
    

  • Community Rep

    @pitaj I like feeling important. 😉


 

Suggested Topics

| |