CSS: Styling individual pages

[{JT}]

With last nights changes you can now target specific gallery styles, or specific galleries that you want to have a different look:

http://blogs.smugmug.com/web-tricks/2005/08/18/styling-individual-pages/

[This is for the more advanced pros who are comfortable with CSS; but don't be afraid to try]

Most hints in the blog will be included in the upcoming documentation.

[mbrady]

Oooo - that's a good one!!

Any chance this will be expanded to be able to individually style the category pages in addition to galleries?

Matt

[{JT}]

Yes it will be, the naming convetion will probably be .category_NAME or something similar. Now, this probably won't spill over to the gallery page itself once you get there though.

Oooo - that's a good one!!

Any chance this will be expanded to be able to individually style the category pages in addition to galleries?

Matt

[mbrady]

Yes it will be, the naming convetion will probably be .category_NAME or something similar. Now, this probably won't spill over to the gallery page itself once you get there though.
Sounds good, I don't need it to spill over into the individual galleries within the category anyway.

Is this something that may appear with the rest of the rapid fire changes coming these last couple days or is it a ways off still?

Thanks!

Matt

[{JT}]

I can't give official time frames, but I'd say within the next week or so is good. Foo camp is this weekend and Don will be gone, but I may have it done by then.



Sounds good, I don't need it to spill over into the individual galleries within the category anyway.

Is this something that may appear with the rest of the rapid fire changes coming these last couple days or is it a ways off still?

Thanks!

Matt

[spider-t]

This feature is cool. OK 2 questions:

1.) How can I turn off the "other sizes:" text when there are no other sizes? Like when I have original and large disabled. Or even, how can I turn off "other sizes:" when and I'm in the smugmug gallery style?

example gallery: http://www.trishtunney.com/gallery/596147

2.) How do I get the keywords to not show up under the photo?

I tried both of these to no avail:

#toggleKeywords {
display: none;
}

.keywords { display: none; }

thanks!
Trish
(smugmug rocks!)

[Mac Write]

You need to add an ID for the home page. I want to remove "Users galleries" and "users Home" from the home page, but if I do display:none for headmd it also affects the gallery names on the homepage (and nothing else on other pages so far from my testing, can't completely confirm though).

[bigwebguy]

With last nights changes you can now target specific gallery styles, or specific galleries that you want to have a different look:

http://blogs.smugmug.com/web-tricks/2005/08/18/styling-individual-pages/

[This is for the more advanced pros who are comfortable with CSS; but don't be afraid to try]

Most hints in the blog will be included in the upcoming documentation. looks like there is a bug the first time you enter a gallery where the gallery id is being truncated after the "gallery_" ie. there is no ID number.

after you click a thumbnail, the gallery id comes up fine.

example, go here http://bigwebguy.smugmug.com/Madeline then click on the month 11 gallery (or any gallery really) then check out the gallery id. Now click a thumbnail to reload the page and check out the gallery id again.

[bigwebguy]

also while i'm thinking about it, i think the gallery_id class should be applied to the body tag, that way you could specify backgrounds for the entire page, as well as giving you more structure in your stylesheets.

[jamescalder]

2.) How do I get the keywords to not show up under the photo?

I tried both of these to no avail:

#toggleKeywords {
display: none;
}

.keywords { display: none; }went through the same myself - still unable to make the Keywords go bye-bye.

JT, Andy, Baldy? your expertise would be greatly appreciated.

:):

j

[{JT}]

you need to do this to achieve the affect you want:

#imageInfo {
display: none;
}

This feature is cool. OK 2 questions:

1.) How can I turn off the "other sizes:" text when there are no other sizes? Like when I have original and large disabled. Or even, how can I turn off "other sizes:" when and I'm in the smugmug gallery style?

example gallery: http://www.trishtunney.com/gallery/596147

2.) How do I get the keywords to not show up under the photo?

I tried both of these to no avail:

#toggleKeywords {
display: none;
}

