Updating Your Digital Media Player

Click on one of the videos below to watch a tutorial on how to update your digital media player.

If you do not have Quicktime you can view the tutorial using the Flash video below:

Tutorial Video (Flash Player)

Please feel free to email me if you have any questions, gauntzd@wou.edu.

Adding a dotted line separator to your webpage Using Contribute

Open Contribute and navigate to the page where you would like to add a dotted separator line. Put the cursor where you would like to insert the line.


Hit the return key.


Click on the Styles menu.


Select "separator" from the drop down.


Then click "Publish".


And your dotted separator will now appear.



Please let me know if you have further questions gauntzd@wou.edu or 503-838-8215

jQuery Lightbox

First you will need to save out all your images for the web. You will want the resolution to be 72 and no larger than 900pixels wide or high. You will also need to save out a thumbnail version of your image. It is nice if they are all the same size and same dimension. For example 100pixels by 100pixels and crop them to fit that area.

Then open the page you would like to add the lightbox gallery to in Dreamweaver.

Paste this code right under the <!-- TemplateBeginEditable name="head" -->
 
    <script src="/include_files/plugins/jquery-lightbox-0.5/js/jquery.lightbox-0.5.js" type="text/javascript"></script>
    <link href="/include_files/plugins/jquery-lightbox-0.5/css/jquery.lightbox-0.5.css" media="screen" rel="stylesheet" type="text/css"></link>
 
    <script type="text/javascript">
    $(function() {
        $('#gallery a').lightBox();
    });
    </script>

<style type="text/css">
/* jQuery lightBox plugin - Gallery style */
#gallery {
background-color: #fff;
padding: 10px;
}
#gallery ul { list-style: none; }
#gallery ul li { display: inline; }
#gallery ul img {
border: 5px solid #fff;
border-width: 5px;
}
#gallery ul a:hover img {
border: 5px solid #3e3e3e;
border-width: 5px;
color: #fff;
}
#gallery ul a:hover { color: #fff; }
</style>

Then paste this code where you want the thumbnails to show up and replace the path to the image, description, path to your thumbnail image, and alt tag.

<div id="gallery">
    <ul>
        <li><a href="path-to-your-big-image-goes-here.jpg" title="Description of your image here, which will show up below the image once clicked"><img src="path-to-your-thumbnail-image-goes-here.jpg" width="100" height="100" alt="Description of your image here" /></a>
        </li>
    </ul>
</div>

For each image you have you will want to copy and paste the whole <li> tag. For example if you have four images you will need to have four <li> tags.

        <li><a href="path-to-your-big-image-goes-here.jpg" title="Description of your image here, which will show up below the image once clicked"><img src="path-to-your-thumbnail-image-goes-here.jpg" width="100" height="100" alt="Description of your image here" /></a>
        </li>

        <li><a href="path-to-your-big-image-goes-here.jpg" title="Description of your image here, which will show up below the image once clicked"><img src="path-to-your-thumbnail-image-goes-here.jpg" width="100" height="100" alt="Description of your image here" /></a>
        </li>

        <li><a href="path-to-your-big-image-goes-here.jpg" title="Description of your image here, which will show up below the image once clicked"><img src="path-to-your-thumbnail-image-goes-here.jpg" width="100" height="100" alt="Description of your image here" /></a>
        </li>

        <li><a href="path-to-your-big-image-goes-here.jpg" title="Description of your image here, which will show up below the image once clicked"><img src="path-to-your-thumbnail-image-goes-here.jpg" width="100" height="100" alt="Description of your image here" /></a>
        </li>


View an example of lightbox being used, http://www.wou.edu/las/creativearts/theater_dance/dance/photodance_test.php


Please let me know if you have further questions gauntzd@wou.edu or 503-838-8215

Editing Upcoming Events

Click on the video below to watch a tutorial on how to Edit Upcoming Events.

Tutorial Video (Flash Player)

If you would like to edit the Upcoming Events section in the left nav of your site you will need to log on to ts.wou.edu on the Remote Desktop. Within the X:drive/include_files/subsite_files folder you will find your site's folder there. Once inside the folder you will want to double click on the file called left_nav.php. It will open the file in Dreamweaver. Click the Code view button at the top


Depending on which month you want to show it will either be month01 for  January all the way to month12 for December. Change the month to the one you would like. Change the number date to what you would like it to be, if it is only a single digit put a 0 infront. (example January you would put 01) Then change the name of the event.

Then hit save. Refresh the browser and your changes should take effect.

Please let me know if you have further questions gauntzd@wou.edu or 503-838-8215

Updating a PDF Link

Click on the video below to watch a tutorial on how to Update a PDF Link.

Tutorial Video (Flash Player)

To update a PDF link on your site you will need to log on to the Remote Desktop and locate the original file that you created the PDF from. For example a Word Document. Once your changes are made and you are ready to post it to the web do a "Save as a PDF"  Name it the exact name as the current PDF file on the web. Example if the path to the file is http://www.wou.edu/president/advancement/smith/documents/SeasonTicketsform2012-13.pdf you will need to save the PDF on the X:drive in the presidents/advancement/smith/documents folder with the name SeasonTicketsform2012-13.pdf A message box will pop up saying "The file SeasonTicketsform2012-13.pdf already exists. Do you want to replace the existing file?" Click "Yes" Then open your browser and refresh the page and the new PDF file should appear.

Please feel free to email me if you have any questions, gauntzd@wou.edu.

Edit a WOWSlider Slideshow

Click on the video below to watch a tutorial on how to Edit a WOWSlider Slideshow.

Tutorial Video (Flash Player)

Please feel free to email me if you have any questions, gauntzd@wou.edu.

Refreshing the Digital Signage

Click on the video below to watch a tutorial on Refreshing the Digital Signage.

Tutorial Video (Flash Player)

Please feel free to email me if you have any questions, gauntzd@wou.edu.