banner/navbar in smugmug & critique views

[dogwood]

What's the trick for getting a banner AND navbar to span the whole width of a smugmug and/or critique gallery? I know how to make a custom banner for an individual gallery, but if I make it wide enough to span the smugmug gallery (960 pixels, right?), the nav bar is still only 750 pixes wide.

[dogwood]

Okay-- slowly figuring it out after looking at the code for Mike Lane's page:

/* Smugmug Style */
.smugmug #myLogo {width:960px;}
.smugmug #cobrand_footer {width:960px;}

#smugmug {width:960px; padding:0 10px;}
.smugmug #breadcrumb {width:960px; padding:0;}

.pageNav {color:#dadada;}

#smugmug textarea#albumComment {width:955px;}


Now... is it possible to change the width of the navbar on just certain galleries?

[Allen]

Okay-- slowly figuring it out after looking at the code for Mike Lane's page:

/* Smugmug Style */
.smugmug #myLogo {width:960px;}
.smugmug #cobrand_footer {width:960px;}

#smugmug {width:960px; padding:0 10px;}
.smugmug #breadcrumb {width:960px; padding:0;}

.pageNav {color:#dadada;}

#smugmug textarea#albumComment {width:955px;}


Now... is it possible to change the width of the navbar on just certain galleries? Yes it's possible. Define each one separately like below.

#navcontainer {
width:750px; /* width of the navbar container */
margin:0 auto; /* center the navbar */
}

.gallery_123456 #navcontainer {
width:800px; /* width of the navbar container */
margin:0 auto; /* center the navbar */
}

.gallery_987654 #navcontainer {
width:850px; /* width of the navbar container */
margin:0 auto; /* center the navbar */
}

/* Apply to all galleries under category */
.category_Portraits #navcontainer {
width:850px; /* width of the navbar container */
margin:0 auto; /* center the navbar */
}

Hope this helps,
Al

[dogwood]

Al:

That definitely helps. Thank you. :thumb

I'm still getting a weird wrap on my banner though-- even after uploading a replacement that is 960 pixels wide and linking to that in my CSS. I'm using this CSS in addition to the code I previously posted:

.gallery_2333025 #myLogo {
display: block;
background: url(http://petespringer.smugmug.com/photos/124064655-L.jpg);
height: 120px;
width: 960px; }

Here's what it looks like though:
http://www.pbase.com/dogwood_digital/image/73253175.jpg

Any idea what's causing that? I can't figure it out :scratch

[Allen]

Al:

That definitely helps. Thank you. :thumb

I'm still getting a weird wrap on my banner though-- even after uploading a replacement that is 960 pixels wide and linking to that in my CSS. I'm using this CSS in addition to the code I previously posted:

.gallery_2333025 #myLogo {
display: block;
background: url(http://petespringer.smugmug.com/photos/124064655-L.jpg); (http://petespringer.smugmug.com/photos/124064655-L.jpg%29;)
height: 120px;
width: 960px; }

Here's what it looks like though:
http://www.pbase.com/dogwood_digital/image/73253175.jpg

Any idea what's causing that? I can't figure it out :scratch
Maybe it's repeating. What's the link?
Al

[Allen]

/* JAMIE */
.gallery_2333025 #myLogo {
display: block;
background: url(http://petespringer.smugmug.com/photos/124064655-L.jpg);
height: 120px;
background-repeat: no-repeat;
width: 960px; }

[dogwood]

Allen:

Thank you! Exactly what I needed. :D :thumb

[Allen]

Allen:

Thank you! Exactly what I needed. :D :thumb
:thumb Great, lookin' good
Al

[dogwood]

:thumb Great, lookin' good
Al

Uh oh-- still a slight problem. The banner is aligned to the left now (which is good) but cuts off on the right before it spans all the way across-- is it possible to have a banner that wide (960 pixels)? The photo I'm linking to for the banner is definintely that wide, it just won't seem to display like that.

Here's the specific gallery:

http://petespringer.smugmug.com/gallery/2333025

[Allen]

Uh oh-- still a slight problem. The banner is aligned to the left now (which is good) but cuts off on the right before it spans all the way across-- is it possible to have a banner that wide (960 pixels)? The photo I'm linking to for the banner is definintely that wide, it just won't seem to display like that.

Here's the specific gallery:

http://petespringer.smugmug.com/gallery/2333025 The banner on that page is 800px × 113px not 960.
You used the -L, change it to -O and it's 960px x 135px.
Al

Edit: Don't forget height is now 135px,
height: 120px;

[dogwood]

The banner on that page is 800px × 113px not 960.
You used the -L, change it to -O and it's 960px x 135px.
Al

Edit: Don't forget height is now 135px,
height: 120px;

That explains it. I knew it was something simple... and I changed the height previously to keep it from repeating, but that's because I used the -L version.

Thank you so much, Allen!