.keywords { display: none; }

thanks!
Trish
(smugmug rocks!)

[{JT}]

As I have stated elsewhere, the new homepages are coming.

You need to add an ID for the home page. I want to remove "Users galleries" and "users Home" from the home page, but if I do display:none for headmd it also affects the gallery names on the homepage (and nothing else on other pages so far from my testing, can't completely confirm though).

[{JT}]

good catch, I will figure that out today.

looks like there is a bug the first time you enter a gallery where the gallery id is being truncated after the "gallery_" ie. there is no ID number.

after you click a thumbnail, the gallery id comes up fine.

example, go here http://bigwebguy.smugmug.com/Madeline then click on the month 11 gallery (or any gallery really) then check out the gallery id. Now click a thumbnail to reload the page and check out the gallery id again.

[{JT}]

I have thought about doing it that way ... it would still be a class though.



also while i'm thinking about it, i think the gallery_id class should be applied to the body tag, that way you could specify backgrounds for the entire page, as well as giving you more structure in your stylesheets.

[Mike Lane]

I'm still trying to figure out a smart way for me to change my background and header to match up with the various gallery styles. Actually it would only need to change for the smugmug small style.

I'd like to be able to have a static width page (meaning background container if I have one, header, footer and cobrand footer) that is only 10 or 20 px wider than the smugmug small div width. I have it set up to work with the smugmug style just fine but if the gallery style is set to smugmug small by the user or by the script, then I'd like to change the stuff that is outside of and not affected by the #elegant_small definition.

Shorter: I want to squash my my whole page width when smugmug small is selected.

Creating the necessary styles isn't difficult, linking to various stylesheets isn't hard either. I just need a way to link into either the switcher js or to the gallery style definition.

Here's an idea, can we make it so the gallery style ID layer is at the very top of the page, above our cobranding so we can modify everything including our added header and footers on a per gallery style basis?

[Mike Lane]

I'm still trying to figure out a smart way for me to change my background and header to match up with the various gallery styles. Actually it would only need to change for the smugmug small style.

I'd like to be able to have a static width page (meaning background container if I have one, header, footer and cobrand footer) that is only 10 or 20 px wider than the smugmug small div width. I have it set up to work with the smugmug style just fine but if the gallery style is set to smugmug small by the user or by the script, then I'd like to change the stuff that is outside of and not affected by the #elegant_small definition.

Shorter: I want to squash my my whole page width when smugmug small is selected.

Creating the necessary styles isn't difficult, linking to various stylesheets isn't hard either. I just need a way to link into either the switcher js or to the gallery style definition.

Here's an idea, can we make it so the gallery style ID layer is at the very top of the page, above our cobranding so we can modify everything including our added header and footers on a per gallery style basis?
Ooh, or as the person above me mentioned, perhaps the gallery style ID could be linked to the body. body id={elegant_small or whatever}. That'd be so handy!

[{JT}]

If we do something like this then it would be only for a class and not an ID:
<body class="gallery_793">

The problem is that I use the template name to define the width of the layout below. If we did it other wise then some Pros only want to change the header and have it not screw up the design below.

I will keep thinking, but for now this is the plan.

Ooh, or as the person above me mentioned, perhaps the gallery style ID could be linked to the body. body id={elegant_small or whatever}. That'd be so handy!

[tmlphoto]

#1 How can I get rid of the "TML Photography's Home" text above the bio and also get rid of "TML Photography's gallery catagories" text on the top line of my galleries. I don't mind the spacing so turning them black on my black background would work for me. My knowledge of CSS is at the cut & paste level. TIA.

#2 I got rid of the green text, but still have green boxes around my thumbnails. How can I change this to grey or white?

#3 Can the green splash on the cart logo be changed?

[jamescalder]

you need to do this to achieve the affect you want:

#imageInfo {
display: none;
}JT - thanks for that.

that code does indeed remove all the image info items below an image, including keywords for the image.

