Sample Box Code

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

HERE IS A BUTTONThe button class is useful when you want to provide an obvious call to action. We recommend also aligning the button to the right. The code looks like this:

<a class="button right" href="http://www.usfca.edu">HERE IS A BUTTON</a>

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

<a href="http://www.linkedin.com" title="LinkedIn" target="_blank">
<img class="button" src="/uploadedImages/Images/Social_Media/linkedin_bar150.png" alt="Linkedin" title="LinkedIn" border="0" />
</a>

Collapsing Menus

This entire page uses collapsing menus. Be careful not to add any styles to the SPAN tags, or it will break. Adding the class of "opened" will leave the section opened by default.

<div class="collapse">
  <h4><a>Heading 1</a></h4>
  <span class="opened">CONTENT</span>
  <h4><a>Heading 2</a></h4>
  <span>CONTENT</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">
        <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">
        <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>

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 width="150" height="150" 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 width="125" height="157" border="3" align="right" style="width: 125px; height: 157px; " 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 width="150" height="150" alt="A USF grad" src="/uploadedImages/Images/Approved/150x150/grad.jpg" /></div>
            <div class="image">
                <img width="150" height="150" alt="A USF grad" src="/uploadedImages/Images/Approved/150x150/lonemountain.jpg" /></div>
            <div class="image">
                <img width="150" height="150" alt="A USF grad" src="/uploadedImages/Images/Approved/150x150/nurses.jpg" /></div>
            <div class="image">
                <img width="150" height="150" alt="A USF grad" src="/uploadedImages/Images/Approved/150x150/trolley.jpg" /></div>
            <div class="image">
                <img width="150" height="150" 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 width="560" height="150" 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 width="560" height="150" 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 width="560" height="150" src="/uploadedImages/Images/Approved/560x150/librarycurve_560.jpg"
                    alt="Gleeson Library" /><div class="caption">
                        Gleeson Library.</div>
            </div>
            <div class="image">
                <img width="560" height="150" 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 width="560" height="150" 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
Students study in front of the library.
USF students
Our many sunny days bring everyone outside.
USF students
Students chatting on campus.
USF students
A student enjoying the weather while studying on the USF’s campus.
USF students
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 width="730" height="150" 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 width="730" height="150" 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 width="730" height="150" src="/uploadedImages/Images/Approved/730x150/730-3.jpg"
                    alt="USF students" /><div class="caption">
                        Students chatting on campus.</div>
            </div>
            <div class="image">
                <img width="730" height="150" 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 width="730" height="150" 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="slideshow auto">
  <div class="image">
  <img alt="USF students" src="/uploadedImages/Destinations/Offices_and_Services/Global_Education/images/IMG_0101.jpg" width="560" height="320" />
  <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" width="560" height="320" />
  <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" width="560" height="320" />
  <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" width="560" height="320" />
  <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" width="560" height="320" />
  <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" width="560" height="320" />
  <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" width="560" height="320" />
  <div class="caption">I M Pei from outside the Louvre Museum. Paris, France</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 'Embed', there's the "Embed" code. Be sure to check 'Use old embed code' in the checkbox section just below.
  • Copy and paste the entire "Embed" code from YouTube to your html page in the code view, "<>".

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="http://www.youtube.com/v/MZePHpjBUMs&hl=en&fs=1">
                <img width="150" height="150" src="/images/blocks/150x150/video_digital.jpg" alt="Click to play" /></a>
        </div>
    </div>


The Pool

Blogs, tweets, maps, events, photos and video from USF students, faculty and staff

Visit The Pool 


<span class="thepool">
<p>Blogs, tweets, maps, events, photos and video from USF students, faculty and staff</p>
<p><a title="Visit The Pool" href="http://thepool.usfca.edu/">Visit The Pool</a></p>
</span>


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 adding the class 'right' or 'left'. The above examples use: <div class="block right">

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="http://www.youtube.com/v/MZePHpjBUMs&amp;hl=en&amp;fs=1">
                <img width="150" height="150" src="/images/blocks/150x150/video_digital.jpg"
                alt="Click to play" /></a>
        </div>