Some changes have been made to the banner styling on loyno.edu. There are now three different ways to style a banner. See below for an explanation of each.

Default banner

For the default banner to appear, banner.css must be called from the head of the page, and the HTML constructed like so:


<div>
<h1><a href="/" title="Click here to return to the homepage">Loyola University New Orleans</a></h1>
</div>

Note: If an anchor is present within the h1 (as in the above code sample), the “Loyola University New Orleans” text in the banner becomes clickable.

Temporary banner

This banner consists of HTML text over the maroon background image. It can be used temporarily for sites that do not yet have a custom banner available. To use a temporary banner, banner.css must be called from the head of the page, and the HTML constructed like so:


<div class="temp">
<h1><a href="/" title="Click here to return to the homepage">Scholarships and Financial Aid</a></h1>
</div>

Custom banner

A custom banner such as the one above depends on both banner.css and a site-specific stylesheet being called from the head of the page. An example of such a site-specific stylesheet would be this one for Financial Aid. Be aware that the site-specific stylesheet must be called after banner.css in the source code, so the default styling can be overruled.

Also, the HTML must be contructed like so:


<div class="full-link">
<h1><a href="/" title="Click here to return to the homepage">Scholarships and Financial Aid</a></h1>
</div>

Note: The class of full-link stretches the anchor within the h1 to the full height and width of the banner, making the entire banner clickable. This class is not needed if more appropriate styling for the anchor is included in the site-specific stylesheet.

Comments are closed.