How to Use the USU Template

You may or may not know but in order to facilitate university wide web design efforts, the USU web designer has provided a template that can be referenced in order to implement his design styles on our pages. It uses a method known as class declarations that you may or may not be familiar with. I’ll first quickly explain a bit about class declarations and how they are used and then show you how to use the USU template on your own content pages.

Classes & Styles

In the most basic sense, each piece of a webpage is made up of html elements. Paragraphs elements are assigned with the <p> tag, containers are assigned with the <div> and <span> tags, ordered lists are specified by the <ol> tag, un-ordered lists by the <ul> tag and so on and so forth. These elements are read by the browser and then displayed appropriately. These elements have some default styling defined by each browser and then can be overridden by using CSS style sheets.

As you can read about in another post about CSS, you can use css styles directly on the html page to change the look of these elements. However, if you have a heading style for example, that you want to use everywhere in your site, it would be very tedious to have to add that styling to each heading, each place it exists, on each page of your site. That would take tons of work to do. Also, if you wanted to change the color, or size of that type of heading or other element, you would have to change the styles in each location.

Enter CSS style sheets.

Style Sheets

CSS style sheets solved this problem by using class declarations to style elements. Let’s pretend for a moment that we want all of a particular type of heading to be red. We could write our HTML like this:

<h1 style=”color: red;”>Our Red Heading</h1>

That heading would look like so:

Our Read Heading

Looks good. But we don’t want to have to write style=”color: red;” everywhere that heading appears. Especially if we have other styles like font-size, font-weight, font-family, margin, padding, etc. We would have to list those everywhere. It would be a pain to change them all as well. So what we can do instead is just give that heading a class like so.

<h1 class=”myRedHeading”>Our Red Heading</h1>

That class by itself means nothing to the browser. However, if we have a style sheet that defines what the “myRedHeading” is supposed to look like, it will change. In our style sheet we would have a declaration like so:

.myRedHeading {

color: red;

}

The . means we are defining a class, the part after the . is the name of the class and everything between the { } is the styling. Now wherever we want a red heading we can just use the “myRedHeading” class and the browser will use our style sheet to display it correctly. If we need to change the color of all our headings we can just change the code in one spot and all of them will change.

What This Means to You

You don’t have access to edit our style sheets, but you do have the ability to use the classes defined in those sheets. The main USU site has a master style sheet and then our site has one that has additional styles as well as some that override styles defined in the master one. The USU webmaster has created a page template at usu.edu/template. You can take just about anything on this template and implement it in your own content. Here is how, first open the usu.edu/template page and find a style you want to implement.

For example, about halfway down the page there are three blue columns. Maybe you want to have a 2/3 paragraph on the left with a small blue box on the right with some additional information on your page. You will need the code for the paragraph 2/3 column as well as the code for the paragraph 1/3 column on the right. How do we do this? It’s easier than you think.

First select the text around the element that you want to know about. Always try to select a little bit before and after just to make sure you get everything. If you are using Firefox, right-click and select “View Selection Source.”

Firefox should bring up a new window with the HTML selected that you had selected on the page. It should look something like this:

As you can see the right blue column has a class of “one-column-right-blue”. The paragraph has no class declaration it is simply wrapped within a div with the class we can see here. So on your content page, if you were to make a paragraph, then wrap it in a div with the class show here, it should scoot to the right and have a blue background. The HTML would look something like this:

<div class=”one-column-right-blue”><p>CONTENT GOES HERE</p></div>

Easy as that. Do the same thing for the 2/3 paragraph  that is shown on the left. This is what the code should look like:

Your left paragraph code would then look something like this:

<div class=”two-column”><p>CONTENT HERE</p></div>

Ben has already set up the styling for these class declarations which I will show you. However you don’t need to worry about that, all you need to know is the classes to use. Here is the part of the CSS style sheet that pertains to these classes.

As you can see there are many other classes available to you. Probably more than a hundred located in the style sheet as this is only a portion.

Summary

You can use this technique on the USU template as well as pretty much any page on the site. Most elements have classes that can be used by you on your page. Sometimes those styles won’t be applied exactly the same because there are other factors that come into play in regards to class declarations but those are beyond the scope of this tutorial. The main thing that you need to know is how to find a class declaration that you want to use and where to use it.

PLEASE REMEMBER: If you use the HTML editor you MUST remember to CLOSE any tags that you OPEN. So if you make a new div by typing in <div> you must close it somewhere else in the document by typing in </div> If you leave tags open it can have very adverse effects on the entire page. You won’t make an permanent changes, they can always be easily fixed, but please use caution when manually typing in HTML tags.

Advertisements

2 thoughts on “How to Use the USU Template

  1. […] what pops up when someone hovers over the link, and the class has to do with what I spoke about in another post. We could in theory set up some custom classes for links to change their colors, sizes, or even make […]

  2. […] If you are confused about all of this class stuff, you can review my post about classes and the USU template. […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: