USF Student laughing while working on laptop

Code for Features

The following examples show the code for including boxes and special features in your pages.

Further examples can be found in the Text Styles section, or in the Advanced section.

Buttons

The button class is useful when you want to provide an obvious call to action. It works very well in body content areas and can be aligned using the "left" and "right" classes (see alignment below). It also works well in the right hand sidebar near quicklinks or within a Contact Us box.

Apply Now

The code looks like this:

<a class="button" href="http://www.usfca.edu">Apply Now</a>

You can also add the button class to a linked image to give it a drop shadow when hovered over:

Facebook Bar Button 150

<a href="http://www.facebook.com" title="Facebook button" target="_blank">
<img class="button" src="/uploadedImages/Images/Social_Media/linkedin_bar150.png" alt="Facebook button" title="Facebook button" />
</a>

Collapsing Menus

This entire page uses collapsing menus. It is useful for visually simplifying pages with large areas of supporting text. The text inside the collapse must be wrapped with a <span> tag but then can be formatted with regular text styles inside the span (ie: <p><h3><li>). H4 headers create the green bars. Be careful not to add any styles to the SPAN tags, or it will cause the collapse function will break. 

Variation: Adding the class of "opened" to the span tag will leave that collapsed section opened by default. Also, a link of "Show All" like at the top of this page can make all the collapse bars appear open by adding <div align="right"><a>Show All</a></div> after the opening <div class="collapse"> tag.

<div class="collapse">
  <h4><a>Heading 1</a></h4>
  <span class="opened"><p>CONTENT OF PAGE GOES IN THIS AREA. THIS ONE DEFAULTS TO OPEN.</p></span>
  <h4><a>Heading 2</a></h4>
  <span><p>CONTENT OF PAGE GOES IN THIS AREA.</p></span>
</div>


Contact Box

Contact Box

<div class="contact"><h3>Office of Admission</h3>
   <p>
   2130 Fulton St.<br />San Francisco, CA 94117<br />
   <a href="mailto:admission@usfca.edu">admission@usfca.edu</a><br />
   (415) 422-6563 or <br />1-800-CALL-USF<br /><br />
   <a title="Join Us On Facebook" href="http://www.facebook.com/USFAdmission"
   target="_blank"><img border="0"
   src="http://www.usfca.edu/uploadedImages/Images/Social_Media/facebook_bar150.png"
   alt="Facebook Bar Button 150" title="Facebook Bar Button 150" /></a>
   </p>
   <p>
   <a href="http://twitter.com/USFCA" title="Follow Us On Twitter">
   <img border="0" title="Twitter Bar Button 150" alt="Twitter Bar Button 150"
   src="/uploadedImages/Images/Social_Media/twitter_bar150.png" /></a>
   </p>
</div>

News Box

    <div class="block right">
        <div class="news">
            <a class="link_item_title" href="http://usf.usfca.edu/ca_prize/speakerseries.html">California Prize winner Daniel Lurie in Conversation</a><div class="more">
                <a href="http://usf.usfca.edu/ca_prize/speakerseries.html">story</a><a href="http://youtu.be/WRa6OMUYNT8">video</a></div>
        </div>
    </div>

Event Box

    <div class="block right">
        <div class="event">
            <a href="http://www.usfca.edu/centers/mccarthy/events">April 30</a> <a class="link_item_title" href="http://www.usfca.edu/centers/mccarthy/events">State of Black San Francisco: followup to the summit
                </a><a class="link_more" href="http://www.usfca.edu/centers/mccarthy/events">More Info »</a>
        </div>
    </div>

Note: if you are linking to an EMS/Master Calendar Event, you can add class="iframe" to the <a> anchor tags to make the event overlay the current screen. If the <a> anchor tag already has a class attribute in it, you need to add the iframe class to the current attribute, like so:
class="link_item_title iframe"

Advertisement Boxes

<div class="block">
     <div class="news red">
            <a class="link_item_title" href="#">Get your financial aid refund faster with direct deposit </a>
            <div class="more">
                <a href="#">find out more »</a></div>
     </div>
</div>

<div class="block">
     <div class="event yellow">
           <a href="#">SEARCH TOOLS</a>
          <a class="link_item_title" href="#" title="Use our search site to find a home »">Use our search site to find an apartment for rent</a><a class="link_more" href="#" title="visit site »">visit site »</a>
     </div>
 </div>

News and Event Boxes should always have a blue and green background color, which is the default, but if you'd like to use this feaure to advertise something else you can change the background color by adding "
yellow
red
purple
brown
grey

" to news or event class like this:
<div class="news red"> or <div class="event yellow">

Image with Text Rollover

