Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Customising the CMS /

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

How to set the HTML editor width?

Go to End

2 Posts   3095 Views


Community Member, 102 Posts

22 April 2010 at 8:41am

typography.css is used to make the styles the same in the HTML editor as the site itself, so it is more WYSIWYG.

However, to make it completely WYSIWYG, the editor width should match the column width of the website, so the text wraps in the same place. How?

In typograpgy.css, the editor width can be set with:

.htmleditor {
width: 321px;

The HTML editor control incorporates the field name, so if there are multiple fields with different widths, they can be set with:

#ContentLeft.htmleditor {
width: 321px;
#ContentRight.htmleditor {
width: 900px;

However, I can't get the editor to shrink below the width of the toolbar, or expand greater than the width of the page (e.g. with a scrollbar).

Any ideas?



Community Member, 24 Posts

18 June 2010 at 6:35am

You probably got it sorted out already:
but let the answer be here just for sake of other who got this problem :)

In themes/yourtheme/css/editor.css

add this:

body.mceContentBody {
	background:#cccccc url(../images/content_back.png) repeat-y -15px 0; /* will change background color / can use image also*/
	width:660px;	/*set width to what you like the text wrap */