Laura Riegel / Posted 4.26.2011
It’s been almost two months since I built my first MojoMotor site. Throughout the process, I have learned a few tips and tricks to help me get by. Some of the tips I’d consider more as lifesavers.
In fact, this particular one is really more of a life preserver. Strap this baby on and stay afloat by adding your own styles to the WYSIWYG editor.
Normally the MojoMotor editor looks similar to Figure 1, with only the default editing features.
To add your own customized styles like in Figure 2, follow the steps below.
First, open the ckeditor.php file, which is located inside the system > mojomotor > config folders.
In the file, add 'Styles' to the wysiwyg_toolbar array.
Once the site’s page is refreshed, you can see the added Styles drop-down menu with its default styles.
To include your own customized styles, I recommend first adding the classes to the site’s style sheet. For example, if you want the client to have access to defined font sizes and a customized arrow list style, your CSS will look similar to Figure 5.
When opened, it will look like Figure 6.
By referencing CKSource Docs, you can remove the default styles and add the various inline and block classes.
CKSource Docs distinguishes how to register block and inline elements so make sure you are following the right example.
To implement the font sizes and arrow list style from the example we are working with, the code should look like Figure 7.
Notice how the Arrow List is set up as a block element, and the various font sizes are inline elements. Inline classes work by adding a <span>. If you want to add a style to a <ul> , <p> or any other block element, you must list that style using the Block-level styles and make sure your element is defined as the correct block element. For example, the Arrow List element is set to a <ul> .
The final result is a drop-down menu with customized styles.
Notice how the Arrows List style isn't showing up in the drop-down menu. The reason is block styles won’t appear in the Styles menu unless you have that particular block element selected in the editor. In order to use the Arrow List class, you first have to make a list. Then once the list is selected/highlighted, the Arrow List class will show up in the Styles drop-down menu.
Once applied, the client has some nice customized features to use in the WYSIWYG Editor.
Everyone flounders once in awhile, but it’s nice to have a few tips and tricks up your sleeve to help keep you afloat. We’ve got plenty more to share – we’ll help you keep your code buoyant.
Print and Web Designer at Q Digital Studio
Laura Riegel is Q Digital Studio's print and web designer, originally hailing from Kentucky. She happily calls Colorado home, as Denver perfectly suits her hobbies of skiing, camping and mountain biking. Equal parts creative and practical; Laura loves the challenges and joys of both designing and coding.