however, if you want to keep displaying stuff like camera info and image size but only want to get rid of the keywords as i did, (i.e. part 2 of spider-t's question), i just found the answer on another thread - http://www.dgrin.com/showthread.php?t=16782:

#keywords{display:none}

thanks asd!


:clap

j

[Mike Lane]

If we do something like this then it would be only for a class and not an ID:
<body class="gallery_793">

The problem is that I use the template name to define the width of the layout below. If we did it other wise then some Pros only want to change the header and have it not screw up the design below.

I will keep thinking, but for now this is the plan.
I didn't realize that you were using the id to define a width. Perhaps you could simply create another unused id and attach it to the body element. The class could stay there too. My thought is here that it would be handy to have something that I can latch on to per gallery style rather than per gallery. Meaning I could set gallery_793 to always be 500px wide irrespective of the gallery style but I can't set it to 900px in the smugmug style and 500px in the smugmug_small style. I really need access to the later rather than the former (or maybe the latter as well as the former).

[{JT}]

Why does this not work?

#elegant_small.gallery_793, #journal.gallery_793, #all_thumbs.gallery_793, #traditional.gallery_793 { width: 500px; }

#elegant.gallery_793 { width: 900px; }

yeah, there might be easier ways an I am thinking about them, but for now I don't think adding any extra classes is what we need.


I didn't realize that you were using the id to define a width. Perhaps you could simply create another unused id and attach it to the body element. The class could stay there too. My thought is here that it would be handy to have something that I can latch on to per gallery style rather than per gallery. Meaning I could set gallery_793 to always be 500px wide irrespective of the gallery style but I can't set it to 900px in the smugmug style and 500px in the smugmug_small style. I really need access to the later rather than the former (or maybe the latter as well as the former).

[bigwebguy]

good catch, I will figure that out today.
JT, don't start ignoring my posts, but i found another one.

on the Journal view, the bottom pageNav reference is still ID #pageNav_bottom instead of class .pageNav

and another suggestion, hope you dont mind...but how about making a .albumNav class and then giving a specific id to the top and bottom album nav div's, like #albumNav_top and #albumNav_bottom

the reason i say that is that as it works now, i have to specify #albumNav and #albumNav_bottom for whatever styles i want to apply to both. If the class was there i could just reference the .albumNav class and remove a lot of duplicate code.

by having the separate ID's however, you could still make your top and bottom albumNav's have different styles if you wanted to.

just something to consider.

thanks

[{JT}]

Good catch, I meant to do what you suggested - I got it right on the Traditional style if you look :)

JT, don't start ignoring my posts, but i found another one.

on the Journal view, the bottom pageNav reference is still ID #pageNav_bottom instead of class .pageNav

and another suggestion, hope you dont mind...but how about making a .albumNav class and then giving a specific id to the top and bottom album nav div's, like #albumNav_top and #albumNav_bottom

the reason i say that is that as it works now, i have to specify #albumNav and #albumNav_bottom for whatever styles i want to apply to both. If the class was there i could just reference the .albumNav class and remove a lot of duplicate code.

by having the separate ID's however, you could still make your top and bottom albumNav's have different styles if you wanted to.

just something to consider.

thanks

[Tony Bonanno]

This feature is cool. OK 2 questions:

2.) How do I get the keywords to not show up under the photo?

I tried both of these to no avail:

#toggleKeywords {
display: none;
}

.keywords { display: none; }

thanks!
Trish
(smugmug rocks!)
Trish, this worked for me:

#keywords {
display: none;
}


Cheers,

Tony

[Mike Lane]

Why does this not work?

#elegant_small.gallery_793, #journal.gallery_793, #all_thumbs.gallery_793, #traditional.gallery_793 { width: 500px; }

#elegant.gallery_793 { width: 900px; }

