USF Student laughing while working on laptop

Text Styles

View the USF CSS Guide for more style details »

Ektron Paragraph Style Menu

Apply these styles by typing in your text, highlighting the text, and then selecting any of these options within the Ektron paragraph style menu editor.


Heading and subheadings are used to break up text. Make use of meaningful subheadings to guide a reader through the page content. Along with short paragraphs, breaking up a page with subheadings allows a Web reader to quickly determine what information is most important for her needs.

Heading 1 and Page Title

Heading 2

This is a serif font and same size as heading 3

Heading 3

This is a sans-serif font

Heading 4

Heading 5

 


Apply any of these styles using the Ektron paragraph style menu

Ektron Apply Styles Menu


Text Intro Big

Used only for opening paragraph on a site home page

Text Intro

Use for opening paragraph on interior pages or 2nd paragraph of a site home page

Explore More:
text_callout

The text callout aligns to the right and allows you to highlight links and important information. It is best to set up the text on the page before adding in this feature.

text_callout_yellow

This style is used in the heading explanation at the top right of this page. A yellow box is created and spans 50% of the page. This should be used for special featured text, details, explanations, or calls to action within the body content.

text_callout_green

This style creates a green box that expands the full width of the page. Use this feature to break up content and to call special attention to your information.

This paragraph is contained within a green box because we are using the "text_box" style. The box will fill the entire width of the main body of the page. The background color is: E5EEEB.

text_two_column

This style creates a two column layout for you to use. See example and code below.

text_three_column

This style creates a three column layout. See example and code below.

note

Smaller font size than the body text. Use this to make a note.

clear

Use this to force a clean break in text and to stop content items from flowing around each other.

table format and options

A table should be used for tabular data only and never specify a fixed-width size. The default display has alternating gray and white rows. Adding the class of “layout” removes all table decoration and is useful for page layout and formatting. Class “odd” applied to a table row will remove the gray background, but leave the box outlines.

Name Ext
Joe 3333
Sally 3334
text_column_heading

Creates an upper case, lighter gray font to be used as a Column Heading like in the text_two_column example below.

left/right

Apply these options ONLY TO IMAGES that are contained within the body of a page. The images will align to the left or right and will have padding automatically applied to keep away from the edge of your text.

 

Other Styles

These styles must be manually entered in the HTML code view.


Call to Action Link


View the USF CSS Guide for more style details »

This link is bold, not underlined and has arrows. Sample code:

<h5>
   <a href="/uploadedFiles/Web_Services/redesign/USF_CSS_guide.pdf">
   View the USF CSS Guide for more style details »</a>
</h5>


Colored Text Boxes

There are a variety of color options for text boxes which should be used to break up your content and call attention to specific information. By default the boxes will fill the full width of the page, however you can also specify a width of either 30% or 50% and will align to the right of the page.

You can use "text_box red". Link text will automatically match the color.  Background color is F4E0DF. 
or "text_box blue" with this link text and background color is: D9E3E9.
or "text_box grey" with this link text and background color is: eee.
or "text_box violet" with this link text and background color is: DFDCE8.
or "text_box brown" with this link text and background color is: E7E1DD.
or "text_box white" with this link text and background color is: FFFFFF.
Sample Colored Box Code

<div class="text_box red">
     <h2>Fact Book</h2> Our 55-acre campus sits atop a hill next to Golden Gate Park, overlooking downtown San Francisco and the Pacific Ocean.
</div>

USF Fact

Our 55-acre campus sits atop a hill next to Golden Gate Park, overlooking downtown San Francisco and the Pacific Ocean.

USF Fact

Our 55-acre campus sits atop a hill next to Golden Gate Park, overlooking downtown San Francisco and the Pacific Ocean.
Colored Box Code in a Smaller Size

You can also make any of these smaller, filling 30% or 50% of the content area, by adding "fifty" or "thirty". The example to the right uses "text_box red thirty".

<div class="text_box red thirty">
     <h2>Fact Book</h2> Our 55-acre campus sits atop a hill next to Golden Gate Park, overlooking downtown San Francisco and the Pacific Ocean.
</div>

Colored Box Code Aligned Left

USF Fact

Our 55-acre campus sits atop a hill next to Golden Gate Park, overlooking downtown San Francisco and the Pacific Ocean.


The boxes by default align to the right, but you can add "left" to the code above to make the box align to the left. The sample code shows a red colored box spanning 50% of the page and aligning to the left.


Sample code:

<div class="text_box red fifty left">
     <h2>Fact Book</h2> Our 55-acre campus sits atop a hill next to Golden Gate Park, overlooking downtown San Francisco and the Pacific Ocean.
</div>


Example display:

