How to create a vertical line

For the purposes of this how-to, we will coach you on creating a vertical line using a stylesheet class we provide in our templates.

There are two different line styles we offer:

• vlineleft (Creates a line on the left side of the text/image)
• vlineright (Creates a line on the right side of the text/image)

Here are the steps to add a vertical line in your content area (assuming there is already content on that page).

1. Navigate to the page you would like to insert a vertical rule and choose the "Edit" tab.
2. In the WYSIWYG editor's tool bar, choose the HTML edit button ()
3. Navigate to the areas of the content where you would like a vertical rule.
4. Add the following code around the object <div class="vlineleft"> ..... text/image ..... </div>
5. Choose the  from the bottom left of the HTML editor pop-up window
6. Choose to save and preview the html page

NOTE: When you choose Update form the HTML editor and return to the Edit screen, the vertical rule will not appear in the WYSIWYG editor. You will have to Submit your page and preview it in Cascade for the line to appear.

Examples of this code in use.

Vertical Line on the left of the paragraph:

This is the exact code that was used to create the above example: 

<div class="vlineleft">
<p><i>Nation adopts SC bird flu response</i><br />
A rapid response plan to control an outbreak of avian influenza is vital. The plan developed by Clemson poultry veterinarian Julie Helm for South Carolina producers has received national recognition by the American Veterinary Medicine Association. It is now promoted as a template for other states.</p>
</div>

Vertical Line on the right of the paragraph:

This is the exact code that was used to create the above example:

<div class="vlineright">
<p><i>Nation adopts SC bird flu response</i><br />
A rapid response plan to control an outbreak of avian influenza is vital. The plan developed by Clemson poultry veterinarian Julie Helm for South Carolina producers has received national recognition by the American Veterinary Medicine Association. It is now promoted as a template for other states.</p></div>

In a table, you would add the following code inside the <td> tag so it looks like <td class="vlineleft"> :