FAQtoid

jfriend · Jul-26-2010, 03:38 PM #1

After years of customizing my own site and helping countless other people customize their sites, I've decided that Smugmug is really missing the boat on how simple CSS customization could be and, in fact, really has their customization techniques backwards.

The general idea of CSS is that you can assign an ID or a class to an object and then create CSS rules that govern the formatting of that object. If you use a class, then everywhere in your site or everywhere that class appears in a page, you get the same rules applied. Smugmug uses this all over it's own CSS. One CSS rule applies to lots of objects that all have the same class. The class .nav is a classic example of this. Every theme sets the CSS customization for the .nav class and there are many objects in a page with that class.

But, when you want to customize a few galleries to all look the same way, there is NO way to use this wonderful CSS mechanism. You can't apply the same class to three different galleries (e.g. your About, Service and Pricing) galleries to all give them the same look. Instead, you have to create a unique set of rules for each gallery and copy/paste multiple copies of them. Doing it the Smugmug way, your CSS ends up looking like this:

Code:

.gallery_1234567 #breadCrumbTrail, 
.gallery_1234567 #slideshowButton,
.gallery_1234567 .albumNav,
.notLoggedIn .gallery_1234567 .emptyGallery, 
.gallery_1234567 .nophotos h3 {display: none;}

.gallery_2345678 #breadCrumbTrail, 
.gallery_22345678 #slideshowButton,
.gallery_22345678 .albumNav,
.notLoggedIn .gallery_22345678 .emptyGallery, 
.gallery_22345678 .nophotos h3 {display: none;}

.gallery_3456789 #breadCrumbTrail, 
.gallery_3456789 #slideshowButton,
.gallery_3456789 .albumNav,
.notLoggedIn .gallery_3456789 .emptyGallery, 
.gallery_3456789 .nophotos h3 {display: none;}

You have to manually specify each and every rule for every single gallery you want it to apply to.

The right CSS way of doing this would be to simply create one set of CSS rules like this that describe how you want a blank gallery to be formatted:

Code:

.blankgallery #breadCrumbTrail, 
.blankgallery #slideshowButton,
.blankgallery .albumNav,
.notLoggedIn .blankgallery .emptyGallery, 
.blankgallery .nophotos h3 {display: none;}

And then the site owner could simply assign the CSS class "blankgallery" to each gallery that they wanted to have this behavior (in a gallery setting). That class would then appear in the <body> tag for that gallery page and the CSS rule would automatically be applied.

The ability to extend this is unlimited. People can share whole libraries of custom CSS rules like this and you just apply the class to any gallery that you want to have the particular rule applied to. You don't have to look up gallery numbers. You don't have to make 20 copies of the same CSS rules to apply it to 20 galleries. This is the way CSS was designed to be used, not the way we are applying CSS rules to multiple galleries now.

Smugmug could even include some formatting options in the built-in CSS that people could choose to apply to their own gallery by just adding the appropriate class to a gallery.

Please, please Smugmug, let your customers use CSS the way it was intended and make it possible to do specific gallery customizations across multiple galleries without using arcane gallery numbers all over your CSS and without copying the same CSS rule over and over. And, enable much easier sharing and installation of customizations.

Please give us the ability to add one or more CSS classes to any gallery page.

Corresponding uservoice request here. Vote for it if you like this idea.

denisegoldberg · Jul-26-2010, 03:59 PM #2

This would make my customizations so much simpler!
I wish...

--- Denise

Erick L · Jul-26-2010, 04:32 PM #3

I rarely put the .gallery_xxxxxxx in front so rules applie sitewide. I'm not sure if that's what you mean.

Actually, I know that's not what you mean. I don't know CSS enough to understand your post correctly. But something I noticed is everytime someone asks about some customization, the answer has the gallery number in front, wether the customization concerns the whole site or a single gallery.

jfriend · Jul-26-2010, 04:37 PM #4

Quote:

Originally Posted by Erick L

I rarely put the .gallery_xxxxxxx in front so rules applie sitewide. I'm not sure if that's what you mean.

You don't need .gallery_xxxx if you want something to apply sitewide. But if you want something to only apply to 5 galleries (like your About, Pricing, Contact, Services galleries), then you're stuck with multiple copies of the same CSS rules each with a different .gallery_xxxxx in front of them. It's a backwards way to use CSS. I'm suggesting a much better way of doing it.

jfriend · Jul-26-2010, 05:07 PM #5

Hmm, Andy marked the uservoice request as "planned". Looks like there's something in the works related to this.

rsquared · Jul-26-2010, 06:50 PM #6

Finally something that was worth actually heading over to uservoice and figuring out how to vote... :-D

jfriend · Jul-26-2010, 06:54 PM #7

