Skip to content Skip to navigation

Adding Styles to Stanford WYSIWYG

The Stanford WYSIWYG gives the content editor multiple style options to modify the look of their site's content.  Suppose you want the ability to float an image right or left in the content region but it's not in the list of Styles. You can create a CSS Injector rule to target that specific content then make this style available to the WYSIWYG Styles drop-down list. To tackle this example, let's go step-by-step to add the ability to float images right or left in the content region within the WYSIWYG.

Create a CSS Injector rule for your class name

In the Stanford Sites environment, we utilize the CSS Injector module to add CSS to a site.

  1. Ensure that the CSS Injector module is enabled
  2. From Configuration > Development > Select CSS Injector
  3. Click Create a new rule
  4. Add CSS rule(s)
.float-right {
   float: right;
   margin-bottom: 15px;
   margin-right: 0;
}

.float-left {
   float: left;
   margin-bottom: 15px;
   margin-right: 15px;
}

Add CSS styles to text formats

Text formats define how editor environments behave. We'll incorporate the CSS in the "Content Editor Text Format".

  1. From Configuration > Content authoring > Text formats > Select Content Editor Text Format
  2. In the Filter settings > WYSIWYG Filter horizontal tab > Rules for Class Names, add “float-right” and “float-left”
  3. Click Save configuration

Add CSS styles to the WYSIWYG

  1. From Configuration > Content authoring > Select Wysiwyg profiles
  2. Edit the Content Editor Text Format
  3. In the CSS section > CSS classes, add Image Right=p.float-right and Image Left=p.float-left on separate lines
  4. Click Save

Check out and use your new Styles in the WYSIWYG drop-down list!

Categories: 

Comments

Hi Cynthia, Thanks for the enlightening article. I have been using WYSIWYG editor for quite a while now to create my company newsletter. And the ability to float an image right or left in the content region will come handy. I'll definatly try this in my next newsletter. Thanks.

Add new comment