TinyMCE Custom Content Block Editor Bar - Style Error
Permalink
Since the 5.4.2 Update all the TinyMCE custom Content Editor Bars have been broken,
Im trying to have a play with the css and replace the existing style and think I have got it? but could do with it being tested
First here is a look at the old and new implementation of the editor.
I assume this has been done as the editor is now used in the Composer as a full page editor, the long sprite was not long enough :)
I copied my ccm.forms.css into my root folder.
Replacing all instances of "../" with "/concrete/"
then around Line 200 (If its on line 191 its the old ccm.form.css use the ccm.forms.css from the updates folder)
replace
with
Now all your older content editors should look the same.
Regards
Sean
Im trying to have a play with the css and replace the existing style and think I have got it? but could do with it being tested
First here is a look at the old and new implementation of the editor.
I assume this has been done as the editor is now used in the Composer as a full page editor, the long sprite was not long enough :)
//Old Version <div class="ccm-editor-controls"> <div class="ccm-editor-controls-right-cap"> <ul><li>..stuff</li></ul> </div> </div>
//new version <div class="ccm-editor-controls-left-cap"> <div class="ccm-editor-controls-right-cap"> <div class="ccm-editor-controls"> <ul><li>..stuff</li></ul> </div> </div> </div>
I copied my ccm.forms.css into my root folder.
Replacing all instances of "../" with "/concrete/"
then around Line 200 (If its on line 191 its the old ccm.form.css use the ccm.forms.css from the updates folder)
replace
/* editor */ div.ccm-editor-controls-right-cap { background: transparent url(../images/bg_editor_concrete_controls_cap_right.png) no-repeat right; } div.ccm-editor-controls-left-cap { background: transparent url(../images/bg_editor_concrete_controls_cap_left.png) no-repeat left; } div.ccm-editor-controls {margin: 0px 13px 0px 39px; background: transparent url(../images/bg_editor_controls_middle.png) repeat; padding: 0px 18px 8px 0px} div.ccm-editor-controls ul {display: block; list-style-type: none; height: 24px; margin: 0px !important; padding: 0px;} div.ccm-editor-controls ul li {float: left; font-size: 10px; color: #333; margin: 0px 20px 0px 0px !important; list-style-type: none; padding: 0px} div.ccm-editor-controls ul li a {color: #333; text-decoration: none; display: block; padding: 10px 0px 10px 12px; background: transparent url(../images/bg_editor_concrete_caret.png) no-repeat scroll left 14px; } div.ccm-editor-controls ul li a:hover {text-decoration: underline}
with
/* Old editor */ div.ccm-editor-controls {background: rgb(250,250,250) url(/concrete/images/bg_editor_concrete_controls_long.png) no-repeat left scroll; text-align: right; padding:0px; } div.ccm-editor-controls div.ccm-editor-controls-right-cap { background: transparent url(/concrete/images/bg_editor_concrete_controls_cap_right.png) no-repeat right; padding: 0px 18px 8px 40px } div.ccm-editor-controls ul {display: block; list-style-type: none; height: 24px; margin: 0px !important; padding: 0px;} div.ccm-editor-controls ul li {float: left; font-size: 10px; color: #333; margin: 0px 20px 0px 0px !important; list-style-type: none; padding: 0px} div.ccm-editor-controls ul li a {color: #333; text-decoration: none; display: block; padding: 10px 0px 10px 12px; background: transparent url(../images/bg_editor_concrete_caret.png) no-repeat scroll left 14px; } div.ccm-editor-controls ul li a:hover {text-decoration: underline} /* New editor */ div.ccm-editor-controls-left-cap div.ccm-editor-controls-right-cap { background: transparent url(/concrete/images/bg_editor_concrete_controls_cap_right.png) no-repeat right; } div.ccm-editor-controls-left-cap { background: transparent url(/concrete/images/bg_editor_concrete_controls_cap_left.png) no-repeat left; } div.ccm-editor-controls-left-cap div.ccm-editor-controls {margin: 0px 13px 0px 39px; background: transparent url(/concrete/images/bg_editor_controls_middle.png) repeat; padding: 0px 18px 8px 0px} div.ccm-editor-controls-left-cap div.ccm-editor-controls ul {display: block; list-style-type: none; height: 24px; margin: 0px !important; padding: 0px;} div.ccm-editor-controls-left-cap div.ccm-editor-controls ul li {float: left; font-size: 10px; color: #333; margin: 0px 20px 0px 0px !important; list-style-type: none; padding: 0px} div.ccm-editor-controls-left-cap div.ccm-editor-controls ul li a {color: #333; text-decoration: none; display: block; padding: 10px 0px 10px 12px; background: transparent url(/concrete/images/bg_editor_concrete_caret.png) no-repeat scroll left 14px; } div.ccm-editor-controls-left-cap div.ccm-editor-controls ul li a:hover {text-decoration: underline}
Now all your older content editors should look the same.
Regards
Sean