yeah, there might be easier ways an I am thinking about them, but for now I don't think adding any extra classes is what we need.
No, it's a per gallery solution, I'm looking for a way to make my header and footer tags behave how I want them depending on the gallery style. Don't forget my tags are not contained within the gallery style layer (the div id=elegant_small) and are thus unaffected by any width declarations contained therein. I could change the width of the gallery style div to whatever I want currently without having to reference the gallery_whatever class.

That isn't saying the gallery_whatever class isn't worthwhile, that allows me the flexibility to create different cobranding on a per gallery basis. I'm looking for essentially the ability to do different cobranding on a per style basis. That's why I'd need either a class definition or an id somewhere that would make my header and footer fall within it.

You already have per gallery cobranding and that took all kinds of javascript to make it work. All I'm asking for is an unused class or id attached somewhere up top so I can vary my style a bit based on the selected gallery style.

I'm worried that I'm not making my request clear enough. Does this make sense?

[bigwebguy]

Good catch, I meant to do what you suggested - I got it right on the Traditional style if you look :) hm...when i look it still has #albumNav and #albumNav_bottom. No higher level .albumNav class.

here's an example of what i'm talking about:

without class:

#albumNav .pageNav, #albumNav .photoNav, #albumNav_bottom .pageNav, #albumNav_bottom .photoNav {
font-size: 10pt;
position: relative;
top: 7px;
}

#albumNav .pageNav, #albumNav_bottom .pageNav {
left: 10px;
}

#albumNav .cartbuttons, #albumNav_bottom .cartbuttons {
position: relative;
right: 10px;
top: 7px;
}

#albumNav .photoNav .cartbuttons, #albumNav_bottom .photoNav .cartbuttons {
top: 0px;
}

#albumNav .nav, #albumNav_bottom .nav {
color: #733F7F;
}
with the .albumNav class:

.albumNav .pageNav, .albumNav .photoNav {
font-size: 10pt;
position: relative;
top: 7px;
}

.albumNav .pageNav {
left: 10px;
}

.albumNav .cartbuttons {
position: relative;
right: 10px;
top: 7px;
}

.albumNav .photoNav .cartbuttons {
top: 0px;
}

.albumNav .nav {
color: #733F7F;
}


does that help explain where i'm coming from? or am i missing something?

[spider-t]

Trish, this worked for me:

#keywords {
display: none;
}


Cheers,

Tony Ah, excellent! That worked for me too.

Thanks Tony!
http://www.trishtunney.com/

[{JT}]

Why can't you just do this:


.pagenav, .photoNav {
font-size: 10pt;
position: relative;
top: 7px;
}

.pageNav {
left: 10px;
}
.cartbuttons {
position: relative;
right: 10px;
top: 7px;
top: 0px;
}

#albumNav .nav, #albumNav_bottom .nav {
color: #733F7F;
}


Maybe I am missing something though, but I don't see a need to make it a common class, since all we really care about is if you wanted to single out the top or the bottom. You can still style the elements inside of either one without the need to use the ID ... ?

Feel free to PM me about this though.

[Matthew Saville]

Hey JT, it seems to ruin my CSS when I put a non-CSS word in there, such as a parenthetical to help me remember which gallery is which:

(advice column)
.gallery_551588 .play_slideshow {display: none;}

Since I'm going to have a lot of .gallery_XXXXXX CSS code, is there any way I can label them without ruining the CSS?

-Matt-

PS: I still can't figure out how to remove the "original size: 2700px x 1800px..." WITHOUT removing the camera info or the comments stuff. Is this yet possible? It looks to me like everything has the same .title or .gray class, for that whole image info ID...

Any hope?

[bigwebguy]

Hey JT, it seems to ruin my CSS when I put a non-CSS word in there, such as a parenthetical to help me remember which gallery is which:

(advice column)
.gallery_551588 .play_slideshow {display: none;}

Since I'm going to have a lot of .gallery_XXXXXX CSS code, is there any way I can label them without ruining the CSS?

... css comments use the /* your comment */ syntax.

your example above would be:

/* advice column */
.gallery_551588 .play_slideshow {display: none;}

