So I’d like to cover some of the changes that are coming soon so that everyone can include them in their own sites in the manner that they choose. I’ll be pasting in some code that you can copy and use for your pages as well as the current links for reference so you can see what they look like. If you have any questions, please leave a comment or shoot me an email. Please note none of these changes will work on your sites until I make these changes public as dependent files will not be available to style your pages.
You don’t have to use all of these elements, but I’ll list them all just so you will have reference.
Future Students Page
The development version of this page is currently located at: http://rcdedevb.usu.edu/contentchange/distance.usu.edu/prospective_students/
In order to add the icons with text under them like I have them on the future student page, you will need to paste the following code into your html.
<div class=”futureHorizMenu HorizMenuShort”>
<img src=”http://rcdedevb.usu.edu/contentchange/assets/img/cap.png” alt=”Degrees & Programs Link”><br>
<h3>Degrees & <br>Programs</h3>
You would replace the text in the href=”[TEXT]” to be the link you want and replace the text in the src=”[TEXT]” to be the location of the image you want to use. Just a quick run down of what the code is doing. The outer DIV is the container of the image and text. The classes futureHorizMenu and HorizMenuShort defined its size, and how it interacts with the elements around it. Within that is an anchor link that wraps around an image and some text. The <br> element within the H3 element is no necessary for shorter pieces of text, but I wanted Degrees & Programs to be two lines. If you only want a single line of text, remove the <br> element. <br> stands for break and creates a link break.
These classes are set up to fit five in a row, but will still look ok with four. If you are going to less than four, let me know and I can help you fix them so that they are centered. The easiest way to get the text for the image is just insert and image yourself and then look at the HTML code for the text between the src property and use that for the current menu items. The icon images are already located on the server in a location that will be accessible to you. Currently they are located at: http://rcdedev.usu.edu/lee/contentchange/assets/img/filename.ext
Here is the list of each file with it’s respective image. When you are doing this on the public sites the link will be as follows: http://rcde.usu.edu/websites/assets/img/filename.ext
So if you are just testing stuff now the images are located as above, and if you are actually doing this for real as a final version, the files are located at http://rcde.usu.edu/websites/assets/img. If you are using other icons of some sort, the size needs to be around 60px x 60px in size.
Vertical Content Boxes
These vertical content boxes are right out of the usu template. The code for them that I used are as follows:
<img src=”http://rcdedevb.usu.edu/websites/assets/img/discovermenu-options.jpg” alt=”Study Outside” class=”img-border” style=”width: 175px;” />
<p>As a distance education student you will have access to 27 campuses around the state of Utah and 48 degree programs of which 13 can be obtained completely
online. The number of degrees we offer online is constantly growing, making it possible to earn the degree you want wherever you live.</p>
<p><a href=”http://distance.usu.edu/degree_programs/?searchType=location”>Classroom Degrees</a><br/>
<a href=”http://distance.usu.edu/degree_programs/?searchType=courseType&type=Online”>Online Degrees</a><br/>
<a href=”delivery_types.cfm”>Course Type Information</a></p>
In order to do three columns you basically only need to change one line of code. The first line above sets the class to be “one-column-left”. There is also a “one-column-center” and a “one-column-right”. If you use the code above three times and change the class of each div so you have one of each, then you will have three columns and each one will take up a third of the width of the content area. Just to further explain some of the code above: You first have a div that wraps the column. In this case above the div is the left column as you can tell by its class of “one-column-left.” Then you have the image at the top of the column. I added the class of “img-border” so it puts the small grey border around the image. I manually set the width to be 175px so it fits nicely. I would use an image about that wide for this application. Then we have a paragraph with some copy and then another paragraph with the links. After each link I added a break <br> so that it forces the next link on the next line.
Blue Vertical Boxes
I used the same technique on the non-traditional student resources page as well as the community page, but in order to make the vertical boxes blue, I needed to make one small change. In the class of the outer wrapping div, you can turn any of them blue by changing the class from “one-column-left” to “one-column-left-blue”. The background will then be a light blue color. So here are the classes for vertical columns, you can put any content inside of them and they will be forced to a 1/3 page width content on a white or blue background.
If you are confused about all of this class stuff, you can review my post about classes and the USU template.
Current Student Page
The new current students page basically has a single custom box just repeated down the page. below is the code and it looks more complicated than it really is:
<h3>Need help with with your coursework?</h3>
<p>Learn about available resources to help you succeed. Academic advising, eTutoring, study tips, workships, and more are at your disposal.</p>
<li><a href=”http://writing.usu.edu/”>Writing Center</a></li>
<li><a href=”http://www.usu.edu/drc/”>Disability Resource Center</a></li>
<li><a href=”http://www.usu.edu/arc/StudySmart/resources.cfm”>Study Smarter Kit</a></li>
<li><a href=”http://distance.usu.edu/prospective_students/advising.cfm”>Speak with an Advisor</a></li>
<li><a href=”http://www.usu.edu/advising/”>Academic Advising Services</a></li>
<li><a href=”http://www.facebook.com/groups/180732542003146/”>Facebook Advising Group</a></li>
All this basically is is a single box wrapping the entire area, with two smaller boxes inside with the content. So the first outer box has a class of “studentResource” and this wraps the entire thing. Then we have an image that is pushed over to the left. Then we have the content area with descriptive text that is wrapped in a div with the class of “studentResourceDesc.” Inside that we have a h3 heading, some text, and then another div with the class of “studentResourceLinks.” All that div does is hold the lists of links. I found that three links works best. So I make a ul element to start my list, and then put each link in a li element.
If you are copying and pasting, which is the easiest way to use this code, just edit what you need. What you NEED to make sure of is that each element has two parts. An opening and closing tag. So if you remove a <li> (the opening tag for the list item) you must remove a </li> (the closing tag fot he list item). If you don’t things can get screwy. The entire code above can just be stacked on your page as many times as you want. If you look at the source code on the new current students page you can see how I have done this.
If you need help on how to copy and paste in this code, just give me a call. You should be able to just copy the code blocks I put in and paste it in your editor. You must be in the HTML view however to do this or you may get undesired results. For reference I’ll tell you what the code elements do listed above.
<div></div> – A div is essentially a box by default. It can have a set height and width. By default it also forces anything after it to a new line. Any content you put within the <div> CONTENT </div> tags will be constrained to the div’s proportions.
<a></a> – A a (or anchor) is just than. An anchor on the page. Most commonly it holds a link to another page.
<h3></h3> – h# is a heading. Based on the css styling these have different sizes and usually goes from 1-6 (largest to smallest).
<p></p> – A p is a paragraph element. It also by default pushing anything after it to a new line.
<img /> – This is an image element. It is different from the others as you don’t open and then close an image element like so: <img> </img> An image element is self closing, so you write it like so: <img src=”imagelink.ext” />
<ul></ul> – A ul element stands for un-ordered list element. So rather than have numbers it usually has dots or bullets. These bullets can be removed with CSS as they are in my examples.
<li></li> – Li stands for list item. List items are contained within ordered or un-ordered lists.
Remember apart from the image tag, all elements must opening and closing tags, with the content in between.