Golden Gate Bridge
USF students and faculty are integral participants in our entrepreneurial, innovative city. Read More »

    <div class="block">
        <div class="image">
            <img alt="Golden Gate Bridge" src="/uploadedImages/Images/Approved/150x150/ggbridge_purple_150.jpg" />
            <div class="caption">
                    USF students and faculty are integral participants in our entrepreneurial, innovative city. <a href="/about/sanfrancisco/" class="link_more">Read More »</a></div>
        </div>
    </div>

Text Feature with Image


jerves_wayne

Promotional Message

Further details on that promotional message to go along with the photo to the right of it.


<div class="text_feature">
   <img src="/uploadedImages/Destinations/Offices_and_Services/Giving/jerves.jpg" alt="Jerves Wayne" title="Jerves Wayne" class="image" />
   <h3><a href="/giving/opportunities/The_USF_Fund/">Promotional Message</a></h3>
   <p>Further details on that promotional message to go along with the photo to the right of it.</p>
</div>

Slideshow (150x150)

A USF grad
A USF grad
A USF grad
A USF grad
USF students in the garden

    <div class="block">
        <div class="slideshow auto">
            <div class="image">
                <img alt="A USF grad" src="/uploadedImages/Images/Approved/150x150/grad.jpg" /></div>
            <div class="image">
                <img alt="A USF grad" src="/uploadedImages/Images/Approved/150x150/lonemountain.jpg" /></div>
            <div class="image">
                <img alt="A USF grad" src="/uploadedImages/Images/Approved/150x150/nurses.jpg" /></div>
            <div class="image">
                <img  alt="A USF grad" src="/uploadedImages/Images/Approved/150x150/trolley.jpg" /></div>
            <div class="image">
                <img alt="USF students in the garden" src="/uploadedImages/Images/Approved/150x150/garden.jpg" /></div>
        </div>
    </div>

You can slow down the slideshow by adding "slower" to the slideshow class like this:

<div class="slideshow auto slower">

Long Slideshow (560x150)

Students and Professor talking on the stairs
Students and Professor talking on the stairs.
A view of downtown San Francisco from campus
A view of downtown San Francisco from campus.
Gleeson Library
Gleeson Library.
Students doing group work
Students doing group work.
Graduate seminar
Graduate student seminar.


    <div class="long block">
        <div class="slideshow">
            <div class="image">
                <img src="/uploadedImages/Images/Approved/560x150/talkonstairs_560.jpg"
                    alt="Students and Professor talking on the stairs" /><div class="caption">
                        Students and Professor talking on the stairs.</div>
            </div>
            <div class="image">
                <img src="/uploadedImages/Images/Approved/560x150/lookatcity_560.jpg"
                    alt="A view of downtown San Francisco from campus" /><div class="caption">
                        A view of downtown San Francisco from campus.</div>
            </div>
            <div class="image">
                <img src="/uploadedImages/Images/Approved/560x150/librarycurve_560.jpg"
                    alt="Gleeson Library" /><div class="caption">
                        Gleeson Library.</div>
            </div>
            <div class="image">
                <img  src="/uploadedImages/Images/Approved/560x150/grouplaptop_560.jpg"
                    alt="Students doing group work" /><div class="caption">
                        Students doing group work.</div>
            </div>
            <div class="image">
                <img src="/uploadedImages/Images/Approved/560x150/gradseminar_560.jpg"
                    alt="Graduate student seminar" /><div class="caption">
                        Graduate student seminar.</div>
            </div>
        </div>
    </div>
<br class="clear" /><br />

Extra Long Slideshow (730x150)

USF students relaxing on lawn
Students study in front of the library.
USF students talking on lawn
Our many sunny days bring everyone outside.
USF students
Students chatting on campus.
USF student studying against tree
A student enjoying the weather while studying on the USF’s campus.
USF student reading on lawn
USF’s San Francisco location means sunny and temperate weather pretty much year-round.

 

    <div class="extra-long block">
        <div class="slideshow">
            <div class="image">
                <img src="/uploadedImages/Images/Approved/730x150/730-1.jpg"
                    alt="USF students" /><div class="caption">
                        Students study in front of the library.</div>
            </div>
            <div class="image">
                <img src="/uploadedImages/Images/Approved/730x150/730-2.jpg"
                    alt="USF students" /><div class="caption">
                        Our many sunny days bring everyone outside.</div>
            </div>
            <div class="image">
                <img src="/uploadedImages/Images/Approved/730x150/730-3.jpg"
                    alt="USF students" /><div class="caption">
                        Students chatting on campus.</div>
            </div>
            <div class="image">
                <img src="/uploadedImages/Images/Approved/730x150/730-4.jpg"
                    alt="USF students" /><div class="caption">
                        A student enjoying the weather while studying on the USF’s campus.</div>
            </div>
            <div class="image">
                <img src="/uploadedImages/Images/Approved/730x150/730-5.jpg"
                    alt="USF students" /><div class="caption">
                        USF’s San Francisco location means sunny and temperate weather pretty much year-round.</div>
            </div>
        </div>
    </div>
