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:
Navigate to the page you'd like to edit
Click the Edit button
Scroll to just below the Body or other WYSIWYG text area
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.
Add the image to the text area
Click on the image to select it
From the Styles dropdown menu, select Image Right
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.