It turns out I wrote up something similar a year ago and bigwebguy seemed to like it then.

{JT} · Jul-26-2010, 07:59 PM #8

I would not say it was "backwards" - we just need to add another classname to the body tag :)

.emptyGallery or .blankGallery - any preferences?

DrDavid · Jul-26-2010, 08:01 PM #9

Quote:

Originally Posted by {JT}

I would not say it was "backwards" - we just need to add another classname to the body tag :)

.emptyGallery or .blankGallery - any preferences?

IMHO, .emptyGallery makes more sense.. matches what you describe the gallery as better.

jfriend · Jul-26-2010, 08:06 PM #10

Quote:

Originally Posted by {JT}

I would not say it was "backwards" - we just need to add another classname to the body tag :)

.emptyGallery or .blankGallery - any preferences?

JT, I fear you're missing the entire point of this thread - please reread what I posted. I don't just want you to add a class name for empty galleries (that was just one example I used). I want you to let us add our own class names to any gallery so we can have different types of galleries styled different ways all using single blocks of CSS that apply to multiple galleries. The notion of "backwards" is because you won't let us add the same class to several galleries that we all want styled the same way (how CSS was intended to be used). Instead, you make us copy and duplicate CSS rules for every gallery that wants to have the SAME style. That is backwards from the intent of CSS.

What I proposed was a general purpose mechanism that lets us add our own classes to any gallery so we can use a single set of CSS rules to apply to many galleries rather than having to duplicate those rules with .gallery_xxxx on every single rule.

jfriend · Jul-26-2010, 08:08 PM #11

Quote:

Originally Posted by DrDavid

IMHO, .emptyGallery makes more sense.. matches what you describe the gallery as better.

.emptyGallery is already used by Smugmug and already has CSS rules assigned to it in many sites. Using it somewhere else could break a lot of existing customizations.

DrDavid · Jul-26-2010, 08:15 PM #12

Quote:

Originally Posted by jfriend

.emptyGallery is already used by Smugmug and already has CSS rules assigned to it in many sites. Using it somewhere else could break a lot of existing customizations.

Maybe that's why it seemed more natural already.. LOL

I take it back.. please don't use .emptyGallery :P

denisegoldberg · Jul-27-2010, 03:25 AM #13

Quote:

Originally Posted by {JT}

I would not say it was "backwards" - we just need to add another classname to the body tag :)

.emptyGallery or .blankGallery - any preferences?

I want to be able to assign my own classname to a gallery and control the class name via CSS. Your choosing to choose a single name doesn't work well - yes, it allows me to customize all galleries that fit that classification, but it doesn't go far enough. Don't lock me in to a single customization here - let me name as many as I need.

John's original request is what I'd like to see.

--- Denise

SmugDesigns · Jul-27-2010, 04:02 AM #14

This is a good idea and is one I wondered about. It sure would make life easier on us. It sounds like smugmug has it planned in the near future, so maybe...

{JT} · Jul-27-2010, 08:10 AM #15

OK, so I understand a little better now. This sounds like themes could help solve this issue. Not so easy to do now (you would have to set up a master theme and then import it in a new theme) and then use the new theme on the pages you would like. Might be able to make it easier by changing the theme tool to use a "base" customization. Let me think on it.

denisegoldberg · Jul-27-2010, 08:18 AM #16

Quote:

Originally Posted by {JT}

OK, so I understand a little better now. This sounds like themes could help solve this issue. Not so easy to do now (you would have to set up a master theme and then import it in a new theme) and then use the new theme on the pages you would like. Might be able to make it easier by changing the theme tool to use a "base" customization. Let me think on it.

Sorry, but if you're talking about themes as themes exist today, I don't believe that will work (at least for me). I have no interest in setting galleries to specific themes, and based on the difference between this feature request and existing themes I suspect that using a theme for this purpose would cause confustion. I believe that naming a property that I can apply to any number of galleries would be more useful. I think the ability to assign more than one property to a gallery would also be helpful.

--- Denise

{JT} · Jul-27-2010, 08:31 AM #17

Quote:

Originally Posted by denisegoldberg

Sorry, but if you're talking about themes as themes exist today, I don't believe that will work (at least for me). I have no interest in setting galleries to specific themes, and based on the difference between this feature request and existing themes I suspect that using a theme for this purpose would cause confustion. I believe that naming a property that I can apply to any number of galleries would be more useful. I think the ability to assign more than one property to a gallery would also be helpful.

--- Denise

Themes may be too confusing for this, you are right - but no matter how this would be implemented you would have to do it on a per gallery basis.

Implementing a better solution will take time and I can't say where this would fall on our list of priorities. The javascript to do this currently would be pretty straightforward and easy for anyone to implement - plus you could assign multiple classnames; if anyone would like I could write it up now for the time being.

