Creating a vertical line

Adding a vertical line to your webpage is a simple way to differentiate between text blocks or various content.

Our templates feature two different line styles:

  • 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 (html 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 html page update button from the bottom left of the HTML editor pop-up window
  6. Choose cascade's submit button to save and preview the html page

NOTE: When you choose update from 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:

Nation adopts SC bird flu response
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. 

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:

Nation adopts SC bird flu response
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.

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"> :

Column 1 content
What’s brewing in Caye Drapcho’s bioreactor may well be a fuel of the future. Drapcho, a biosystems engineer, is investigating a bacterium that produces hydrogen. The microbe is called Thermotoga neapolitana. And it has a taste for peaches, especially rotten ones.
Column 1 Content
What’s brewing in Caye Drapcho’s bioreactor may well be a fuel of the future. Drapcho, a biosystems engineer, is investigating a bacterium that produces hydrogen. The microbe is called Thermotoga neapolitana. And it has a taste for peaches, especially rotten ones.