<br class="clear" /><br />

Tall Slideshow (320x320)

Voter registration
Students Studying.
Victorian Street
A victorian street.
Library
Library.


<div class="double tall block">
   <div class="slideshow auto">
      <div class="image">
         <a href="http://www.usfca.edu" title="Students Studying">
         <img src="/uploadedimages/home/320x320_images/study.jpg" alt="Voter registration" title="Voter registration" border="0" /></a>
         <div class="caption">Students Studying.</div>
         </div>       <div class="image">
         <a href="http://www.usfca.edu" title="Victorian Street">
         <img src="/uploadedimages/home/320x320_images/victoriansstreet.jpg" alt="Victorian Street" title="Victorian Street" border="0" /></a>
         <div class="caption">A victorian street.</div> </div> <div class="image">
         <a href="http://www.usfca.edu" title="Library">
         <img src="/uploadedimages/home/320x320_images/librarytiers_320.jpg" alt="Library" title="Library" border="0" /></a>
         <div class="caption">Library.</div>
      </div>
   </div>
</div>  <br class="clear" /><br />

Taller Slideshow (560x350)

Student sculpting
Student sculpting (1 of 3).
Student sculpting
Student sculpting (2 of 3).
Student sculpting
Student sculpting (3 of 3).


<div class="long taller block">
   <div class="slideshow auto">
      <div class="image">
         <a href="http://www.usfca.edu" title="Student sculpting">
         <img src="/images/styleguide/examples/sculpture1.jpg" alt="Student sculpting" title="Student sculpting" border="0" /></a>
         <div class="caption">Student sculpting (1 of 3).</div>
         </div>       
      <div class="image">
         <a href="http://www.usfca.edu" title="Student sculpting">
         <img src="/images/styleguide/examples/sculpture2.jpg" alt="Student sculpting" title="Student sculpting" border="0" /></a>
         <div class="caption">Student sculpting (2 of 3).</div> </div>
      <div class="image">
         <a href="http://www.usfca.edu" title="Student sculpting">
         <img src="/images/styleguide/examples/sculpture1.jpg" alt="Student sculpting" title="Student sculpting" border="0" /></a>
         <div class="caption">Student sculpting (3 of 3).</div>
      </div>
   </div>
</div>  <br class="clear" /><br />

Large Slideshow in Banner (560x320)

USF students
Cristo Redentor (Christ the Redeemer) engulfed in tropical clouds. Rio de Janeiro, Brasil
USF students
Chain Bridge. Budapest, Hungary
USF students
Gondolas Before Sunset. Venice, Italy
USF students
Girl fetching water in Dohoun. Burkino Faso, West Africa
USF students
Island Hopping. Mykonos, Greece
USF students
Jake at Mt. Ruapehu. New Zealand
USF students
A View from Inside the Louvre Museum. Paris, France
USF students
Skyline from Tokyo Tower. Tokyo, Japan
USF students
From a Bridge in the Streets of Burano. Burano, Italy
USF students
I M Pei from outside the Louvre Museum. Paris, France


<div class="long tall block">
<div class="slideshow auto">
  <div class="image">
  <img alt="USF students" src="/uploadedImages/Destinations/Offices_and_Services/Global_Education/images/IMG_0101.jpg" />
  <div class="caption">Cristo Redentor (Christ the Redeemer) engulfed in tropical clouds. Rio de Janeiro, Brasil</div> </div>
  <div class="image">
  <img alt="USF students" src="/uploadedImages/Destinations/Offices_and_Services/Global_Education/images/Chain Bridge, Budapest, Hungary-AB.jpg" />
  <div class="caption">Chain Bridge. Budapest, Hungary</div> </div>
  <div class="image">
  <img alt="USF students" src="/uploadedImages/Destinations/Offices_and_Services/Global_Education/images/Venezia.jpg" />
  <div class="caption">Gondolas Before Sunset. Venice, Italy</div> </div>
  <div class="image">
  <img alt="USF students" src="/uploadedImages/Destinations/Offices_and_Services/Global_Education/images/008.jpg" />
  <div class="caption">A View from Inside the Louvre Museum. Paris, France</div> </div>
  <div class="image">
  <img alt="USF students" src="/uploadedImages/Destinations/Offices_and_Services/Global_Education/images/IMG_5189a.jpg" />
  <div class="caption">Skyline from Tokyo Tower. Tokyo, Japan</div> </div>
  <div class="image">
  <img alt="USF students" src="/uploadedImages/Destinations/Offices_and_Services/Global_Education/images/Streets of Burano, Italy-AB.jpg" />
  <div class="caption">From a Bridge in the Streets of Burano. Burano, Italy </div> </div>
  <div class="image">
  <img alt="USF students" src="/uploadedImages/Destinations/Offices_and_Services/Global_Education/images/IMG_1972.jpg" />
  <div class="caption">I M Pei from outside the Louvre Museum. Paris, France</div> </div>
