Built a small slideshow to act as an icon for my header, increased the width of the my_banner div in CSS so the iframe would fit next to the banner, targeted (src=)the slideshow to the iframe configuration in the Custom Header area (align: right;), and it works as planned (small screens, mobile devices, etc. as well) www.theavianzone.com Now I would like to try to target each gallery banner with the same size iframe in the same position but featuring photos of birds that appear in the gallery. Seems like it should work with the class .category_blah_blah in CSS since that's how the banners (background) are input to match the galleries. Bet I'm wrong. Stumped. I have other plans for the bio box. Any suggestions?

Originally Posted by jkinglet Built a small slideshow to act as an icon for my header, increased the width of the my_banner div in CSS so the iframe would fit next to the banner, targeted (src=)the slideshow to the iframe configuration in the Custom Header area (align: right;), and it works as planned (small screens, mobile devices, etc. as well) www.theavianzone.com Now I would like to try to target each gallery banner with the same size iframe in the same position but featuring photos of birds that appear in the gallery. Seems like it should work with the class .category_blah_blah in CSS since that's how the banners (background) are input to match the galleries. Bet I'm wrong. Stumped. I have other plans for the bio box. Any suggestions?

Anything in the header is on every page. You will have to define separate banner div's to each.
Then is CSS define where each is shown and not shown.
<div id="my_banner">
<div id="my_banner_Cranes">

#my_banner {display:none;}
.homepage #my_banner {display:block;}
#my_banner_Cranes {display:none;}
.category_Cranes #my_banner_Cranes {display:block;}

Originally Posted by Allen Anything in the header is on every page. You will have to define separate banner div's to each. Then is CSS define where each is shown and not shown. <div id="my_banner"> <div id="my_banner_Cranes"> #my_banner {display:none;} .homepage #my_banner {display:block;} #my_banner_Cranes {display:none;} .category_Cranes #my_banner_Cranes {display:block;}

Thanks Al, I'll give it a shakedown this afternoon.

Originally Posted by jkinglet Thanks Al, I'll give it a shakedown this afternoon.

worked on shorebirds first. got the shorebirds banner there, but can't get it to the banner position?
www.theavianzone.com here's the css. Looks like I have the shorebirds banner as the background for the whole page not just the banner div area. Homepage is fine.

#my_banner {display:none;}
.homepage #my_banner {display:block;}
#my_banner_shorebirds {
width: 950px;
height: 150px;
position: absolute top;
}
.category_Coastal_and_Inland_Shorebirds #my_banner_shorebirds {
background: url(http://theavianzone.smugmug.com/phot...-QDrr8k8-L.png) no-repeat;
}

Lost my stretch too?

Originally Posted by jkinglet worked on shorebirds first. got the shorebirds banner there, but can't get it to the banner position? www.theavianzone.com here's the css. Looks like I have the shorebirds banner as the background for the whole page not just the banner div area. Homepage is fine. #my_banner {display:none;} .homepage #my_banner {display:block;} #my_banner_shorebirds { width: 950px; height: 150px; position: absolute top; } .category_Coastal_and_Inland_Shorebirds #my_banner_shorebirds { background: url(http://theavianzone.smugmug.com/phot...-QDrr8k8-L.png) no-repeat; } Lost my stretch too?

First thing is in your header change this at the bottom

</div>\
<div id="my_banner_shorebirds" <="" div="">

to this

</div>
<div id="my_banner_shorebirds"></div>

Then your CSS will need some tweaking, will look at that next.

Originally Posted by jkinglet worked on shorebirds first. got the shorebirds banner there, but can't get it to the banner position? www.theavianzone.com here's the css. Looks like I have the shorebirds banner as the background for the whole page not just the banner div area. Homepage is fine. #my_banner {display:none;} .homepage #my_banner {display:block;} #my_banner_shorebirds { width: 950px; height: 150px; position: absolute top; } .category_Coastal_and_Inland_Shorebirds #my_banner_shorebirds { background: url(http://theavianzone.smugmug.com/phot...-QDrr8k8-L.png) no-repeat; } Lost my stretch too?

What exactly is your shorebird category, this is all I could find.

category_Coastal_and_Inland_Shorebirds

BTW, add a space before no-repeat, that could bork your CSS. The space is missing on a bunch of your banner rules.

#my_banner {
width: 950px;
height: 150px;
background: url(http://www.theavianzone.com/photos/i...-Qbx55h8-L.png) no-repeat;
}

Originally Posted by jkinglet ...

Also move the div up to the top below your default banner.

..... </iframe></div>

<div id="my_banner_shorebirds"></div>

<div id="navcontainer">

EDit: left out the red >

Missing "

<div id="my_banner_shorebirds"></div>

Remove red and space " n

<div id="navcontainer"="">

Originally Posted by Allen Missing " <div id="my_banner_shorebirds"></div> Remove red and space " n <div id="navcontainer"="">

cat jumped up on my lap and I hit the wrong key! got the stretch back..header to come?