not JT, but i hope that helps.

[tmlphoto]

#1 How can I get rid of the "TML Photography's Home" text above the bio and also get rid of "TML Photography's gallery catagories" text on the top line of my galleries. I don't mind the spacing so turning them black on my black background would work for me. My knowledge of CSS is at the cut & paste level. TIA.

#2 I got rid of the green text, but still have green boxes around my thumbnails. How can I change this to grey or white?

#3 Can the green splash on the cart logo be changed?
Anyone?

[pmaland]

Anyone?#1: .headlg {display:none;}

#2:

#thumbnails .imgBorderOn {border: solid 1px #ffffff;}
#thumbnails .imgBorder {border: solid 1px #555555;}

#3: .cartbuttons {filter:gray;}

Enjoy!

[Mike Lane]

#1: .headlg {display:none;}

#2:

#thumbnails .imgBorderOn {border: solid 1px #ffffff;}
#thumbnails .imgBorder {border: solid 1px #555555;}

#3: .cartbuttons {filter:gray;}

Enjoy!
FYI, filter:gray; is ie only.

[tmlphoto]

#1: .headlg {display:none;}

#2:

#thumbnails .imgBorderOn {border: solid 1px #ffffff;}
#thumbnails .imgBorder {border: solid 1px #555555;}

#3: .cartbuttons {filter:gray;}

Enjoy!Thanks a bunch. I'll give them a go. I have no idea what any of that means, but like I said "I can cut & paste" with the best of them. Thanks so much.

Looks like #1 kills the Catagory labels as well. Is there a way to just kill the Home header? I might just have to wait for the new home pages.

#2 & #3 work great. The box around the larger picture still turns green when hovered over. It seems to be quite difficult to get rid of all the GREEN! My site is has the basic black, white, grey look :-). Thanks for the help. I'll figure this out one day.

[tmlphoto]

FYI, filter:gray; is ie only.
Yes Mozilla seems to ignore it. Works with IE though.

[pmaland]

Thanks a bunch. I'll give them a go. I have no idea what any of that means, but like I said "I can cut & paste" with the best of them. Thanks so much.

Looks like #1 kills the Catagory labels as well. Is there a way to just kill the Home header? I might just have to wait for the new home pages.

#2 & #3 work great. The box around the larger picture still turns green when hovered over. It seems to be quite difficult to get rid of all the GREEN! My site is has the basic black, white, grey look :-). Thanks for the help. I'll figure this out one day.
For #1, try this:

.offblue {display:none;}

For #2, try this:

.imgBorderOn {border: solid 1px #ffffff;}

instead of

#thumbnails .imgBorderOn {border: solid 1px #ffffff;}

[tmlphoto]

[QUOTE=pmaland]For #1, try this:

.offblue {display:none;}

QUOTE]

This will work, but also knocks out the text for password protected galleries.

[igoforit]

No problem on my home page, but when I go in a gallery, it still shows the following text : example:

Jos Echelpoels' BodyArt galleries

That text should be hidden without deleting any other information from the screen.
This is about the only thing that is still annoying me in my customised site:
http://jos-echelpoels.smugmug.com (http://jos-echelpoels.smugmug.com/)
Thanks in advance,
Jos

[Mike Lane]

good catch, I will figure that out today.
I'm still seeing that the gallery_ tag doesn't have the album ID unless you first click on a thumbnail. Is this fix still in the works?

[{JT}]

This fix, along with moving those classes to the BODY tag, will go out the next round of updates.

I'm still seeing that the gallery_ tag doesn't have the album ID unless you first click on a thumbnail. Is this fix still in the works?

[Mike Lane]

This fix, along with moving those classes to the BODY tag, will go out the next round of updates.
cool thanks!

[mbrady]

Originally Posted by mbrady

Any chance this will be expanded to be able to individually style the category pages in addition to galleries?