</div>
</div>

Random Slideshow

A USF grad
A USF grad
A USF grad
A USF grad
USF students in the garden

You can randomize the initial image of a slideshow by adding "random" to the slideshow class like this:

<div class="block">
    <div class="slideshow auto random">
        <div class="image">
            <img alt="A USF grad" src="/uploadedImages/Images/Approved/150x150/grad.jpg" /></div>
        <div class="image">
            <img alt="A USF grad" src="/uploadedImages/Images/Approved/150x150/lonemountain.jpg" /></div>
        <div class="image">
            <img alt="A USF grad" src="/uploadedImages/Images/Approved/150x150/nurses.jpg" /></div>
        <div class="image">
            <img alt="A USF grad" src="/uploadedImages/Images/Approved/150x150/trolley.jpg" /></div>
        <div class="image">
            <img alt="USF students in the garden" src="/uploadedImages/Images/Approved/150x150/garden.jpg" /></div>
    </div>
</div>

Video (YouTube)

  • Upload your video to YouTube.
  • Once you upload the video, YouTube creates an "Embed" code.
    For example, the Welcome Message from Dean Turpin, http://www.youtube.com/watch?v=ZupunG68IAs, just below the video is a button that says 'Share', click it, then click "Embed". The code begins like this: "<iframe width=…>
  • Set the preferences for the video by selecting items below the code window. To embed at full page width in most USF pages click on the "Video Size" window, select "Custom Size" and enter 560px for the width. The height will be set proportionally automatically. Uncheck the option for "Show suggested videos when the video finishes".
  • Copy and paste the entire "Embed" code from YouTube to your html page in the code view, "<>".
  • Edit the embed code so that allowfullscreen becomes allowfullscreen="true"
    For example:
    <iframe width="560" height="315" src="https://www.youtube.com/embed/Z83Xokl9Gjk" frameborder="0" allowfullscreen="true"></iframe>

Here you will see an example of a YouTube video embedded on the page. You can see a more advanced example here.

Video (Non-YouTube)

Please use this code only for placing your video inside your html page and not in one of the banner boxes. Please replace the code in BOLD with your direct path from the streaming server. (see our blog post if you are uploading Camtasia videos)

<object codebase="http://www.apple.com/qtactivex/qtplugin.cab" top="250" height="100%" width="100%" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B">
    <param name="SRC" value="http://www.usfca.edu/its/cit/video/images/video_large.mov" />
    <param name="HREF" value="rtsp://streaming.usfca.edu/f09/usfstepsup/Tutorial_stream.mov" />
    <param name="TYPE" value="video/quicktime" />
    <param name="AUTOPLAY" value="false" />
    <param name="CONTROLLER" value="true" />
    <param name="TARGET" value="myself" />
    <embed src="http://www.usfca.edu/its/cit/video/images/video_large.mov" href="rtsp://streaming.usfca.edu/f09/usfstepsup/Tutorial_stream.mov" type="video/quicktime" width="100%" height="750" top="250" autoplay="false" controller="true" pluginspage="http://www.apple.com/quicktime/download/" target="myself"></embed>
  </object>


(Drop the above code in the code view,"<>" , not the design view.)

Video in Banner Box

Click to play

    <div class="block">
        <div class="video">
            <a href="//www.youtube.com/v/MZePHpjBUMs&hl=en&fs=1">
                <img src="/images/blocks/150x150/video_digital.jpg" alt="Click to play" /></a>
        </div>
    </div>


Note: The URL you put into the "href" attribute must come from the "src" attribute in the <embed> tag of the embed code you get from YouTube.

 

Alignment of 150 Boxes

Note that the 150x150 boxes presented in this demonstration are aligned to the right. Any 150x150 box can be aligned by using the class 'right' or 'left'. The above examples use: <div class="block right">. If you are creating a box in the banner area of your site, you do not need to include the 'right' or 'left' class.

Using Boxes in the Banner Area

Do not include <div class="block"> and the closing </div> tag when using the above examples outside of the 'main' content area (i.e. in the banner area). For example, if you are applying a 150x150 video to a banner box the code would be: 

        <div class="video">
            <a href="//www.youtube.com/v/MZePHpjBUMs&amp;hl=en&amp;fs=1">
                <img src="/uploadedImages/Images/Approved/150x150/video_digital(1).jpg"
                alt="Click to play" /></a>
        </div>