Styling MagicEdit Elements (or White Labeling Everything)

Notes: White labeling and custom styling is available on paid accounts only. MagicEdit elements are the buttons and controls visible to the Content Manager after logging in, not general site styles. Any other styles applied to the site that are not intended solely for MagicEdit functionality should be maintained in their own CSS file(s).

Don't like the way MagicEdit looks when editing your web pages? We're wounded!

Okay, so maybe you want it to match the design of your site, or remove the MagicEdit branding entirely. Completely understandable. We've made it very easy to change the base styles of the MagicEdit elements that are inserted into your page when you are logged in as a content manager.

If you view the source of your page, you'll see that there is a stylesheet called "me_style.css" being inserted into the head. To override any of the styles in that file, simply create another "me_style.css" file and link it from inside the head of your document. If MagicEdit sees that file, it will put our file just before it to allow you to override things in it.

It's that easy!

Default Stylesheet

Click here to view the default MagicEdit stylesheet.

Downloading that file and modifying it is a good place to start, and will also give you an idea about what the classes and ids of the MagicEdit elements are.

By design, MagicEdit places buttons after the region specified by the <magicedit> (or <magicrepeat>) tags. These buttons are designed to take up no space in the site, but there are cases where the positioning is non-ideal for your application.

Inspecting the source code using a tool like Firebug while logged in as a site manager is very useful in debugging issues with placement of MagicEdit buttons. You may need to tweak the me_style.css file to make it work most effectively in your site.