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-

[Maki]

Is there any way to widen the edit bio window?

[peestandingup]

Matthew, yup. I looked at bigwebguy's page with the Firefox web developer tool. That is one handy little extension! Just click on "information" tab & it gives you all kinds of info indeed!

[peestandingup]

Originally Posted by Maki

Is there any way to widen the edit bio window?

Yeah, I would like to know too. Im also trying to figure out how to center text in the bio. <CENTER></CENTER> doesnt work.

[Matthew Saville]

Originally Posted by Maki

Is there any way to widen the edit bio window?

This was next on my list of things to ponder. Definitely could be 200-300 pixels wider, by default...
-Matt-
[edit]Ooooooh, notice the edit box next to EACH gallery title? You can edit featured gallery titles straight from your homepage, cool!

But like I said in the other topic, it would be utterly ultimate if I could switch from "Ti" thumbs to "Th" thumbs!

[yvonne]

Oh Gosh...

I haven't been on dgrin for a while, and from yesterday to today all my galleries and everything looks different. It's horrible, the position of the gallery windows is all over the place, the green is just yuk, and whilst I can read the "fixes" at the top of this thread, I have no idea what any of it means. I don't DO html. I have no idea what to do with the information given.

What do I do now? I just want it to look like it did before!!!

Please help.
Yvonne

[bigwebguy]

Originally Posted by {JT}

...
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.

JT, please tell me this is an oversight, or that i'm missing something but no more markup allowed in the description boxes?

All my individually customized pages are broken. Very not pleased right now.

[Barb]

I have several "empty" galleries where I have just listed information, links, etc. I suppressed images in these galleries before with the following code:

<style type="text/css"> .nophotos { display: none; } .opening { display: none; } img[width="84"][height="100"] { display: none; }</style>

Something must have changed as that is now showing as text in those galleries. Anyone know what the new code might be for this?

[bigwebguy]

Originally Posted by DigitalDaze

I have several "empty" galleries where I have just listed information, links, etc. I suppressed images in these galleries before with the following code:

<style type="text/css"> .nophotos { display: none; } .opening { display: none; } img[width="84"][height="100"] { display: none; }</style>

Something must have changed as that is now showing as text in those galleries. Anyone know what the new code might be for this?

barb, i'm assuming that you put that code in the gallery description? see my post immediately above yours.

they removed the ability to put html markup in the description. anything between < and > is getting stripped out.

i havent figured a way around it. it looks like they're probably using regular expressions to find the html tags in the description so it will be a tough nut to crack.

i'll post if i figure anything out...but hopefully JT will either give us this feature back or enlighten us to another way to do this (along with a reason why they took this away).

[Barb]

Originally Posted by bigwebguy

barb, i'm assuming that you put that code in the gallery description? see my post immediately above yours.

they removed the ability to put html markup in the description. anything between < and > is getting stripped out.

i havent figured a way around it. it looks like they're probably using regular expressions to find the html tags in the description so it will be a tough nut to crack.

i'll post if i figure anything out...but hopefully JT will either give us this feature back or enlighten us to another way to do this (along with a reason why they took this away).

Yep - had it in the description box. Hopefully there will be some way to do this.

[Barb]

Originally Posted by bigwebguy

barb, i'm assuming that you put that code in the gallery description? see my post immediately above yours.

they removed the ability to put html markup in the description. anything between < and > is getting stripped out.

i havent figured a way around it. it looks like they're probably using regular expressions to find the html tags in the description so it will be a tough nut to crack.

i'll post if i figure anything out...but hopefully JT will either give us this feature back or enlighten us to another way to do this (along with a reason why they took this away).

well, i took a look at the source and found a class .nophotos. I took the code I had in my descriptions in those galleries out and put this in the stylesheet html section and it seems to work:

.nophotos { display:none; }