If you use "text_box white noborder thirty", the text will float in an invisible box, like this.
White Box Code With No Border

<div class="text_box white noborder thirty">
If you use "text_box white noborder thirty", the text will float in an invisible box, like this.
</div>


<ul class="pdf">
<li><a href="#">Anthem Blue Cross Group Membership Change Form</a><br /></li>

<li class="doc"><a href="#" target="_self">Anthem Blue Cross Wellpoint Rx Enrollment Form</a><br />Feel free to add further details to describe the link.</li>

<li class="xls"><a href="#">Anthem Blue Cross Prescription Claim Form</a></li>

<li class="bullet"><a href="#">Link1</a></li>
<li class="bullet"><a href="#">Link2</a></li>
<li class="bullet"><a href="#">Link3</a></li>

<li class="vid"><a href="#">Check out our YouTube video</a></li>

<li class="pics"><a href="#">See the slide show</a></li>

<li class="article"><a href="#">Read this article</a></li>
</ul>


Bulleted List Styles

Use the "pdf" class to an ordered OR unordered list to display pdf icons instead of bullets. You can also apply the "doc", "xls", "ppt", "vid", "pics" or "article" class to a single item within that list if you need it:




Two Column Text Layout

<div class="text_two_column">
      <h4 class="text_column_heading">First Column Heading</h4>
      <p>Here is the first column's text...</p>
</div>
<div class="text_two_column">
       <h4 class="text_column_heading">Second Column Heading</h4>
       <p>Here is the second column's text...</p>
</div>
<div class="clear"></div>

First Column Heading

Lorem ipsum dolor sit amet, hendrerit cras laboris, suspendisse luctus ultricies, maecenas sapien ut. Porttitor a sit est accumsan, nonummy feugiat morbi lorem amet eget eu, augue donec. Nullam nunc lorem tellus natoque duis, libero volutpat nibh pharetra a eget etiam, cursus ullamcorper, mollis a mus sem.

Second Column Heading

Urna quam lobortis bibendum magna suspendisse integer, tristique morbi suscipit amet mauris nec. Id aliquam viverra est pulvinar, laoreet duis integer libero, vestibulum eget. Dictumst dolor vitae malesuada mi. A in vestibulum sapien eros, lacus sit dignissim suscipit at vitae, velit scelerisque mi. Dolor ipsum massa, venenatis ut vitae cursus voluptatibus vitae.




Three Column Text Layout

<div class="text_three_column">
   <h4 class="text_column_heading">First Column Heading</h4>
      <p>Urna quam lobortis bibendum magna suspendisse integer, tristique morbi 
      suscipit amet mauris nec. Dolor ipsum massa, venenatis ut vitae cursus 
      voluptatibus vitae.
      </p>
</div>
<div class="text_three_column">
   <h4 class="text_column_heading">Second Column Heading</h4>
      <p>Urna quam lobortis bibendum magna suspendisse integer, tristique morbi 
      suscipit amet mauris nec. Dolor ipsum massa, venenatis ut vitae cursus 
      voluptatibus vitae.
      </p>
</div>
<div class="text_three_column">
   <h4 class="text_column_heading">Third Column Heading</h4>
      <p>Urna quam lobortis bibendum magna suspendisse integer, tristique morbi 
      suscipit amet mauris nec. Dolor ipsum massa, venenatis ut vitae cursus 
      voluptatibus vitae.
      </p>
</div>
<div class="clear"></div>

First Column Heading

Urna quam lobortis bibendum magna suspendisse integer, tristique morbi suscipit amet mauris nec. Id aliquam viverra est pulvinar, laoreet duis integer libero, vestibulum eget. Dictumst dolor vitae malesuada mi. A in vestibulum sapien eros, lacus sit dignissim suscipit at vitae, velit scelerisque mi. Dolor ipsum massa, venenatis ut vitae cursus voluptatibus vitae.

Second Column Heading

Urna quam lobortis bibendum magna suspendisse integer, tristique morbi suscipit amet mauris nec. Id aliquam viverra est pulvinar, laoreet duis integer libero, vestibulum eget. Dictumst dolor vitae malesuada mi. A in vestibulum sapien eros, lacus sit dignissim suscipit at vitae, velit scelerisque mi. Dolor ipsum massa, venenatis ut vitae cursus voluptatibus vitae.

Third Column Heading

Urna quam lobortis bibendum magna suspendisse integer, tristique morbi suscipit amet mauris nec. Id aliquam viverra est pulvinar, laoreet duis integer libero, vestibulum eget. Dictumst dolor vitae malesuada mi. A in vestibulum sapien eros, lacus sit dignissim suscipit at vitae, velit scelerisque mi. Dolor ipsum massa, venenatis ut vitae cursus voluptatibus vitae.