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.

[momijizukamori]

There's a way to change the icon page title, but you have to be willing to poke at the style layers to do it.

-Go to Customize Layers (it's linked on /customize if you click through the tiny 'Advanced Customization' link).
-Look for a layer named 'Auto-generated Customizations' that's highlighted (in Tropo Red, it has a pink background instead of white like the others, but I'm not sure what it is on other site layouts). It should say 'child of layer [bunch of numbers] Databases' above it. That's the wizard layer currently in use.
-Hit edit, and in the editor that opens, add a line that says 'set text_icons_page_header = "Icons";' (without the single quotes).
-Compile, and you should be good.

I'm 90% sure editing other things via the wizard won't wipe that change, but someone, please correct me if I'm wrong on that.

[ninetydegrees]

I think the layer gets totally written when you use the wizard again (even if you have some things which weren't settable via the wizard). I'll check again though.

Edit: yeah, it wipes everything out.

[momijizukamori]

Booo.

OP, if you still want to change the header text, I can give you steps for it, but it's a little more complicated :(

[thomasneo]

Okay. But be warned that I'm a complete noob at editing layers. :)

[momijizukamori]

You mostly have to copy/paste :) So basically do what I explained in the longer comment above on the wizard layer. Then copy eeeeevery line that starts with 'set' (this will be basically everything except like, the comment at the top, and the layer name and type lines).

Put it in an empty txt for the moment. It looks like you're using Apple Green as a color theme, so go here and copy all the text. Go into the file and paste everything above the stuff you copied from the wizard layer. Now comes the one tedious step - give it a glance over to make sure none of the 'set' lines have the same property on them. If there are two of the same, delete the one from the second block of text you pasted - you probably want what you set it to in the wizard (and I can't remember if the compiler catches duplicate set lines).

Go back to the custom layers list. At the bottom of the page, there's a header that says 'Create a style-specific layer'. You want type 'theme' and style 'Database'. You should have a new layer of type 'theme' and the name '(none)'. Open that up to edit, and paste all the stuff from your text file in. Hit 'Save & Compile'.

Finally, go to your custom themes. You should now have a theme there called Green Apple, which is the new copy you just made. Apply it, and win!

[thomasneo]

It works great! Thanks. <3

I learned a useful skill as well. <3 <3

[momijizukamori]

Glad to help! It seems pretty intimidating at first, but once you sort of know where everything is, it's easier.

[ninetydegrees]

Hey! Thanks for the suggestion about the icons on the icons page. It's actually something I wanted to do when I coded the style but didn't manage to for some reason. If the staff's ok with it it should be live soon.

[thomasneo]

Ooh, lovely news.

I'll be waiting for it.

<3