Smugmug Announcements...

[{JT}]

In order to give everyone a heads up on the upcoming changes to your homepages, I created some points of interest so you can be prepared and start stylizing early or transitioning your previous style.

Removing the word home and 's
At the top of your homepage it still says Soandso's Home. But you can now target each little thing to remove it if you want (or even replace it using javascript):

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

Green Titles
Love them or hate them, the green text is on the homepages too now. If you want to change it to somethign that better suits you; use this code if you have not already done so:

.title {
	color: red;
}

Box Color
In the previous design, we used a class called offshadowbg (could we have been any more vague?) to determine what color the boxes were on your homepage, the equivilant of offshadowbg in the new design is called box. So for those of you who only want to change the color of the boxes all you have to do is this:

.box {
	background-color: blue;
}

How Boxes Work
Each box has the same generic makeup: a top and a bottom. The class boxTop is used to style the tops of each box and the class boxBottom is used to target the bottom.
If you wanted to get rid of the dashed lines in each box, you could use this code:

.boxTop {
	border-bottom: 0px;
}

Let's say that you want to remove the descriptions from all of the boxes, you could use this code:

.boxTop {
	display: none;
}

But, be warned that this also removes some code that you may need as the owner of the page, see the advanced section below on how to get them back when you are logged in.

Gallery/Category Boxes
Inside of the boxBottoms for Featured Galleries, Galleries and Categories are "miniboxes", where we arrange the photos, titles, descriptions, etc. They use the appropriate class: miniBox, here is how you would turn each one red:

.miniBox .albumTitle a.nav {
	color: red;
}
.miniBox .description {
	color: red;
}
.miniBox .updated {
	color: red;
}

The Nitty Gritty
To fine tune your design each box has a unique ID assigned to it. So if you want to make the headline for featured galleries stand out (and no other box); you could use this:

#featuredBox .boxTop h3 {
	font-size: 20px;
}

Don't be afraid to view the source and to look around for and ID or a Class, there are lots of them used and it will take us a while to document them all.

Advanced
Some new classes have been added to the body tag of each page. The classes change from page to page, so it is a good idea to take a look at the source code to see what is available. In my example up top, I said you could make the boxTops dissappear. Well, you can make them dissapear for everyone else, but reappear when you (and only you) are logged in:
.boxTop {
display: none;
}
.loggedIn .boxTop {
display: block;
}

So that is the new homepage in a nutshell. There are lots of other small changes to the other pages you have access to, let me know if you think a class should be moved or if I missed the boat on something important.

[onethumb]

There's a preview image, a poll, and some more details on this thread .

Don

[Matthew Saville]

BigWebGuy posted this image once, for the smugmug gallery style, and it was VERY helpful:



Can anybody do this for us for the main page? Or tell me where I can get the program that does it? Thanks!

-Matt-

[colourbox]

The program that does it is the Web Developer plug-in for Firefox.
There is a similar add-on for Safari called WebDev Additions

Both are free.

I don't use these because I'm a CSS expert, I use them because I need their help. :)

OK now I gotta get some sleep.

[Matthew Saville]

Originally Posted by colourbox

The program that does it is the Web Developer plug-in for Firefox.
There is a similar add-on for Safari called WebDev Additions

Both are free.

I don't use these because I'm a CSS expert, I use them because I need their help. :)

OK now I gotta get some sleep.

Got it! And I downloaded "iFox" just for kicks, oooooh! However I'm not seeing the CSS tool that displays all the CSS ID's / Classes in this nifty manner demonstrated in the screenshot, drat!

-Matt-

[winnjewett]

Originally Posted by Matthew Saville

Got it! And I downloaded "iFox" just for kicks, oooooh! However I'm not seeing the CSS tool that displays all the CSS ID's / Classes in this nifty manner demonstrated in the screenshot, drat!

-Matt-

Click on 'information' >> 'Id and Class Details'

-w

[peestandingup]

Did the #caption code get changed to something else? For instance, my #caption {text-align: center;} code doesnt work anymore. Neither do any of the other #caption codes.

[{JT}]

http://www.dgrin.com/showthread.php?t=17467

#caption is now .caption

Originally Posted by peestandingup

Did the #caption code get changed to something else? For instance, my #caption {text-align: center;} code doesnt work anymore. Neither do any of the other #caption codes.

[peestandingup]

Originally Posted by {JT}

http://www.dgrin.com/showthread.php?t=17467

#caption is now .caption

Hmm, that didnt work. But this code did. #caption_bottom {text-align: center;}

[Matthew Saville]

Originally Posted by peestandingup

Did the #caption code get changed to something else? For instance, my #caption {text-align: center;} code doesnt work anymore. Neither do any of the other #caption codes.

Yep! It's #caption_bottom now, instead. I think I might remember this being posted as a notice by Mike Lane or JT once, it might be an old change and not one that just rolled out tonight. Although I might have dreamt it too...

-Matt-

[edit] Ah-ha! see, I remembered that thread. It's just these 3:00 AM foruming sprees that make dreaming about smugmug very possible...

But yeah, looks like you two figured things out on your own in the time it took me to post this... I just spent 30 minutes discovering that .pagenav is different than .pageNav

...Bedtime!

-Matt-