Adding Custom Styles to the WYSIWYG Editor

Add new styles to the "Styles" dropdown in the What You See Is What You Get (WYSIWYG) toolbar, which are then also used for the "Class" dropdown available when inserting links, images, and media on pages. These styles can be block-level or span-level. New styles require a corresponding class defined in your website's CSS files.

The following steps use two example classes. One is named emphasis and is a block-level style, applied to <p> tags. The second is fancy and is applied inline with a <span>.

StepsLink to this section

Defining the CSS for the style happens in two separate locations. One is in the CSS that affects your live site, which styles the formatted text on the actual web pages. The other is the CSS that styles the WYSIWYG editor, which applies the formatting to the both the text in the editable region and the styles dropdown itself.

1. Locate the CSS file that styles your live site; you may very well have several of these. Any of these files can be used.
   • CSS files are commonly located in the _resources folder.
2. Open the specified CSS file and define the styling you want to apply. For example,
   

   .emphasis{
   font-size: 36px;
   font-weight:bold;
   color:#1e73a7;
   }
   .fancy{
   font-family:Palace Script MT, cursive;
   font-size:32px;
   color:#000000;
   }
   

3. Save and publish the file.
4. Navigate to Content > Pages.
5. Click the file name for a page.
6. Click Source.
7. Click Find/Replace.
8. Type to find csspath and the file it points to.
   

   <ouc:editor csspath="/_resources/ou/editor/wysiwyg.css" cssmenu="/_resources/ou/editor/styles.txt" />
   

   • Most editable regions use one CSS file, but if they don't and you want the style to be available in all editable regions, you must add it to each CSS file.
9. Navigate to the CSS file referenced by csspath.
10. Add the same CSS from Step 2.
11. Save and publish the file.
12. Find the styles.txt file.
    • This should be in the same folder as the CSS you're modifying. If it doesn't exist, you can also create a blank TXT file.
13. For each style you want to add, on its own line, enter the class selector, a Tab space, and then the friendly name that appears in the "Styles" dropdown.
    
    • To make a style block-level, after the friendly name enter another Tab space and the word block.
    • You can also enter chained classes here, for example .fancy extra--fancy. Use only one period at the beginning and space-separate the classes.
      

      .emphasis Emphasis block
      .fancy Fancy
      

14. Save the file.
    • It does not need to be published.
15. Open an editable region on a page and check the "Styles" dropdown to see your new style.

Some implementations might use the @import rule (as shown below) to define the CSS for the editor from the CSS for the published site. In this case, it would only be necessary to update the CSS in the main file.

@import url('/_resources/css/foundation.min.css);
@import url('/_resources/css/styles.css');
@import url('/_resources/css/interior.css')' 

⇐ Return to Tutorials