Removing the .box

[cybercrypt13]

How can I remove the background color of the square box that holds the gallery images? The first page you get to on the site? I know how to change its color to something else but would like for it to have no background..

Just playing and trying to figure things out.

Also, where can I find a list of all the classes that have been setup with their properties so that I can play around with things a little more?

Thanks,

glenn

[Andy]

why not just change the color to match what you want? :scratch

Maybe I'm not understanding, sorry....

[Mike Lane]

How can I remove the background color of the square box that holds the gallery images? The first page you get to on the site? I know how to change its color to something else but would like for it to have no background..

Just playing and trying to figure things out.

Also, where can I find a list of all the classes that have been setup with their properties so that I can play around with things a little more?

Thanks,

glenn
the background color of the square box that holds the gallery images? I'm totally lost on that one. Maybe a visual aid, I'm not that smart...

[cybercrypt13]

why not just change the color to match what you want? :scratch

Maybe I'm not understanding, sorry....
Ok, I'll just give you an example of why not but keep in mind I'm just playing around here. go to www.gshutter.com (http://www.gshutter.com)

See the black box with the yellow blended background. Now drill down to a gallery such as people / general / tim kelley. There there is no box and things sit on the page nicely... With forcing me to put a color on the box, I can never get it to blend into the page nicely. I will always have a square corner box...

Thanks,

glenn

[cybercrypt13]

Also, we had this discussion on another thread and I got jumped a little with the fact that smugmug had done a great job of laying out enough classes to allow you to customize just about anything on the page. So where do I find the list of classes? Without a list of names and what they are its a little hard to try to do anything with the scheme stuff...

Thanks,

glenn

[Allen]

Make the box tranparent?

.box {background-color:transparent;}

[cybercrypt13]

Make the box tranparent?

.box {background-color:transparent;}
Your the man... Thank you much.

You wouldn't happen to have a reference to where I could find this sort of thing do you? I would also like to remove the Glenn Hancock off the page as well but I can't find where that is either..

Thanks,

glenn

[Mike Lane]

Also, we had this discussion on another thread and I got jumped a little with the fact that smugmug had done a great job of laying out enough classes to allow you to customize just about anything on the page. So where do I find the list of classes? Without a list of names and what they are its a little hard to try to do anything with the scheme stuff...

Thanks,

glenn
You can definitely start by checking out the source. If you have firefox you can simply hit <ctrl>-u (on windows) to get a look at the source. All the classes and IDs are in there. There are so many that it would take hours to list them all and what they do. Not only that but the combinations of those classes are nearly limitless. I can't think of a great way to list all the classes and ids and the combinations thereof into one user friendly list.

Maybe someone else has a better way of doing this?

[cybercrypt13]

You can definitely start by checking out the source. If you have firefox you can simply hit <ctrl>-u (on windows) to get a look at the source. All the classes and IDs are in there. There are so many that it would take hours to list them all and what they do. Not only that but the combinations of those classes are nearly limitless. I can't think of a great way to list all the classes and ids and the combinations thereof into one user friendly list.

Maybe someone else has a better way of doing this?
No, its fine doing it this way, I just didn't know if you had something with some of the more popular requests... Such as removing your name ... :-) But I'll figure it out shortly, thanks

[Allen]

Your the man... Thank you much.

You wouldn't happen to have a reference to where I could find this sort of thing do you? I would also like to remove the Glenn Hancock off the page as well but I can't find where that is either..

Thanks,

glenn Try this

/* hides your name (including any 's) */
#userName {display: none;}
/* hides the word home */
#userHome {display: none;}
/* removed the 's */
.possess {display: none;}

Optional: Then go into control panel under account settings, at name line,
click change at the end and whatever you enter as your first name will
appear on the nav line. I put "home page" there.
Al

[cybercrypt13]

Try this

/* hides your name (including any 's) */
#userName {display: none;}
/* hides the word home */
#userHome {display: none;}
/* removed the 's */
.possess {display: none;}

Optional: Then go into control panel under account settings, at name line,
click change at the end and whatever you enter as your first name will
appear on the nav line. I put "home page" there.
Al
Thanks I had just figured it all out looking at the source, but hadn't thought about the Home Page idea... Good job... I'm starting to feel more comfortable now... :-)

glenn

[Andy]

