Using a different, smaller banner on gallery pages?

[Soppy]

Is it possible to use a smaller banner on my gallery pages than on the HTML ones I have? I feel like right now my banner is a little too big for the galleries, but I can't easily fit everything without it being that large. Does anyone know the CSS to do this without messing up the position on all my other pages? Thanks a lot guys!

[jfriend]

You just define two banners in your custom HTML. Hide the new smaller one by default and you have what you have now with no change. Then, on specific pages, you hide the larger one and show the smaller one. The hidden one doesn't affect anything. Each banner has it's own CSS to position it properly which does not affect the other as long as only one is showing at a time.

For example, if you create a second banner called my_banner_small, you would add this CSS to show it on only on gallery pages (which hiding your existing banner on gallery pages):

/* hide small banner by default */
#my_banner_small {display: none;}

/* hide large banner on gallery pages */
.galleryPage #my_banner {display: none;}

/* show small banner on gallery pages */
.gallerypage #my_banner_small {display: block;}

[Soppy]

Would there be a way to do this so that it only showed the small one under certain categories? I don't want to have to edit my CSS each time I add a new gallery...

[jfriend]

Would there be a way to do this so that it only showed the small one under certain categories? I don't want to have to edit my CSS each time I add a new gallery...Yes, tell what category or categories?

[Soppy]

Everything under Clients, Prints, and Portfolio I would like to have a small banner, whereas I would like the HTML pages to have the regular banner. Thanks for the quick reply!

[jfriend]

Everything under Clients, Prints, and Portfolio I would like to have a small banner, whereas I would like the HTML pages to have the regular banner. Thanks for the quick reply!You would use CSS like this:

/* hide small banner by default */
#my_banner_small {display: none;}

/* hide large banner on gallery pages */
.category_Clients #my_banner,
.category_Prints #my_banner,
.category_Portfolio #my_banner {display: none;}

/* show small banner on gallery pages */
.category_Clients #my_banner_small,
.category_Prints #my_banner_small,
.category_Portfolio #my_banner_small {display: block;}

FYI, the Portfolio link in your navbar is not working for me in Firefox.

[Soppy]

Thanks for the heads up, it is simply because I have not added photos to the gallery yet, I made it redirect to the homepage for the time being. It will be fixed, currently just there as a place holder.

I will try that in just a second, soon as I figure out why hiding the breadcrumb on some pages is making all the text disappear too lol

[Soppy]

What do I need to do to designate which banner is small and which is the regular one? Just name one "my_banner_small" and the other "my_banner" ?

[jfriend]

What do I need to do to designate which banner is small and which is the regular one? Just name one "my_banner_small" and the other "my_banner" ?See 2nd paragraph in post #2.

[Soppy]

Alright so I need to define them in my custom HTML as my_banner and my_banner_small. Since I have a streatchy header, with repeating left and right elements, how would I do this correctly? I need the left and right elements to be smaller as well so wouldn't that be additional CSS?


Sorry I missed the part in the first post by the way.

[jfriend]

Alright so I need to define them in my custom HTML as my_banner and my_banner_small. Since I have a streatchy header, with repeating left and right elements, how would I do this correctly? I need the left and right elements to be smaller as well so wouldn't that be additional CSS?


Sorry I missed the part in the first post by the way.In your case, you could make a whole new myHeaderWrapperSmall div and give it it's own appropriate CSS and image and put myHeaderWrapperSmall in the above CSS instead of my_banner_small.

[Soppy]

Alright I will do that.

Pardon my CSS ignorance, but how do I go about creating a new div? That goes with the CSS code correct?

[jfriend]

Alright I will do that.

Pardon my CSS ignorance, but how do I go about creating a new div? That goes with the CSS code correct?Just make a copy of your current banner right before or after it and change the id values.

[Soppy]

Alright so here is what I have now for that code. The Small banner isn't showing up in the galleries for some reason...