Yes it will be, the naming convetion will probably be .category_NAME or something similar. Now, this probably won't spill over to the gallery page itself once you get there though.
I guess this didn't make into this new batch of customization features that went out last night? Or am I just missing it?

Matt

[{JT}]

Yeah, it appears broken, must have slipped through testing. I will take a look and it might be out tonight.

I guess this didn't make into this new batch of customization features that went out last night? Or am I just missing it?

Matt

[Neptune]

JT,

I have borrowed some code from andywilliams so I could make an image stay put in the right corner.

My question is, I would like to create a nav bar on the left side of the gallery as with the image on the right. I have read the chapters and I don't know how to make both of them stay or even how to create then embed as simple as a links page!

Just fishing for suggestions from anyone who may have an answer...

Thanks,
Neptune

http://www.opticaltranquility.com

[Mike Lane]

JT,

I have borrowed some code from andywilliams so I could make an image stay put in the right corner.

My question is, I would like to create a nav bar on the left side of the gallery as with the image on the right. I have read the chapters and I don't know how to make both of them stay or even how to create then embed as simple as a links page!

Just fishing for suggestions from anyone who may have an answer...

Thanks,
Neptune

http://www.opticaltranquility.com
Can you explain exactly what you're looking for again? I'm not sure that I'm following you here. You want a navbar that is on the left side of the page that stays where it is I'm assuming?

[Neptune]

Exactly, but with the code that I got from your demo page from Andy, it puts an image on the right side and I want to also have a nav bar of the images that I have at the top but rather in the black space on the left side but I don't know how to manipulate the code to place both things so they dont move when you scroll the galleries.

I wanted to use the header for a banner I plan to link to my virtual tour website, so I wanted to place the nav bar on the left as well, just not have it move like the right side.

Iam having a hard time reading up on code to figure out how to create a links page for affilliate sites like putting smugmug on there for example!

I hope this helps.

Thanks a lot!

[rainforest1155]

I moved my post to a new thread (http://www.dgrin.com/showthread.php?p=192235).

Sebastian

[Mike Lane]

Exactly, but with the code that I got from your demo page from Andy, it puts an image on the right side and I want to also have a nav bar of the images that I have at the top but rather in the black space on the left side but I don't know how to manipulate the code to place both things so they dont move when you scroll the galleries.

I wanted to use the header for a banner I plan to link to my virtual tour website, so I wanted to place the nav bar on the left as well, just not have it move like the right side.

Iam having a hard time reading up on code to figure out how to create a links page for affilliate sites like putting smugmug on there for example!

I hope this helps.

Thanks a lot! Start a new thread and we'll discuss it in there...

[galla47]

Hey everyone,

has the ability to customize a category page (or sub category) been enabled?

Is the syntax .category_NAME?

Thanks,

-KG

[Mike Lane]

Hey everyone,

has the ability to customize a category page (or sub category) been enabled?

Is the syntax .category_NAME?

Thanks,

-KGYup. You can use any of the following:

.category
.subcategory
.category_Name
.subcategory_Name

[jfriend]

Hey everyone,

has the ability to customize a category page (or sub category) been enabled?

Is the syntax .category_NAME?

Thanks,

-KGThis has been enabled for awhile. A category page is automatically given a classname of category_xxxx where xxxx is the name of the category. If the category name has spaces in it, those spaces are converted to underscores. So, if the category name is "Portfolio", the class name will be category_Portfolio. If the category name is "My Portfolio", the class name will be category_My_Portfolio. You can then assign styling rules that only affect your look when that category is displayed. For the specific example of a category named "Portfolio", the syntax would then be:

.category_Portfolio {put your style rules here}

There are similar gallery_xxxx classes (where xxxx is the gallery number) when viewing a gallery so you can make some styling apply to only specific galleries.

In the future, you or anyone else can discover this for yourself, by going to a page that displays a category. Then just display the HTML source for that page and look for "<body" and see the classnames assigned in the body tag. If you don't know how to view the source for an HTML page, it's View/Page Source in Firefox and View/Source in IE.