Thanks I had just figured it all out looking at the source, but hadn't thought about the Home Page idea... Good job... I'm starting to feel more comfortable now... :-)

glenn

:thumb that's great!

[Andy]

Hi Glenn,

I'm diggin your customization so far :thumb

Just FYI: I cannot read your email addy (under your name in header)... I *know* there's an email addy there and I know it's clickable.. but just wanted to point out from a style standpoint, it can't be read (Mac, Safari and Firefox). Maybe make it white like your name and phone number?

All the best,

[Andy]

Hi Glenn,

I'm diggin your customization so far :thumb

Just FYI: I cannot read your email addy (under your name in header)... I *know* there's an email addy there and I know it's clickable.. but just wanted to point out from a style standpoint, it can't be read (Mac, Safari and Firefox). Maybe make it white like your name and phone number?

All the best,


Same goes for the category info (shows under cat name on your home page... with the date/time etc... very hard to read in grey.... Just FYI.

[cybercrypt13]

Hi Glenn,

I'm diggin your customization so far :thumb

Just FYI: I cannot read your email addy (under your name in header)... I *know* there's an email addy there and I know it's clickable.. but just wanted to point out from a style standpoint, it can't be read (Mac, Safari and Firefox). Maybe make it white like your name and phone number?

All the best,
Actually, thats what I'm trying to figure out now. I don't like the light grey colors that are being defaulted to and trying to find the tag that goes with them but so far nothing I've tried touches them...

any ideas?

[cybercrypt13]

Actually, thats what I'm trying to figure out now. I don't like the light grey colors that are being defaulted to and trying to find the tag that goes with them but so far nothing I've tried touches them...

any ideas?
I'm starting to think that either there is some sort of problem here or I'm missing something... I have found what I thought was the tag for one of the items... ie: Family on my site www.gshutter.com (http://www.gshutter.com) shows up in the albumTitle class, so I add:

.albumTitle { color: black;} to my css list, but nothing changes...

what gives?

glenn

[jfriend]

I'm starting to think that either there is some sort of problem here or I'm missing something... I have found what I thought was the tag for one of the items... ie: Family on my site www.gshutter.com (http://www.gshutter.com) shows up in the albumTitle class, so I add:

.albumTitle { color: black;} to my css list, but nothing changes...

what gives?

glennI'm not the expert on this, but I think that anything that's clickable is controlled by the a:link, a:visited, a:hover, a:active styles for the local class, so it would probably be .albumTitle a:link {your style here} and so on for each of the four states of links. The :link, :visited, :hover and :active are called pseudo classes in CSS. See here (http://www.w3schools.com/css/css_pseudo_classes.asp) for some more explanation.

[cybercrypt13]

I'm not the expert on this, but I think that anything that's clickable is controlled by the a:link, a:visited, a:hover, a:active styles for the local class, so it would probably be .albumTitle a:link {your style here} and so on for each of the four states of links. The :link, :visited, :hover and :active are called pseudo classes in CSS. See here (http://www.w3schools.com/css/css_pseudo_classes.asp) for some more explanation.
Thanks, I had already tried that though and it didn't work. The strange thing is that I can change the font style in the body tag and it effects some of the text, but the color won't change no matter where I place the tag...

Any more ideas?

glenn

[jfriend]

Thanks, I had already tried that though and it didn't work. The strange thing is that I can change the font style in the body tag and it effects some of the text, but the color won't change no matter where I place the tag...

Any more ideas?

glennI'm seeing black text for albumTitles when I view your page now. Maybe you need to clear your browser cache or something.

[cybercrypt13]

I'm seeing black text for albumTitles when I view your page now. Maybe you need to clear your browser cache or something.
Are you seeing them for all the titles? Or just a few? I am seeing a few and don't really know why...

I have noticed that the class I need is contained within the miniBox div tag class and its called description... Do you know how to specify something like this?

I'm getting very frustrated.. :-(

thanks,

glenn

[jfriend]

Are you seeing them for all the titles? Or just a few? I am seeing a few and don't really know why...

I have noticed that the class I need is contained within the miniBox div tag class and its called description... Do you know how to specify something like this?

I'm getting very frustrated.. :-(

thanks,

glennHang in there. You're just learning how CSS rules are specified. It just takes some time to learn how this stuff works. In the page I see, just the titles are black.

To make the descriptions black, you can use:

.miniBox p.description {color:black;}

To make the updated time/date black, you can use:

.miniBox p.updated {color:black;}

If you only want to change this info on the home page, then you should precede both of these with the homepage class.

[cybercrypt13]

Hang in there. You're just learning how CSS rules are specified. It just takes some time to learn how this stuff works. In the page I see, just the titles are black.

To make the descriptions black, you can use:

.miniBox P.description {color:black;}

To make the updated time/date black, you can use:

.miniBox P.updated {color:black;}

If you only want to change this info on the home page, then you should precede both of these with the homepage class.Well, we're getting close. What does the P stand for and why are some of my links still white? It did update all the info items though...

thanks,

glenn

[cybercrypt13]

I think I understand most of what I've done, but I've cleared my browsers cache and am testing in mozilla and IE and both display white gallery names. HOwever, Mozilla is displaying a few of them black and a few white... even after I refresh...

Any ideas?

glenn

[jfriend]

Well, we're getting close. What does the P stand for and why are some of my links still white? It did update all the info items though...

thanks,

glennp.updated means any <p> tag that also has class="updated".

If you wanted to change all <p> text color, you could just specify p {color=black;}, but that is less specific (e.g. more general) than p.updated so if anywhere else in the CSS for your page (including all the rules that smugmug has), it has p.updated {color=xxx}, then your p {color=xxx} won't take effect. You probably don't want to know the details, but there's a whole set of rules for calculating what's called CSS specificity based on how many and what types of reference a given rule has in it. The more specific the rule is, the higher it's specificity and the more likely it will supercede less specific rules. There are a number of great sites on CSS specificity. Here's one (http://www.molly.com/2005/10/06/css2-and-css21-specificity-clarified/)that Mike linked to earlier.

If you are planning on doing this much more, I would highly recommend buying a good book on CSS. Though everything you need to know is actually on the web somewhere, I found it useful to have a fully organized book in front of me, particularly when you want to really sit down and learn a topic like the box model or floating or grouping of selectors, etc... I bought the O'Reilly book called Cascading Style Sheets, The Definitive Guide at my local bookstore. I don't know if it's the best book, but it in combination with reading here and experimenting here is how I've learned CSS in the last few months.

You are getting some albumTitles as white because after you've clicked on the link, it's no longer governed by the a:link color, but instead by the a:visited color. There are also colors for a:hover (mouse hovering over the link) and a:active (mouse pressing the link).

To get rid of the other white pieces of text, you need to add the other three link pseduo-classes to your existing declaration and you need to add a class name to your email address link (this is your own HTML in your header I guess so you control the classname or ID there) and then you can style that link yourself.

You can do all the link styles in the same declaration if you want them all to be the same color:

.albumTitle a:link, .albumTitle a:hover, .albumTitle a:visited, .albumTitle a:active{color:black;}

Or if you want some of the colors (like the hover color) to be different, you can assign that one pseudo-class a different color in it's own rule.

You can also style the white text in the smugmug footer.

[Allen]

.... Mozilla is displaying a few of them black and a few white... even after I refresh...

Any ideas?

glenn Black links are turning white after a visit with NS7.2.

[jfriend]

p.updated means any <p> tag that also has class="updated".

If you wanted to change all <p> text color, you could just specify p {color=black;}, but that is less specific (e.g. more general) than p.updated so if anywhere else in the CSS for your page (including all the rules that smugmug has), it has p.updated {color=xxx}, then your p {color=xxx} won't take effect. You probably don't want to know the details, but there's a whole set of rules for calculating what's called CSS specificity based on how many and what types of reference a given rule has in it. The more specific the rule is, the higher it's specificity and the more likely it will supercede less specific rules. There are a number of great sites on CSS specificity. Here's one (http://www.molly.com/2005/10/06/css2-and-css21-specificity-clarified/)that Mike linked to earlier.

If you are planning on doing this much more, I would highly recommend buying a good book on CSS. Though everything you need to know is actually on the web somewhere, I found it useful to have a fully organized book in front of me, particularly when you want to really sit down and learn a topic like the box model or floating or grouping of selectors, etc... I bought the O'Reilly book called Cascading Style Sheets, The Definitive Guide at my local bookstore. I don't know if it's the best book, but it in combination with reading here and experimenting here is how I've learned CSS in the last few months.

You are getting some albumTitles as white because after you've clicked on the link, it's no longer governed by the a:link color, but instead by the a:visited color. There are also colors for a:hover (mouse hovering over the link) and a:active (mouse pressing the link).

To get rid of the other white pieces of text, you need to add the other three link pseduo-classes to your existing declaration and you need to add a class name to your email address link (this is your own HTML in your header I guess so you control the classname or ID there) and then you can style that link yourself.

You can do all the link styles in the same declaration if you want them all to be the same color:

.albumTitle a:link, .albumTitle a:hover, .albumTitle a:visited, .albumTitle a:active{color:black;}

Or if you want some of the colors (like the hover color) to be different, you can assign that one pseudo-class a different color in it's own rule.

You can also style the white text in the smugmug footer.Seeing as how I'm learning some of this at the same time, it looks like if you just want to change all four styles for links, you can just use something like this:

.miniBox .albumTitle a {color:black}

And to change all the text in the smugmug footer to black, you can use:

#footer .text, #footer a {color:black;}

[cybercrypt13]

Thanks guys,

I think I've gotten it all figured out now...

Thanks for the patience and all the help...

glenn

[jfriend]

Seeing as how I'm learning some of this at the same time, it looks like if you just want to change all four styles for links, you can just use something like this:

.miniBox .albumTitle a {color:black}

And to change all the text in the smugmug footer to black, you can use:

#footer .text, #footer a {color:black;}
From the looks of your site, it looks like you're almost there with the latest fixes. When looking at your email address in your header, I noticed an HTML problem.

You have
<font color=black>Glenn Hancock<font>in your header. Two things about that. First, you have an unclosed font tag (which might be messing some other things up). I think you meant for the second tag to be </font> to close it.

Second, now that you're learning CSS, you probably want to quite using the FONT tag at all. For text like this, you can use the <SPAN> tag (see smugmug's footer for an example) and then assign a classname to it and your own CSS rule to control that class's font color.

[Mike Lane]

Okay first off...

Use lowercase for tags (not id's or classes). So for example a:link not A:link and p.description not P.description. But this is good #altViews (note the capital 'V' is required).

Do not use the <font> tag. It's deprecated and it's a colossal waste of time.

Whenever you are doing links always remember LoVe/HAte:

a:link {styles}
a:visited {styles}
a:active {styles}
a:hover {styles}

If you change the arrangement it will not work uniformly in all browsers.

If you are not at least as specific as a rule that you are competing with, your style will not take effect. Specifity is key to smugmug customizations. Learn more here (http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html).

[jfriend]

Okay first off...

Use lowercase for tags (not id's or classes). So for example a:link not A:link and p.description not P.description. But this is good #altViews (note the capital 'V' is required).

Do not use the <font> tag. It's deprecated and it's a colossal waste of time.

Whenever you are doing links always remember LoVe/HAte:

a:link {styles}
a:visited {styles}
a:active {styles}
a:hover {styles}

If you change the arrangement it will not work uniformly in all browsers.

If you are not at least as specific as a rule that you are competing with, your style will not take effect. Specifity is key to smugmug customizations. Learn more here (http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html).Mike, did you mean:

a:link {styles}
a:visited {styles}
a:hover {styles}
a:active {styles}

In the LVHA order? You wrote your message in the LVAH order.

Also, can you put multiple styles in the same rule as long as they are in the right order in that rule. Can you do it this way too?

a:link, a:visited {styles}
a:hover, a:active {styles}

[Mike Lane]

Mike, did you mean:

a:link {styles}
a:visited {styles}
a:hover {styles}
a:active {styles}

In the LVHA order? You wrote your message in the LVAH order.

Also, can you put multiple styles in the same rule as long as they are in the right order in that rule. Can you do it this way too?

a:link, a:visited {styles}
a:hover, a:active {styles}
HA! Yeah, I did mean

a:link
a:visited
a:hover
a:active

I always mess that up, you have no idea. You can do it the way you mentioned. For those who aren't as well read in to CSS this:

a:link, a:visited {color:red;}
a:hover, a:active {color:white}

Will make a link that is red even when it has been visited and white when it is hovered or clicked. Another way to do it is like this:

a:link,
a:visited {styles}
a:hover,
a:active {styles}

Or whatever as long as you remember LoVe/HAte (which I obviously cannot :dunno)