Source Code Editing Using Exisiting CSS and Javascript

WIthin the News Template and Directory Homepages are a few styles that can be applied to your webpages. These simple codes can be added to your web pages by selecting the View Source Option or HTML Option in your template admin. Simply follow the instructions below to have your text easily format to SVC website standards. Use the links below to jump to the various tutorials.

Headers

There are a series of <h> tags the can be used to produce various header styles. For example.

<H1>Looks Like This</H1>

<H2>Looks Like This with an underline</H2>

<H3>Looks Like This</H3>

<H4>Looks Like This with an underline</H4>

<H5>Looks Like This</H5>

<H6>Looks Like This</H6>

The <P> Paragraph Tag

Simply inclosing your paragraph/text within the opening and closing carat of the tag
will give you perfectly fomatted text everytime.
<P>Your text here</P>
See example below of text formated using the <P> Tag.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Making Bullets, The <UL> Tag

The <UL> stands for Unified List and can be used to create bulleted list items. To do so simply open the list with a <UL> tag, specify your list items with a <LI> tag and then close the list with the closing </UL> tag. See example below.

<UL>
<LI> Lorem ipsum dolor
<LI> Ut enim ad
<LI> deserunt mollit anim id
</UL>

Gives you this:

• Lorem ipsum dolor
• Ut enim ad
• deserunt mollit anim id

Making Numbers, The <OL> Tag

The <OL> tag stands for Ordered List and can be used to create numbered list items. It is easy to change a list from bullets to numbers by simply switching the <UL> tag with the <OL> tag. See example below.

<OL>
<LI> Lorem ipsum dolor
<LI> Ut enim ad
<LI> deserunt mollit anim id
</OL>

Gives you this:

1. Lorem ipsum dolor
2. Ut enim ad
3. deserunt mollit anim id

Other Common Text Formatting Tags

I want <B>this part</B> of my text to be bold

I want this part of my text to be bold

I want <U>this part</U> of my text to be underlined.

I want this part of my text to be underlined.

I want <i>this part</i> of my text to be italicized.

I want this part of my text to be italicized.

I want a bullet,  <li>This part of my text is bulleted.

I want a bullet,  
This part of my text is bulleted.

I want <A HREF="http://www.google.com">Google</A>.

I want Google.

I want <A HREF="http://www.google.com" Target=_blank >Google</A>.

I want Google. OPENS IN A NEW WINDOW

I want Links To This Page

Reveal/Hide Javascript

Users who wish to try a more advanced reveal/hide feature available in our web system can do so by following the simple steps below. There are 20 <DIV> tags within our stylesheet that are labeled with the following ID: id="no1", id="no2", id="no3", and so on...all the way to no20. These divs have their display styles set to off, meaning that if you label a div with one of these IDs, anything within the <DIV> tag will not be displayed when a surfer visits your page. The surfer would need to click on a javascript link to toggle that information to be revealed, and then click again to toggle it off.

For Example:
Click Here to reveal/hide my name and contact information

Here is how the link code looks for making this reveal/hide script work.
<A href="javascript:toggleLayer('no1');">Click Here to reveal/hide my name and contact information</A>

The </DIV> code looks like this:
<DIV id="no1">
<P style="COLOR: #990000">James Walters<BR>360.416.7957<BR>webmaster@skagit.edu</P> </DIV>

It is important to remember that you can have up to 20 of these <DIV> tags on a page, and that each <DIV> and link code must have matching numbers. For example: <DIV id="no11" > will open with the <A href="javascript:toggleLayer('no11');"> link code.