I have been thinking about this and I think I will move all of my "Format Elements" into the "Styles" dropdown.
And because the Styles is created from <div>s & <span>s, I should be able to style this dropdown myself.
Obv. this needs work, but I'm happy that it's feasible.
Would it be possible to change the ids like this "mce_58" to use the title of the span?
So for the following,
<div id="mce_58" class="mceMenuItem mceMenuItemEnabled mceEnabled mceSelected" role="option" aria-disabled="false" aria-pressed="false" aria-checked="true" tabindex="-1"><span class="mceText" title="bg-purple" aria-label="bg-purple" style="font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; text-decoration: none solid rgb(36, 32, 32); text-transform: none; background-color: rgb(106, 95, 150); color: rgb(36, 32, 32);">bg-purple</span></div>
<div id="mce_58" ...
would be
<div id="mce_bg-purple" ...
Thanks very much
If anybody else is interested, this is the css I used in
/administrator/templates/isis/css/custom.css
to get the attached layout
Your ids will change according to the styles you have in your dropdown.
You could use a grid instead of flex to place each div exactly in its own position.
#jform_articletext_styleselect {
min-width: 120px;
max-width: 120px;
overflow: hidden;
}
#menu_jform_articletext_jform_articletext_styleselect_menu {
width: 80% !important;
}
#menu_jform_articletext_jform_articletext_styleselect_menu_items {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column wrap;
flex-flow: column wrap;
overflow: scroll;
}
#menu_jform_articletext_jform_articletext_styleselect_menu_items > div {
-webkit-box-flex: 0;
-ms-flex: 0 0 50px;
flex: 0 0 50px;
}
#mce_104 {
display: none;
}
#mce_35::before,
#mce_41::before {
color: white;
background: grey;
display: block;
padding: 3px;
border-right: 5px solid white;
}
#mce_35::before {
content: "Block Elements";
}
#mce_41::before {
content: "BG Colours";
}
#mce_41 ~ div span {
font-size: 0 !important;
}
#mce_74 ~ div span {
font-size: 13px !important;
}