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:

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

<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

USF California Prize winner Daniel Lurie in Conversation

story video

    <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

April 30 State of Black San Francisco: followup to the summit more info »

    <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

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

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)

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

Long Slideshow (560x150)

Students and Professor talking on the stairs.

A view of downtown San Francisco from campus.

Gleeson Library.

Students doing group work.

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)

Students study in front of the library.

Our many sunny days bring everyone outside.

Students chatting on campus.

A student enjoying the weather while studying on the USF’s campus.

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)

Students Studying.

A victorian street.

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 (1 of 3).

Student sculpting (2 of 3).

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)

Cristo Redentor (Christ the Redeemer) engulfed in tropical clouds. Rio de Janeiro, Brasil

Chain Bridge. Budapest, Hungary

Gondolas Before Sunset. Venice, Italy

Girl fetching water in Dohoun. Burkino Faso, West Africa

Island Hopping. Mykonos, Greece

Jake at Mt. Ruapehu. New Zealand

A View from Inside the Louvre Museum. Paris, France

Skyline from Tokyo Tower. Tokyo, Japan

From a Bridge in the Streets of Burano. Burano, Italy

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)

Video in Banner Box

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: