Need Help Interpreting Moonriver Code

[capitoljayhawk]

I like www.moonriverphotography.com (http://www.moonriverphotography.com) (who doesn't?).

I'm trying to figure out a couple of elements of the code there so I can modify it and use it for myself. Can someone answer a few questions?

1. For his front page, I like the font (for the nav bar). How can I tell what font that is and modify my own page for that font?

2. For the same point (navbar), how can I tell what color he is using (that orange-ish color)? I assume there is a hex code that covers this, but I just couldn't identify it in his code.

3. I like the size of his slideshow. How can I tell in his code what the dimension of those pictures is?

4. Am I right that, if I want the uniform effect that he has on his sight with respect to the size of the pics in the slideshow, I need to resize my photos to that single size? (On mine, http://spiegs.smugmug.com, I have photos that are several different sizes. I think the effect is really disconcerting.)

5. Finally, I like the very thin frame that he has around his pictures. Where is that in the code?

Thanks a ton in advance. I'm asking about the code because I'm trying to discern what is going on with CSS. I think I have a decent understanding of HTML, but CSS is Greek to me.

[jfriend]

Moonriver's navbar is 16px, Arial, small-caps. Using the Firebug add-on for Firefox, you can see exactly what CSS rules are active for any element on the page.

You could set that for your navbar with:

#navcontainer {font: arial 16px small-caps;}


The color upon mouse hover comes from this:

#navcontainer ul li a:hover {color: #9e793e;}


For the slideshow size, just do a View / Page Source in the browser and look at the javascript for his slideshow. It's 800x400. The uniform effect comes from making all photos in the slideshow have the same aspect ratio (2:1 in his case). They don't have to be the same size because the slideshow will scale them for you, but they do have to be the same aspect ratio to come out so uniform.

The frame comes from the divs that he put his slideshow inside of and the CSS that refers to those objects. You can see the divs in the View/Page Source and you can see the CSS in either the Firebug or Web Developer add-ons for Firefox (I use both of them).

[capitoljayhawk]

Moonriver's navbar is 16px, Arial, small-caps. Using the Firebug add-on for Firefox, you can see exactly what CSS rules are active for any element on the page.

You could set that for your navbar with:

#navcontainer {font: arial 16px small-caps;}


The color upon mouse hover comes from this:

#navcontainer ul li a:hover {color: #9e793e;}


For the slideshow size, just do a View / Page Source in the browser and look at the javascript for his slideshow. It's 800x400. The uniform effect comes from making all photos in the slideshow have the same aspect ratio (2:1 in his case). They don't have to be the same size because the slideshow will scale them for you, but they do have to be the same aspect ratio to come out so uniform.

The frame comes from the divs that he put his slideshow inside of and the CSS that refers to those objects. You can see the divs in the View/Page Source and you can see the CSS in either the Firebug or Web Developer add-ons for Firefox (I use both of them).


Thanks a ton for the quick help. Seriously appreciated.

Couple of quick follow-ups:
1. How do I make my pictures have a 2:1 aspect ratio? Is this a photoshop function? (I have CS3, but am pretty new to it.)

2. Edit: I have now downloaded firebug. Nice.

3. I tried to view source in IE, but did not (and still cannot) find "arial" anywhere in that document. I'm sure my question is very elementary, but why cannot I see the code you suggested in IE's "view source"??

Thanks again.

[jfriend]

Thanks a ton for the quick help. Seriously appreciated.

Couple of quick follow-ups:
1. How do I make my pictures have a 2:1 aspect ratio? Is this a photoshop function? (I have CS3, but am pretty new to it.)

2. Edit: I have now downloaded firebug. Nice.

3. I tried to view source in IE, but did not (and still cannot) find "arial" anywhere in that document. I'm sure my question is very elementary, but why cannot I see the code you suggested in IE's "view source"??

Thanks again.

If you haven't been cropping your images, then they are probably coming out of your camera at a 3:2 aspect ratio (some cameras produce a 4:3 aspect ratio). I would suggest that you start by just making a gallery of all images that are in their uncropped native aspect ratio and all the same oritentation. Then, set your slideshow to that same aspect ratio. So, if your images are 3:2, then set your slideshow to 600x400. That will get you started. If you wanted to crop everything to 2:1, you would use a tool like Photoshop (or you can even do it in Smugmug). They key is that you have to set the cropping tool to a specific aspect ratio so that it locks in that aspect ratio and guarentees you get it accurately. You then decide which part of the image to keep and which to crop off. Not all photos will work in a 2:1 ratio so you might have to leave out some that just don't work well that way.

I suggested View Source for the slideshow size and the slideshow frame. You don't see most of the CSS with View Source. It actually comes from this line in the HTML file:

<link type="text/css" rel="stylesheet" id="williamsCSS" href="http://www.moonriverphotography.com/include/css/gecko/1.9/win/user_williams-20090114174909-stretch.css" />

Which then links to this external style sheet file (http://www.moonriverphotography.com/include/css/gecko/1.9/win/user_williams-20090114174909-stretch.css).

In Smugmug, most CSS customization is in an included style sheet file (which is a separate file). It's easiest to see those in Web Developer (Firefox add-on) where each included style sheet file is a tab after selection Tools/Web Developers/CSS/Edit menu item.