Would it be possible for the Class Creator techs to enlarge the upload area that goes in the diagonal box at the top of Professional Design #5? I'd like to see more of my logo and less of the diagonal box.

We can't modify the template for you, but there is a hack you can use if you're comfortable trying just a little HTML code.

On your preferences page, at the bottom, there is a text box for Google Analytics code. Any code you put into this box is rendered on every page of your site. You can use that fact to overlay an image over the header on your site. PLEASE NOTE: anything you put into this box CAN cause problems with the display of your site if it is not written correctly. With that in mind, here is a snippet of sample code you can try with modifications as indicated:

<div style="z-index:10;position:absolute; top:18px; /* This is the top of your image on the page */ left:100px /* This is the left of your image on the page */;"> <img style=" width:166px; /* This is the width of your image */" src="http://your.image.location.here"></div>

Eric,

That is one of the best tips I've seen here. We also use Pro Design 5, and because of this info about the Preferences-page code, I've been able to create a custom header design for our site.

Although this tip is not for anyone who is squeamish about inserting such code, it is a great way to give your site some unique personality (as opposed to the limited and dated choices in the current CC designs) without losing the organization and functionality that makes CC a great service.

For those who want to create a full horizontal banner instead of just enlarging the logo, here's what we did:

Create your banner. Ours is 897 x 116 pixels. We stored it on a separate site.

Then we made these changes to the code above:

top:14px; /* This is the top of your image on the page */ left:14px /* This is the left of your image on the page */;">
Then change the width value in the img tag. We wanted the image clickable (reload home page) so we added the link code before and after the img tag:

<a href="http://www.ahhs72.com"> <img style=" width:897px; /* This is the width of your image */" src="http://www.rustycutchin.com/images/AHHS-NewBanner2.jpg"></a></div>
Hopefully, CC will make a custom header even easier to implement with the coming upgrades.

Click on our logo (at left) to see the header design.

How did you make the "matrix" of old/new pictures on the Home page?

Tom,

The "then and now" photos, as well as the new header, were done in Photoshop. For the grid of faces, it was just a matter of setting up an image at the right dimensions (our page has two at 820 x 1140, stacked vertically). Then you copy and paste in the photos, resizing them to fit. You can resize the photos before or after pasting them.

The process can be tedious, but if you know Photoshop it can also go quickly. Other image editors should be able to do the same basic tasks.

Save Photoshop image at 72 ppi, then save image for web, med resolution.

Rusty, you did a great job on your class website. One of the best I've seen. Thanks for your input!
~Susan

Hey Susan,

Thanks for the compliment. Always appreciate a good word from a state-mate and year-mate.

Hope your reunion came or is coming off well.

Cheers!