Database / Icon Page / Icon Shadow + Header

[thomasneo]

Hi.

Before I begin, I would first like to thank the wonderful DW team for doing such an incredible job on the new customized icon pages. You people seriously rock. <3

Now, back to the topic. I need a little CSS help to further customize the icon pages in a database layout. As you know, the database layout has a white shadow on the icons in the entries. How can I make this shadow extend to the icons page? If at all possible, I would also like to scale down the size of the icons, preferably to "Small".

And I don't know if this is possible, but I would also like to change the header from "Current Icons" to just "Icons". After all, it is displaying my entire set of icons so it doesn't really make sense to have the "Current" in there.

So yup, that's about it for now. Sorry for not linking to my other blog as I prefer to separate the two online identities.

Thanks in advance to all who respond.

Comments

[syntheid]

Not really sure what size "small" is, but this should do what you want:

.page-icons .icon-image {
	padding-right: 0;
	margin-right: 1em;
	box-shadow: -.1em -.1em .4em #DDD;
	min-width: 50px;
}
.page-icons .icon-image img {
	box-shadow: .1em .1em .4em #DDD;
	max-width: 50px;
	max-height: 50px;
}

And then you'll have to change the "50px" to whatever max size you want the icons.

I don't think changing the text on "Current Icons" is possible right now, though.

[momijizukamori]

Just a small note the that max-height/max-width bit will only work if all your icons are square - otherwise they'll end up distorted.

[thomasneo]

Thanks for pointing it out. <3

My icons are all squares, so no problem there.

[syntheid]

Yeah, unfortunately since Dreamwidth sticks both width/height on the images, just setting a max-width and letting the height stay in proportion to the width doesn't work.

[momijizukamori]

iirc, it's acessibility thing with the hardcoded heights/widths - I had to deal with some of it when patching Librarian's Dream.

[thomasneo]

Thanks. It works. <3

I ended up having to change it to 75px though - I think "Normal" is 100px, "Small" is 75px, and "Smaller" is 50px, but I'm not sure. The "Normal", "Small", and "Smaller" are the three default sizes for the icons in the Entries.