I'd like to be able to decide what categories users are automatically subscribed to. I know there's a plugin to prevent new users from automatically subscribing to all categories, but I'd prefer a lot more granularity than that.
Help?
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:
Is it possible to change the order of list items using CSS3? For example, if a list is coded in HTML in 1,2,3,4,5 order, but I want it to show in 5,1,2,3,4 order. I'm using a CSS overlay to modif...
Stack Overflow (stackoverflow.com)
.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
@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;
}
}