Modern Campus Catalog Emblem Modern Campus CMS Emblem Modern Campus Curriculum Emblem Modern Campus Involve Emblem Modern Campus Lifelong Learning Extended Education Emblem Modern Campus Message Emblem Modern Campus Navigate Emblem Modern Campus Schedule Emblem Modern Campus Virtual Tours & Maps Emblem Modern Campus Lifelong Learning Workforce and Community Emblem Site Menu Open Site Menu Close

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>.

A dropdown list of text styles: "Emphasis," and "Fancy." "Emphasis" is written in large, bold blue text, and "Fancy" is written in a cursive script.

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,
    font-size: 36px;
    font-family:Palace Script MT, cursive;
  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

By continuing to use this site, you agree to the storing of first- and third-party cookies on your device to enhance site navigation; analyze site, product, and service usage; and assist in our marketing and promotional efforts. Cookie Policy