Web System Tools
The Web System Tools (WST) provides you the opportunity to easily change the sites you have access to. Specifically, the WST creates a site-wide banner graphic, edits the left-hand navigation, edits contact information displayed below the navigation and also allows you to choose rotating photos that will be located below the banner graphic. This is done without using standard HTML or CSS procedures.
Parts of the Web Page affected by the Web System Tools
- Banner Graphic
- St. Olaf Photo
- Left Hand Navigation
- Contact Information
How to Use Web System Tools
- Navigate your web browser to http://www.stolaf.edu/apps/wst.
- Login using your St. Olaf username and password.
- Enter the URL of the website you wish to update and click the “Set Site” button.
- Once you’ve entered this URL, you are taken to the page which allows you to update your website. You are provided several options:
- Update the banner graphic
- Edit the contact information
- Edit the left-hand navigation
- Choose different photos
- Work with a Different Site
How to UPDATE THE BANNER GRAPHIC
- Click on “Update the banner graphic” on the left-hand navigation menu.
- Notice your current background displayed.
- Choose small, medium or large banner text.
- Change your banner text in the text field provided.
- Click the “Update” button.
- If the banner graphic doesn't appear to update, click on the Reload/Refresh button of your web browser.
How to EDIT THE CONTACT INFORMATION
- Click on “Edit the contact information” on the left-hand navigation menu.
- Enter any information you want to appear on your site’s template. All fields are optional.
- The information entered appears in the order entered. The text entered as the “Department Name” will appear in bold. The text entered into the “Email” field will be turned into an e-mail link. All other text will appear in regular text unless specified otherwise.
- All of the fields, particularly the “Other” field, accepts HTML coding. See the HTML Help at the end.
How to EDIT THE LEFT-HAND NAVIGATION
- Click on “Edit the left-hand navigation” on the left-hand navigation menu.
- If your site does not currently have a navigation menu, you will be given the option to start one. If your site already has a navigation menu, you will be given the option to edit your menu.
- If your site wishes to use a header (describes a group of links, but can also be a link itself), click the “Add new header” button.
- Under the “This text” field, enter the text in which you want the header to represent (for example, “Resources”)
- Under the “Links to” field, enter the full URL of the page that the header should link to, if necessary.
- Click “Save.”
- Notice now that you are given the option to “Add new item here” under the newly-created header. Click here to create links for this respective header.
- Under the “This text” field, enter the text in which you want the link to represent (for example, “Students”)
- Under the “Links to” field, enter the full URL of the link.
- Repeat steps 3-9 for the number of headers and links for your site.
How to CHOOSE DIFFERENT PHOTOS
- Click on “Choose different photos” from the left-hand navigation menu.
- On the left, notice “Use in random” and on the right, notice “Default.”
- You may select as many photos as you want to be displayed at random on your website. The default photo will be used in case the random photo cannot be displayed.
- To preview a full-sized image, click on an image.
- Once you have selected an unlimited number of random images and ONE default photo, click the “Set Photo Selections” button.
The contact information fields can accept HTML codes that you enter by hand. Here are the basic ones that you can use:
For bold text:
Surround the text you want to be bold with <b> at the beginning and </b> at the end.
<b>Text here</b> produces Text here
For italic text:
Surround the text you want to be italicized with <i> at the beginning and </i> at the end.
<i>Text here</i> produces Text here
To create a link:
Surround the text with <a href="URL"> at the beginning – putting the URL address in place of URL – and </a> at the end.
<a href=”http://www.stolaf.edu/”>Click here</a> produces Click here
To create a mailto/email link:
Surround the text with <a href="mailto:emailaddress"> at the beginning – putting the email address in place of emailaddress – and </a> at the end.
<a href=”mailto:email@example.com”>E-mail us</a> produces E-mail us
To insert a line break:
Insert <br> where you want the line break.
Text here <br>and here produces Text here