Adding Custom CSS Style Options to the Mura CMS Content Editor Toolbar
If you would like to add your custom CSS styles to the Mura CMS content editor toolbar, also known as a the FCKeditor toolbar, then read on!
First, let's make sure we're all on the same page. If you have access to the "Admin" area of a Mura CMS site, you can login, go to the Site Manager and select a page to edit content on. In the 'Content' area, a toolbar containing buttons to format the text, insert pictures, etc. runs across the top. This is the toolbar to which I'm referring. Here you will find a 'Style' dropdown.
This dropdown is controlled by an .XML file located under /{siteid}/includes/themes/{themename, i.e., 'merced'}/css/fckstyles.xml. Here is the basic content of that file:
<?xml version="1.0" encoding="utf-8" ?>
<Styles>
<Style name="Align Image Left" element="img">
<Attribute name="class" value="left" />
</Style>
<Style name="Align Image Right" element="img">
<Attribute name="class" value="right" />
</Style>
<Style name="Intro" element="p">
<Attribute name="class" value="intro" />
</Style>
<Style name="Centered Text" element="p">
<Attribute name="class" value="center" />
</Style>
<Style name="Call to Action" element="a">
<Attribute name="class" value="callToAction" />
</Style>
<Style name="Call to Action" element="li">
<Attribute name="class" value="callToAction" />
</Style>
</Styles>
In order to get your custom styles to appear in the dropdown, we would then obviously need to edit this particular file. To test this out, let's add some <Style> elements to this file.
<Style name="Paragraph" element="p" />
<Style name="Heading 1" element="h1" />
<Style name="Heading 2" element="h2" />
<Style name="Heading 3" element="h3" />
<Style name="Heading 4" element="h4" />
<Style name="Heading 5" element="h5" />
<Style name="Heading 6" element="h6" />
<Style name="Italic" element="em" />
<Style name="Blockquote" element="blockquote" />
<Style name="Preformatted Text" element="pre" />
Be sure you place these just after the opening <Styles> tag! Save the file, upload it to your site and navigate to your Admin > Site Manager, then select a page to edit.
Hey! Where's My Styles?
The first thing you'll probably notice is that nothing has changed. If this is the case, trust me, your changes are there, you just can't see them yet. Unfortunately, a <CTRL> + <F5> won't be enough to remedy this situation either, and this is probably where some people have thrown up their hands in frustration. Don't worry, we'll get this fixed in a snap.
The problem is merely that the contents of the XML file have been cached. So, let's 'officially' clear the cache, shall we? In Firefox, at the top of the Firefox window, click on the Tools menu, and select Options. Select the Advanced panel, then click on the Network tab. In the Offline Storage section, click the Clear Now button. Then click the OK button to close the Options window. If you're using Internet Explorer, then use Firefox. Just kidding ... but seriously, use Firefox.
If you're like me and have taken advantage of the 'Web Developer' toolbar add-on for Firefox, it's even simpler. Just click the Miscellaneous button on the toolbar, hover over Clear Private Data, then click Cache. That's it!
Show Me More!
So now you should see your 'new' styles appearing in the style dropdown. However, you want more don't you? Of course you do. Luckily, there is some pretty good documentation on the CKEditor site at http://docs.cksource.com/FCKeditor_2.x/Developers_Guide/Configuration/Styles. There you should be able to learn more about the XML file, Style nodes, Attribute nodes, "Object" elements, and more.
I hope this helps!
