The following examples show the code for including boxes and special features in
your pages.
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: 
<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>
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>
<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>
<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>
<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>
<div class="block right">
<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 right">
<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">
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>
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>
<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">
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 />
<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 />
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 />
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 />
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="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"
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>
</div>
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 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>
- 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, "<>".
Note: If you choose to use the iframe code provided by youtube,
you will need to edit the code so that allowfullscreen becomes allowfullscreen="true"
For example:
<iframe width="560" height="315" src="http://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.
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.)
<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>
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&hl=en&fs=1">
<img width="150" height="150" src="/uploadedImages/Images/Approved/150x150/video_digital(1).jpg"
alt="Click to play" /></a>
</div>
