University of Minnesota Extension
www.extension.umn.edu
612-624-1222
Menu Menu

Extension > Template documentation > Page types > Program homepage example

Program homepage example

This page is part of the program site package. Download the program site package here (54 K ZIP).


Program image

This is a required element. Its location it set to the top left corner of the page.

The program image should represent some aspect of the program.

The image should be 290px 210px in dimension. It should also have class="main noMobile" applied to it. That gives it the correct margin as well as hides it from diplaying on a mobile device.

HTML

<img src="img/main.jpg" alt="" class="main noMobile" />

Program about module

This is a required element. Its location should be directly below the main program image.

The program about module is where the descriptive copy and links to the about and program team pages are. It also contains the search module. The outer module has class="module module-option03" applied to it. The search module has class="module module-option04 last" applied to it. The last class removes the excess bottom margin from the module.

The about page should always be in the about/ folder and the program team page should always be in the program-team/ folder.

HTML

<div class="module module-option03">
	<p>Describe the program as well as the team. Three to five sentences workes best.</p>
	<ul>
		<li><a href="about/">About the Program title program</a></li>
		<li><a href="program-team/">Program title team</a></li>
	</ul>
	<div class="module module-option04 last">
		<form action="http://google.umn.edu/search" method="get" name="gsearch" title="Search Program title">
			<fieldset>
				<legend>Search Program title:</legend>
				<input type="text" name="q" value="" title="Search text" size="28" />
				<input type="submit" value="Go" />
				<input type="hidden" name="site" value="mnext_public" />
				<input type="hidden" name="client" value="mnext_public" />
				<input type="hidden" name="proxystylesheet" value="mnext_public" />
				<input type="hidden" name="output" value="xml_no_dtd" />
				<input type="hidden" name="sitesearch" value="www.extension.umn.edu/program-title" />
			</fieldset>
		</form>
	</div>
</div>
<!--/module-->

This is a required element. Its location should be at the top of the center/right column.

The program nav module is where you'll put the program site's main navigation. You can either have headers with descriptions like on Food Safety or a list of sub-sections like on Dairy.

HTML

<div class="horizontalContainer clearfix">
	<div id="mainNav">
		<div class="module module-option03 clearfix last"><a name="mainnav"></a>
			<div class="column">
				<h2><a href="">Section title</a></h2>
				<p>Describe the section here. <a href="">More</a></p>
				<h2><a href="">Section title</a></h2>
				<p>Describe the section here. <a href="">More</a></p>
			</div>
			<!--/column -->
			<div class="column last">
				<h2><a href="">Section title</a></h2>
				<p>Describe the section here. <a href="">More</a></p>
				<h2><a href="">Section title</a></h2>
				<p>Describe the section here. <a href="">More</a></p>
			</div>
			<!--/column --> 
		</div>
		<!--/module--> 
	</div>
	<!--/mainNav --> 
</div>
<!--/horizontalContainer-->

Program contact include

This is an required element. Its location is right above the Extension footer.

It's good practice to have some way for your audience to contact someone from the program. The feedback form link is optional however.

HTML

<!-- Contact footer -->
<div id="unit_footer2" class="grid_12 alpha omega">
  <ul class="unit_footer_links">
    <li class="sectionFootContact"><a href="mailto:emailaddress@umn.edu">Contact the Program title program</a></li>
    <li class="sectionFootFeedback">Thoughts on our website? <a href="">Fast feedback form</a></li>
  </ul>
</div>
<!-- /Contact footer -->

Program connect module

This is an optional element. Its placement on the page depends on the user's needs.

The connect module is where you place links to your Facebook and Twitter, etc. accounts if you have them. It's a simple list with class="social" applied to it. Then, on each li you specific which icon you want. Below you can see the icons currently available.

HTML

<!--module-->
<div class="module">
	<h2>Connect with Program title</h2>
	<ul class="social">
		<li class="twitter"><a href="#" class="noIcon">Follow Program title on Twitter</a></li>
		<li class="facebook"><a href="#" class="noIcon">Find Program title on Facebook</a></li>
		<li class="ning"><a href="#" class="noIcon">Join Program title on Ning</a></li>
		<li class="youtube"><a href="#" class="noIcon">Watch Program title on YouTube</a></li>
		<li class="website"><a href="#" class="noIcon">Go to website</a></li>
		<li class="rss"><a href="#" class="noIcon">Subscribe to RSS feed</a></li>
	</ul>
</div>
<!--/module-->

Program feature module

This is an optional element. Its location can be based on user needs but should be in a column no less than four grids wide.

Feature code should be placed in individual HTML files within a features folder inside of your program site folder.

Follow the naming convention and folder structure shown below:

Images

Images should be 110px x 85px.

HTML

<div class="feature"> 
	<a href=""><img src="img/mm-dd-yyyy.jpg" alt="" /></a>
	<h3><a href="">Enter headline here</a></h3>
	<p>Enter blurb here. <a href="">More</a></p>
</div>

Include your features on your page using a SSI:

<!--feature-->
	<!-- #include file = "features/03-05-2012.html" --> 
<!--/feature-->
  • © 2014 Regents of the University of Minnesota. All rights reserved.
  • The University of Minnesota is an equal opportunity educator and employer. Privacy