Skip to content Skip to navigation

Doing more with the editor, Part 1, adding CSS styles

Have you ever wanted to put a border on an image or highlight a link for more information in a text field? It is possible to configure the  Styles dropdown menu in your WYSIWYG editor to allow you to add styles to the content in a text field. If you don't know how to configure your Styles dropdown, here's how you can add multiple classes to an element using the HTML editor pane of the WYSIWYG.

Disable the WYSIWYG

To edit the HTML in a text area:

  1. Navigate to the page you'd like to edit

  2. Click the Edit button

  3. Scroll to just below the Body or other WYSIWYG text area

  4. Click on Disable-rich text

You should see the WYSIWYG disappear, and if any content was in the field you’ll see the HTML. To go back the WYSIWYG, click on Enable rich-text.

Adding classes to HTML elements

At Stanford Web Services, our themes support a variety of CSS classes which you can use in a text area. Some of these classes such as float-right are available through the WYSIWYG Styles dropdown menu. Other classes that are available in the theme, but not currently present in the Styles dropdown, such as border-simple must be applied directly to the HTML. 

Suppose you have an image that you want to have both a simple border and to have it float to the right. Here’s how to make that happen:

Add the float-right through the WYSIWYG

Taking advantage of the WYSIWYG, let’s start with the WYSIWYG enabled.

  1. Add the image to the text area

  2. Click on the image to select it

  3. From the Styles dropdown menu, select Image Right

Image of the styles dropdown menu

Add the border directly to the HTML

1.  Disable the WYSIWYG by clicking the Disable rich-text link below the field.

2.  Look for the line with your image. It’ll probably look something like:

<p class="float-right"><img src="https://swsblog.stanford.edu/imagename.png"/></p>

3.  Add the border class, border-simple, to this line. The result should be something like:

<p class="float-right border-simple"><img src="https://swsblog.stanford.edu/imagename.png"/></p>

4. Enable rich-text then scroll to the bottom and click Save.

Check out the results

You can see that the image has floated to the right, and if you look, you'll see a border around the image.

More CSS classes from Open Framework Style Guide

You can learn about our CSS classes such as float-right and border-simple  from our Open Framework style guide.
 

Categories: 

Comments

Thank you!