denisegoldberg · Jul-27-2010, 08:40 AM #18

Quote:

Originally Posted by {JT}

Themes may be too confusing for this, you are right - but no matter how this would be implemented you would have to do it on a per gallery basis.

Implementing a better solution will take time and I can't say where this would fall on our list of priorities. The javascript to do this currently would be pretty straightforward and easy for anyone to implement - plus you could assign multiple classnames; if anyone would like I could write it up now for the time being.

Thanks.

It would be great if you could write this up for us.

--- Denise

liflander · Jul-27-2010, 08:57 AM #19

It would be great if smugmug could implement all of the popular css customizations in the "easy customizer" format. Isn't that the point of css? To be able to change the formatting with the click of a button?
It would save me time and energy tinkering with code. Isn't that the ultimate goal?

LiflanderPhotography.com

{JT} · Jul-27-2010, 09:06 AM #20

Quote:

Originally Posted by liflander

It would be great if smugmug could implement all of the popular css customizations in the "easy customizer" format. Isn't that the point of css? To be able to change the formatting with the click of a button?
It would save me time and energy tinkering with code. Isn't that the ultimate goal?

LiflanderPhotography.com

That is the ultimate goal - but I think that there needs to be some sanity as to what is included in EZC, otherwise the page becomes as scary as going to advanced editing mode. If you have some tools/scripts/examples of what should be included, I would love to hear.


Similar Threads	Thread Starter	Forum	Replies	Last Post

Ability to style or hide individual category, subcategory or gallery thumbs	jfriend	SmugMug Customization	118	Mar-29-2013 03:37 PM
Edit CSS in Gallery seperate from Site Wide Customization	nikinicole	SmugMug Customization	2	Jan-25-2010 08:07 AM
Things SmugMug should really do better -- from a new user.	stone	SmugMug Support	15	Nov-13-2009 11:06 AM
Any interest in using full-featured templates to customize your SmugMug site?	rhjf	SmugMug Customization	2	Jul-03-2009 09:08 PM
SmugMug, CSS and you	ivar	SmugMug Customization	42	Mar-06-2007 10:55 AM

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

FAQtoid

Dgrin Challenges

Need some help with Accessories?

Tutorials

The Hot Seat

Africa!

SmugMug How To:

SmugMug News:

SmugMug Status

Jul-26-2010, 03:38 PM #1
jfriend ^OP Scripting dude-volunteer Join Date: Mar 2005 Location: San Francisco Bay Area, California Posts: 24,574	Smugmug has gallery CSS customization backwards After years of customizing my own site and helping countless other people customize their sites, I've decided that Smugmug is really missing the boat on how simple CSS customization could be and, in fact, really has their customization techniques backwards. The general idea of CSS is that you can assign an ID or a class to an object and then create CSS rules that govern the formatting of that object. If you use a class, then everywhere in your site or everywhere that class appears in a page, you get the same rules applied. Smugmug uses this all over it's own CSS. One CSS rule applies to lots of objects that all have the same class. The class .nav is a classic example of this. Every theme sets the CSS customization for the .nav class and there are many objects in a page with that class. But, when you want to customize a few galleries to all look the same way, there is NO way to use this wonderful CSS mechanism. You can't apply the same class to three different galleries (e.g. your About, Service and Pricing) galleries to all give them the same look. Instead, you have to create a unique set of rules for each gallery and copy/paste multiple copies of them. Doing it the Smugmug way, your CSS ends up looking like this: Code: .gallery_1234567 #breadCrumbTrail, .gallery_1234567 #slideshowButton, .gallery_1234567 .albumNav, .notLoggedIn .gallery_1234567 .emptyGallery, .gallery_1234567 .nophotos h3 {display: none;} .gallery_2345678 #breadCrumbTrail, .gallery_22345678 #slideshowButton, .gallery_22345678 .albumNav, .notLoggedIn .gallery_22345678 .emptyGallery, .gallery_22345678 .nophotos h3 {display: none;} .gallery_3456789 #breadCrumbTrail, .gallery_3456789 #slideshowButton, .gallery_3456789 .albumNav, .notLoggedIn .gallery_3456789 .emptyGallery, .gallery_3456789 .nophotos h3 {display: none;} You have to manually specify each and every rule for every single gallery you want it to apply to. The right CSS way of doing this would be to simply create one set of CSS rules like this that describe how you want a blank gallery to be formatted: Code: .blankgallery #breadCrumbTrail, .blankgallery #slideshowButton, .blankgallery .albumNav, .notLoggedIn .blankgallery .emptyGallery, .blankgallery .nophotos h3 {display: none;} And then the site owner could simply assign the CSS class "blankgallery" to each gallery that they wanted to have this behavior (in a gallery setting). That class would then appear in the <body> tag for that gallery page and the CSS rule would automatically be applied. The ability to extend this is unlimited. People can share whole libraries of custom CSS rules like this and you just apply the class to any gallery that you want to have the particular rule applied to. You don't have to look up gallery numbers. You don't have to make 20 copies of the same CSS rules to apply it to 20 galleries. This is the way CSS was designed to be used, not the way we are applying CSS rules to multiple galleries now. Smugmug could even include some formatting options in the built-in CSS that people could choose to apply to their own gallery by just adding the appropriate class to a gallery. Please, please Smugmug, let your customers use CSS the way it was intended and make it possible to do specific gallery customizations across multiple galleries without using arcane gallery numbers all over your CSS and without copying the same CSS rule over and over. And, enable much easier sharing and installation of customizations. Please give us the ability to add one or more CSS classes to any gallery page. Corresponding uservoice request here. Vote for it if you like this idea. __________________ --John Homepage • Popular JFriend's javascript customizations • Secrets for getting fast answers on Dgrin Always include a link to your site when posting a question

