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.
Image Source: Marcus Hansson
Print and Web Designer at Q Digital Studio
Laura Riegel is Q Digital Studio's print and web designer, hailing from Kentucky. She did her undergraduate at Asbury College where she studied Media Communications with an emphasis on Graphic Design. After a few video production internships, Laura discovered her true love was graphic design. She hasn't looked back since.
Growing up as a military brat, she moved around a lot, but now Denver is home to Laura and her husband Mark. Denver perfectly suits Laura's hobbies of skiing, camping and mountain biking. Not only does she love the Denver environment at large, but loves her Denver working environment, splitting her time between commuting to Q Digital Studio and working from home.
Laura is Ã¢ÂÂdisciplined by nature,Ã¢ÂÂ and when she has a list of stuff that has to get done, she gets it done. Equal parts creative and practical; Laura loves the challenges of designing and coding. Most importantly, Laura enjoys Ã¢ÂÂworking with clients, seeing the direction they want to go, and interpreting their desires.Ã¢ÂÂ For Laura, it's all about reaping the benefits of putting out good quality work.