Modification Guidelines.txt

CSH Website Modification Guidelines
===================================

Please read through these guidelines before attempting website modifications.



Alternating Lists
-----------------
- Example pages: Projects, Eboard

Alternating lists are auto-aligning. Simply add new list items and they will format themselves. The format for alternating lists is as follows:

<ul class="altList">
	<li>
		<img src="image.png"/>
		<span>
			<h2>Title</h2>
			<h3>Optional subtitle</h3>
			<p>Desription</p>
		</span>
	</li>
</ul>

Images must be square and at least 300x300 pixels. Other content must be contained within a <span> tag.

Alternate hover pictures for Eboard are defined in pages.css under the /*Eboard*/ section. They, too, must be square and at least 300x300 pixels.


Image Grids
-----------
- Example pages: Alumni, Sponsors

Image grids are auto-positioned and have the ability to shift their appearance when the window size becomes too small. This is used to move text from inside the grid to above it. In order to achieve this, a few special classes are in place.

In order to ADD content to an existing grid it must be remembered that all grid rows are a maximum of 5 items wide. This means that every <tr> can have a maximum of 5 <td> elements inside it (except for a few special cases that don't need to be messed with in orer to update the grid). To add an item, simply add a <td> element BEFORE the <td class="smallHide"> elements. Make sure that your modifited <tr> items have no more than 5 <td> items within them and, if needed, wrap the new content to a new <tr> to make them fit.

To add items that are larger than the standard 1x1 box, such as the Square logo on the Alumni page, define a larger, equal colspan and rowspan. The total colspan must still equal 5 (so if colspan of one item is 2, then there can only be 3 other elements in the <tr>). Remember that increasing the rowspan causes an item to affect adjacent <tr> items.


Sponsors Gallery
----------------
- Example page: Index

The sponsors gallery randomly populates based on an array of images found in code.js. Each item in the array "images" (under the //Sponsors gallery comment) must be formatted as follows:

<a href="sponsors-website.com" target="_blank"><img href="images/sponsorLogos/sponsor.png" /></a>

Upon loading the page, 5 random elements from the array will be used.


Tour
----
- Example page: Tour

Adding items to the slideshows is as easy as adding a <li> with an image inside. Images must be 600x400. Adding a <p> element after the image will automatically style the text as a caption on the image.

New sections (that is, new rooms) should not be added to the page.