Jul-26-2010, 03:59 PM #2
denisegoldberg Major grins Join Date: Nov 2006 Location: North Andover, MA Posts: 13,162	This would make my customizations so much simpler! I wish... --- Denise __________________ http://www.denisegoldberg.com ... http://denise.smugmug.com Musings & ramblings at http://denisegoldberg.blogspot.com, quick posts in google+

Jul-26-2010, 04:32 PM #3
Erick L Major grins Join Date: Oct 2007 Location: Montreal, Quebec, Canada Posts: 443	I rarely put the .gallery_xxxxxxx in front so rules applie sitewide. I'm not sure if that's what you mean. Actually, I know that's not what you mean. I don't know CSS enough to understand your post correctly. But something I noticed is everytime someone asks about some customization, the answer has the gallery number in front, wether the customization concerns the whole site or a single gallery. __________________ Erick - borealphoto.com borealphoto.smugmug.com Last edited by Erick L; Jul-26-2010 at 04:42 PM.

Jul-26-2010, 05:07 PM #5
jfriend ^OP Scripting dude-volunteer Join Date: Mar 2005 Location: San Francisco Bay Area, California Posts: 24,574	Hmm, Andy marked the uservoice request as "planned". Looks like there's something in the works related to this. __________________ --John Homepage • Popular JFriend's javascript customizations • Secrets for getting fast answers on Dgrin Always include a link to your site when posting a question Last edited by jfriend; Jul-26-2010 at 06:52 PM.

Jul-26-2010, 06:50 PM #6
rsquared Major grins Join Date: Aug 2009 Location: Sacramento, CA Posts: 306	Finally something that was worth actually heading over to uservoice and figuring out how to vote... :-D __________________ Rob Rogers -- R Squared Photography (Nikon D90)

Jul-26-2010, 06:54 PM #7
jfriend ^OP Scripting dude-volunteer Join Date: Mar 2005 Location: San Francisco Bay Area, California Posts: 24,574	It turns out I wrote up something similar a year ago and bigwebguy seemed to like it then. __________________ --John Homepage • Popular JFriend's javascript customizations • Secrets for getting fast answers on Dgrin Always include a link to your site when posting a question

Jul-26-2010, 07:59 PM #8
{JT} Code Monkey Join Date: Jan 2004 Posts: 1,012	I would not say it was "backwards" - we just need to add another classname to the body tag :) .emptyGallery or .blankGallery - any preferences?

Jul-27-2010, 04:02 AM #14
SmugDesigns A Design Company Join Date: Apr 2010 Location: New York Posts: 130	This is a good idea and is one I wondered about. It sure would make life easier on us. It sounds like smugmug has it planned in the near future, so maybe... __________________ SmugDesigns - SmugMug Customization - http://smugdesigns.com Website: http://smugdesigns.com Follow us on twitter - @SmugDesigns

Jul-27-2010, 08:10 AM #15
{JT} Code Monkey Join Date: Jan 2004 Posts: 1,012	OK, so I understand a little better now. This sounds like themes could help solve this issue. Not so easy to do now (you would have to set up a master theme and then import it in a new theme) and then use the new theme on the pages you would like. Might be able to make it easier by changing the theme tool to use a "base" customization. Let me think on it.

Jul-27-2010, 08:57 AM #19
liflander wag more. bark less. Join Date: Sep 2008 Location: New York Posts: 349	Re: Smugmug has gallery CSS customization backwards It would be great if smugmug could implement all of the popular css customizations in the "easy customizer" format. Isn't that the point of css? To be able to change the formatting with the click of a button? It would save me time and energy tinkering with code. Isn't that the ultimate goal? LiflanderPhotography.com __________________ Mark LiflanderPhotography.com