Forums

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 :)
//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
TheRealSean