Try this

#my_banner {
   display:none;
   width: 950px;
   height: 150px;
   background: url(http://www.theavianzone.com/photos/i-Qbx55h8/0/L/i-Qbx55h8-L.png) no-repeat;
}

.homepage #my_banner {display:block;}

#my_banner_shorebirds {display:none;}
.category_Coastal_and_Inland_Shorebirds #my_banner_shorebirds {
      display:block;
      width: 750px;
      height: 150px;
      background: url(http://theavianzone.smugmug.com/photos/i-QDrr8k8/0/L/i-QDrr8k8-L.png) no-repeat;
}

.category_Coastal_and_Inland_Shorebirds #my_banner_shorebirds {
background: url(http://theavianzone.smugmug.com/photos/i-QDrr8k8/0/L/i-QDrr8k8-L.png) no-repeat;
} 

Originally Posted by Allen Try this #my_banner { display:none; width: 950px; height: 150px; background: url(http://www.theavianzone.com/photos/i-Qbx55h8/0/L/i-Qbx55h8-L.png) no-repeat; } .homepage #my_banner {display:block;} #my_banner_shorebirds {display:none;} .category_Coastal_and_Inland_Shorebirds #my_banner_shorebirds { display:block; width: 750px; height: 150px; background: url(http://theavianzone.smugmug.com/photos/i-QDrr8k8/0/L/i-QDrr8k8-L.png) no-repeat; } .category_Coastal_and_Inland_Shorebirds #my_banner_shorebirds { background: url(http://theavianzone.smugmug.com/photos/i-QDrr8k8/0/L/i-QDrr8k8-L.png) no-repeat; }

Got it..thanks a bunch..just duplicate for others and add my iframe? I sretched the display block to 950 to fit in the iframe..that way it's anchored and won't move around on small screens. Thanks again!

Originally Posted by jkinglet Got it..thanks a bunch..just duplicate for others and add my iframe? I sretched the display block to 950 to fit in the iframe..that way it's anchored and won't move around on small screens. Thanks again!

Looks great. Noticed your Snowy Plovers, lovely, been watching all year and haven't seen one migrating thru here.

Originally Posted by Allen Looks great. Noticed your Snowy Plovers, lovely, been watching all year and haven't seen one migrating thru here.

Thanks.. I missed the Plovers this year due to a nasty hospital stay. headed down to Arcata with a friend late next week to shoot..he knows the spots. Will work my way down the Oregon coast with camera in tow. Thanks again for the help..I'll clean up the space issue in the CSS as I progress. BTW, like the SM feature to upload pictures directly to my Facebook fan page(s). Just started a TAZ page www.facebook.com/theavianzone and my other www.facebook.com/jefflarsenbirdphotography Fun pasttime.

Allen the magnificent..check out the owl banner and slideshow icon. www.theavianzone.com

Originally Posted by jkinglet Allen the magnificent..check out the owl banner and slideshow icon. www.theavianzone.com

Allen, Another, assignment, if you choose to accept it! How do I make the iframe blend into the background like everything else on the page when a customer clicks on the image to make it larger. Right now if you click on, say, the short-eared owl picture, the iframe slideshow continues to play over the top of the image. I tried z-index in the iframe style..no luck. Thanks for the like by the way #1. Plan to start building on that over the next few weeks.

Originally Posted by jkinglet Allen, Another, assignment, if you choose to accept it! How do I make the iframe blend into the background like everything else on the page when a customer clicks on the image to make it larger. Right now if you click on, say, the short-eared owl picture, the iframe slideshow continues to play over the top of the image. I tried z-index in the iframe style..no luck. Thanks for the like by the way #1. Plan to start building on that over the next few weeks.

See if this solves it.

#lightBoxStage { background:#000;}

Originally Posted by Allen See if this solves it. #lightBoxStage { background:#000;}

That did..thanks again...Jeff

I researched and found how last year you described changing the caption font size on the same larger image I was just talking about. worked like a charm. Problem is that the caption font size on the original image returned to the larger, ugly default size when I made the CSS change. And I can't seem to change it. This CSS below worked perfectly for the larger image caption:

#lightBoxCaption,
.caption {font-size: 90% !important;
text-align: left;}

I also have this in my CSS:

.caption {font-size: 90% !important}

And this:

.smugmug #caption_bottom {
width:300px;
text-align: left;
margin: 0 auto;
}

Guess I need to know what div (like #lightBoxCaption) SM uses for the caption below the larger picture on the gallery page? Is there a list somewhere of SmugMug divs? Got it!

.smugmug #caption_bottom {
width:300px;
text-align: left;
margin: 0 auto;
font-family: arial;
font-size: 90% !important}

Originally Posted by jkinglet That did..thanks again...Jeff

Except for IE8/9..perfect in all other browsers.

Originally Posted by jkinglet Except for IE8/9..perfect in all other browsers.

Try using a point size instead of %
20pt