Skip Navigation

Web Developer Network Wiki

Splash page components

For visitors outside of the University IP range, they will be greeted with a splash page (as shown below) when they hit www.unl.edu. Since it is decided that the splash design will be reserved exclusively just for UNL front page, there won't be a splash template for general use. However, several components of the splash design are available for general use.

Image:Splashpage.png


[edit] Splash list treatment

You can apply such a list treatment to your content area by using the codes below. It is designed to work only in the main content area.

<ul class="splashnav">
<li><a href="#">Splash list is cool</a></li>
<li> <a href="#">Splash list is boring</a></li>
</ul>

Splash list for main content area

[edit] Big image treatment

First, you need to include the splash.css in your header.

<link rel="stylesheet" type="text/css" media="screen" href="/ucomm/templatedependents/templatecss/layouts/splash.css"/>

And these codes go into your main content area.

<div id="splash_top">
<div id="feature_story">
<h1>MyUNL</h1>
<h2>Sylvia Williams</h2>

<p><em>Sylvia Williams is no ordinary person. First in her family to major in science, it might seem today that she was born to excel.</em></p>
<p>
For those that knew her well, Sylvie didn’t always look like a person who would finish high school, let alone attend one of the nation’s preeminent universities.</p>
<p>
<a href="#" title="full article">click to read full article ></a></p>
</div>

<p id="featureimage"><img src="images/splash_image.jpg" alt="test" /></p>

</div>

<div id="tabs3">

  <ul>
    <li><a href="#" title="Link 1"><span>Sylvia</span></a></li>
    <li><a href="#" title="Link 2"><span>Manisha</span></a></li>
    <li><a href="#" title="Link 3"><span>Archive</span></a></li>
  </ul>
</div>

Image:Splash-component.gif