July 02, 2007
The logos are here! Updating the logo on your Web site
Since the new logo was announced many of you have been asking when the new files will be available and what will be involved. Well today is the day! The new logo files are now online and ready to be downloaded. I'm posting the instructions below. Additional information is available in the Web Toolkit.
Implementing the new sun logo on your site is easy; it's simply a matter of replacing two image files.
Replacing the files
- Go to the Banner Logos & Photos page. This page features the files for gray banners. If your site uses a different color, just choose that color in the menu and follow the link to that page.
- Right click (Windows) or Ctrl-click (Mac) on the Left Edge image and save it to the images directory for your Web site. If you have not renamed your original files you will be told that the file already exists and asked if you want to replace it. Say yes*.
- Right click (Windows) or Ctrl-click (Mac) on the Main Logo image and save it to the images directory for your Web site. If you have not renamed your original files you will be told that the file already exists and asked if you want to replace it. Say yes.
- Upload the new files to your Web server using Dreamweaver or your preferred file transfer program.
- Visit your Web site to make sure the new images are now visible on your site.
* The new image files are being distributed with the same names as the old files, so that users won't have to edit their HTML files. If you renamed your original image files you will have to rename the new files correspondingly.
Examples
Web site banners currently consist of three images. The left half of the square, the right half of the logo, and the right hand background photo. Only the left and right logo files will be replaced as illustrated below.
The old left edge of the blue square in the old logo will be replaced with a plain white rectangle.
Old Left Edge - left_logo_edge.gif
New Left Edge - left_logo_edge.gif
The right side of the old logo will be replaced with the new logo.
Old Right Logo - logo_CWRU_navy.gif
New Logo - logo_CWRU_navy.gif
Troubleshooting
If you're still not seeing the new logo on your site after following the above instructions, you'll want to make sure that the files are in the proper directory and that they have the correct name. To verify what the names and directories should be, go to your site, choose "View Source" and look for something similar to this:
<td><img alt="" id="leftlogo" src="images/left_logo_edge.gif" width="24" height="50" /></td> <td colspan="2" valign="top"> <table cellpadding="0" border="0" cellspacing="0" summary="layout"> <tr> <td><a href="http://www.case.edu"><img alt="case western reserve university" src="images/logo_CWRU_grey.gif" width="300" height="108" /></a></td> <td valign="bottom" class="masthead"><h1>(h1 style) SITE NAME</h1></td>
This example shows that the files left_logo_edge.gif and logo_CWRU_grey.gif are both located in the images directory. If your path looks different, make sure you copy the files to the directory indicated. If your file names don't match, simply rename name your images to match the file names shown in your code.
After uploading the image files again, refresh the page in your browser and the new logo should now be visible.
Stumble It!
Posted by: Heidi Cool July 2, 2007 09:10 AM | Category: Announcements , Heidi's Entries , How-to , branding
Trackbacks
Trackback URL for this entry is: http://blog.case.edu/webdev/mt-tb.cgi/14297Post a comment
Posted by: hac4 (Heidi Cool) July 2, 2007 09:10 AM | Comments (5) | Trackback
http://blog.case.edu/webdev/2007/07/02/2007logos.html
Office of Marketing and Communications
http://www.case.edu/univrel/marcomm/
http://blog.case.edu/webdev/
216.368.4440
Comments
The banner on our blog is not made up of 2 different parts.
http://www.case.edu/med/ccrhd/images/casenavy.gif
When I download the new banner and upload it the left edge is outside the page. It seems to be aligning left.
The new banner (without the left edge) is 300x108 while the current banner is 324x108.
found the solution here:
http://www.case.edu/univrel/marcomm/web/toolkit2007/templates2007/banners/css.html
dave
I'm glad you found it! Not many people (besides me) use this version, but I wanted to make sure it was available.
Heidi,
I suggest you use the first alt-tag in the troubleshooting example too.
By the way, can you guess why this is one of my favorite blogs?
Case
Good catch Case!
Rather than leaving the alt tag blank for the left image, users would be better served by adding some sort of descriptive text such as "spacer image" or "logo left." While the image is blank, its existence will be indicated in non-graphical browsers.
<img alt="left logo " id="leftlogo" src="images/left_logo_edge.gif" width="24" height="50" />