Skip to Content

Adding Custom Styles

New styles can be added to the "Styles" dropdown in the 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: "Center Text," "Apply Button", "Link-to-IFrame," "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 used 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 file 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.
  2. Open the specified CSS file and define the styling you want to apply.
    .emphasis{
    font-size: 36px;
    font-weight:bold;
    color:#1e73a7
    }
    .fancy{
    font-family:Palace Script MT, cursive;
    font-size:32px;
    }
    
    Save and publish the file.
  3. Locate the CSS file that your pages use to style the WYSIWYG editor. This is found in the source code of individual pages, within the editable region. Look for the csspath attribute and the file it points to:
    <ouc:editor csspath="/_resources/ou/editor/wysiwyg.css" cssmenu="/_resources/ou/editor/styles.txt" />
    
    Most editable regions all use the same 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.
  4. Add in the same CSS from step 2.
  5. Save and publish the file.
  6. Find the styles.txt file; it 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.
  7. 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.
    .emphasis Emphasis block
    .fancy Fancy
    
    To make a style block-level, after the friendly name enter another Tab space and the word block.
  8. Save the file; it does not need to be published.
  9. 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