/*HEADER BANNER*/
#myHeaderWrapper
{
background: transparent url(http://shutterbum.smugmug.com/photos/832579528_fnjPu-O-1.png) repeat-x;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader

(enabled=true,sizingmethod=image,src='http://shutterbum.smugmug.com/photos/832579528_fnjPu-O-1.png');
}

#myBanner
{
background: transparent url(http://shutterbum.smugmug.com/photos/814189380_u6NaY-O-1.png) no-repeat;
_backgroud:none;

_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader

(enabled=true,sizingmethod=image,src='http://shutterbum.smugmug.com/photos/814189380_u6NaY-O-1.png');
height: 96px;
width: 612px;
margin: 0 auto;
}
/*END HEADER BANNER*/






/*SMALL HEADER BANNER*/
#myHeaderWrapperSmall
{
background: transparent url(http://shutterbum.smugmug.com/photos/811045857_tJeYv-O.png) repeat-x;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader

(enabled=true,sizingmethod=image,src='http://shutterbum.smugmug.com/photos/811045857_tJeYv-O.png');
}

#myBannerSmall
{
background: transparent url(http://shutterbum.smugmug.com/photos/811045857_tJeYv-O.png) no-repeat;
_backgroud:none;

_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader

(enabled=true,sizingmethod=image,src='http://shutterbum.smugmug.com/photos/811045857_tJeYv-O.png');
height: 96px;
width: 612px;
margin: 0 auto;
}
/*END SMALL HEADER BANNER*/





/*HIDE SMALL BANNER BY DEFAULT*/

#myBannerSmall {display: none;}
#myHeaderWrapperSmall {display: none;}

/*END HIDE SMALL BANNER BY DEFAULT*/




/*HIDE BANNER WRAPPER ON GALLERY PAGES*/

.category_Clients #myHeaderWrapper,
.category_Prints #myHeaderWrapper,
.category_Portfolio #myHeaderWrapper {display: none;}

/*END HIDE BANNER WRAPPER ON GALLERY PAGES*/





/*HIDE BANNER ON GALLERY PAGES*/

.category_Clients #myBanner,
.category_Prints #mmyBanner,
.category_Portfolio #myBanner {display: none;}

/*END HIDE BANNER ON GALLERY PAGES*/






/*SHOW SMALL BANNER ON GALLERY PAGES*/

.category_Clients #myHeaderWrapperSmall,
.category_Prints #myHeaderWrapperSmall,
.category_Portfolio #myHeaderWrapperSmall {display: block;}

/*END SHOW SMALL BANNER ON GALLERY PAGES*/




/*SHOW SMALL BANNER WRAPPER ON GALLERY PAGES*/

.category_Clients #myBannerSmall,
.category_Prints #myBannerSmall,
.category_Portfolio #myBannerSmall {display: block;}

/*END SHOW SMALL BANNER WRAPPER ON GALLERY PAGES*/






/*HIDE LARGE BANNER ON GALLERY PAGES*/

.category_Clients #my_banner,
.category_Prints #my_banner,
.category_Portfolio #my_banner {display: none;}

/*END HIDE LARGE BANNER ON GALLERY PAGES*/




/*SHOW SMALL BANNER ON GALLERY PAGES*/

.category_Clients #my_banner_small,
.category_Prints #my_banner_small,
.category_Portfolio #my_banner_small {display: block;}

/*END SHOW SMALL BANNER ON GALLERY PAGES*/

[denisegoldberg]

Alright so here is what I have now for that code. The Small banner isn't showing up in the galleries for some reason...
Check the URL on the small banner - it is set to the same as the url for the background of the wrapper. Probably needs to be set for an image.

--- Denise

[Soppy]

I noticed that 10 mins ago, and I thought I changed it and edited my post... I'll change it again I suppose lol

[jfriend]

I noticed that 10 mins ago, and I thought I changed it and edited my post... I'll change it again I suppose lolYou also haven't put myHeaderWrapperSmall into your custom header per our previous conversation.

[Soppy]

Nvmd, didn't see the above post...

[Soppy]

Sorry about that, forgot to add it in. Thanks for your help and patience John, I know I'm a bit slow sometimes code wise.