CSS: Number of Style Sheets, Order of Application

[chaselton]

Just joined SmugMug, and am working on getting my homepage set up the way I'd like it. I work with servers and have done some coding here and there so I went with the Advanced customization, installed the Web Developer toolbar for Firefox and downloaded the PDF documentation on SmugMug CSS. Here's my question(s):



When testing customizations using the Web Developer Edit CSS tool, I noticed there are multiple style sheets listed in addition to the one specifying my customizations. Is there an order in which these apply?
Which of the listed style sheets contains code that affects the homepage?
So far, what I've been doing is to find the style sheet and code that I need to tweak to change how my homepage looks, copy and paste it into the Advanced CSS section, make the change to the code and then update. Is there a better way to customize?

I hope what I'm asking makes sense...feel free to ask for additional clarification.

[Allen]

Just joined SmugMug, and am working on getting my homepage set up the way I'd like it. I work with servers and have done some coding here and there so I went with the Advanced customization, installed the Web Developer toolbar for Firefox and downloaded the PDF documentation on SmugMug CSS. Here's my question(s):



When testing customizations using the Web Developer Edit CSS tool, I noticed there are multiple style sheets listed in addition to the one specifying my customizations. Is there an order in which these apply?
Which of the listed style sheets contains code that affects the homepage?
So far, what I've been doing is to find the style sheet and code that I need to tweak to change how my homepage looks, copy and paste it into the Advanced CSS section, make the change to the code and then update. Is there a better way to customize?

I hope what I'm asking makes sense...feel free to ask for additional clarification.
The last one loaded is your "user_....." CSS. That's where all the overrides
go if needed. It's best to pick the closest theme to what you want and
with advanced CSS modify from there. You can "bulk" delete then undo in
all the other CSS's to see what effects things.

They probably all effect your homepage.

I usually use the "yellow elements box" and select the element to find the
ID's/classes. Put changes in user_... CSS and copy to notepad so don't
lose them. Firebug is also very good finding id's and classes and also
shows html nesting so parents are easiely seen.

Might have to use !important in CSS for it to work.
#XXXXXX {color: red !important;}

[jfriend]

The last one loaded is your "user_....." CSS. That's where all the overrides
go if needed. It's best to pick the closest theme to what you want and
with advanced CSS modify from there. You can "bulk" delete then undo in
all the other CSS's to see what effects things.

They probably all effect your homepage.

I usually use the "yellow elements box" and select the element to find the
ID's/classes. Put changes in user_... CSS and copy to notepad so don't
lose them. Firebug is also very good finding id's and classes and also
shows html nesting so parents are easiely seen.

Might have to use !important in CSS for it to work.
#XXXXXX {color: red !important;}Actually, the user_xxxx is not the last one. Themes are afterwards, for example which makes it more difficult to override themes (requiring more CSS specificity or !important). Plus overriding Easy Customizer is sometimes a pain because they use !important on everything.

[Allen]

Actually, the user_xxxx is not the last one. Themes are afterwards, for example which makes it more difficult to override themes (requiring more CSS specificity or !important). Plus overriding Easy Customizer is sometimes a pain because they use !important on everything.
Thanks John good to know and will try to remember it.

[denisegoldberg]

...It's best to pick the closest theme to what you want and with advanced CSS modify from there.
I really think that in many cases using no theme makes more sense. It only makes sense (to me) if the individual wants most of the characteristics of the theme and wants to override just a few things. I've seen too many cases of painful customization where the site owner has chosen a theme and is then attempting to override most of the elements of the theme.

--- Denise

[Allen]

I really think that in many cases using no theme makes more sense. It only makes sense (to me) if the individual wants most of the characteristics of the theme and wants to override just a few things. I've seen too many cases of painful customization where the site owner has chosen a theme and is then attempting to override most of the elements of the theme.

--- Denise
I agree, but what exactly is "no theme"? I think it's if you leave the theme
setting in control panel to "default theme" which actually implies a theme,
very confusing to new users.

The "default theme"/"no theme" is white or black and is selectable in the
control panel on the advanced customization page. This also toggles
opposite text, black or white.

[chaselton]

I agree, but what exactly is "no theme"? I think it's if you leave the theme
setting in control panel to "default theme" which actually implies a theme,
very confusing to new users.

The "default theme"/"no theme" is white or black and is selectable in the
control panel on the advanced customization page. This also toggles
opposite text, black or white.

When I was searching the fora for help I came across a post that recommended *not* using the default theme, as many of the backgrounds used a gradient image that was difficult to override.

Also, I went back and removed all of the Easy Customization that I did originally so that the only style sheet (hopefully) that contained !important would be mine.

Is there a reference for the order in which style sheets for smugmug (and whatever the yui.xxx is) apply?

[jfriend]

When I was searching the fora for help I came across a post that recommended *not* using the default theme, as many of the backgrounds used a gradient image that was difficult to override.

Also, I went back and removed all of the Easy Customization that I did originally so that the only style sheet (hopefully) that contained !important would be mine.

Is there a reference for the order in which style sheets for smugmug (and whatever the yui.xxx is) apply?There is no reference that I know of and it doesn't really help you to know. The only place you can put your CSS is in the advanced customization CSS box and you can do anything you want from there. If you're trying to override something in a theme (which happens to come after your CSS), it may be more work to override the theme, but it's doable with either more CSS specificity or by using !important.

[chaselton]

There is no reference that I know of and it doesn't really help you to know. The only place you can put your CSS is in the advanced customization CSS box and you can do anything you want from there. If you're trying to override something in a theme (which happens to come after your CSS), it may be more work to override the theme, but it's doable with either more CSS specificity or by using !important.

Thanks, that helps.

As mentioned in a previous post, I added a theme to avoid dealing with the gradient background that's present throughout the default theme. Which would be more difficult: removing the gradient from the default theme via CSS or customizing one of the basic themes via CSS?

Also, I'm familiar with using the !important, but what do you mean by "CSS specificity"?