How do I apply a special style class to content on the site?
This article will show you how to use special CSS style classes within the body of your articles, blog posts, or any other content on your site. First, check with your website administrator for the CSS class names you will need to do the layout / style changes you want to see on the site. If these were not set up when your website was built, these can be added by updating your domain.css file found in the Media Manager.
You must know the CSS class to follow the instructions in this article.
This article covers both updating styles within the WYSIWYG editor and in HTML.
1. Here's an example of a CSS style class applied to text within an article. In this case, the style applied was for captions.
2. To apply a special style class to your text, highlight the text or images you wish to style in the WYSIWYG.
2.1. In the WYSIWYG, highlight the block of text.
2.2. For captions, type your caption or photo credit immediately after the photo.
3. After you select the content, click the code icon.
4. Type the name of the CSS class for your caption. For example: ibj-mugRight, as shown below. Your CSS class will be different.
The CSS class must exist in either your domain.css file or on your website’s default styles for it to display as intended.
5. Select OK and confirm the addition.
6. Continue editing your article or blog post. Remember to Save Changes to save your work.
7. If you prefer to edit in HTML (outside of the WYSIWYG), surround the content with a DIV tag and assign the appropriate class from your CSS (indicated by an arrow below).
8. IMPORTANT: The CSS class MUST exist in either your domain.css file or on your website’s default styles for it to display as intended.
Not sure if it is or not?
Look to your domain.css file. Learn more on updating your CSS styles for your site.
9. To preview your article with the newly applied style to the selected content, scroll down and click Preview.
Your article will open in a new tab or window.
10. To edit your text or caption/photo credit, simply edit the text in the WYSIWYG editor as it appears.
10.1. Or edit the text within the HTML between the <DIV> tags.
