Custom Splash

This project utilizes the splash image treatment done on the unl splash homepage and customizes various aspects of the .css to fit into the medium_4x3 image container (if you would like a different image container adjust the style sheet accordingly). It provides randomly selected content to users upon visiting your site and can serve as a good way to highlight and introduce various departments, newsworthy items, and announcements.

Custom Splash at Work

The files in this example are set up using the following hierarchy

Here are the necessary files:

• feature.xml
• template.htm
• feature.css
• feature.js
• textbackground.png

Edit the template.htm file to create your featured story/department

<div id="mainstory"><div id="feature_story">
<h1>Title</h1>
<!-- <h2>Subtitle</h2 -->

<p>Copy goes here</p>
<p>
<a href="/" title="web page">Link Text</a></p>
</div>

<p id="featureimage"><img src="/" alt="alttext" /></p></div>

I've commented out the subheadings on the template because I had no need for them - there are still handled by the style sheet and feel free to uncomment and use them if you so wish. Make sure the image your referencing is the appropriate fit (in this case 450x338px).

Now include an absolute reference your new .htm's in the feature.xml

<?xml version="1.0" ?>
<random>
		<story>
			<name>Dummy nodes to counter random number generator zero bug</name>
			<permalink>Dummy nodes to counter random number generator zero bug</permalink>
		</story>
		<story>
			<name>TabName</name>
			<permalink>http://yoururl.unl.edu/feature/template.htm</permalink>
		</story>
</random>

Include the following in the header of the page you want the customized splash to appear in and adjust all references appropriately. (It's best to keep all URL's absolute) You can also adjust the number of tabs you want displayed at any given moment with the displayNum variable.

<!-- Style, Code, Java, and such for UNL Splash Page Components -->
<link rel="stylesheet" type="text/css" media="screen" href="/feature/feature.css"/>
<script type="text/javascript" src="/feature/code/feature.js"></script>

<script type="text/javascript">
var displayNum = 5; //number of tabs to display
var xmlURL = 'http://yoururl.unl.edu/feature/feature.xml'; //your xml file (absolute url please)
wraphandler.addEvent(window,"load",function(){
	randomSplashContent();
});
</script>

Now paste this into the desired spot in the body of the same page and also adjust accordingly. (Fill in the "noscript" section as you see fit to provide some content for users not utilizing javascript)

<!--Splash Element Main Story-->
<div id="splash_top">
	<noscript>
		<div id="mainstory">
			<div id="feature_story">

				<h1>Headline</h1>
				<!-- <h2>Subheading</h2> -->

				<p>copy</p>
				<p>
					<a href="/" title="web link">link text</a>				</p>
			</div>

			<p id="featureimage"><img src="/" alt="alttext" /></p>
		</div>
	</noscript>
</div>
				
<div id="tabs3">
	<ul id="splashtab">
  		<li style="display:none;"><noscript>Javascript is required.</noscript></li>
	</ul>
</div>