Once again, Kabitzin’s redesign of Sea Slugs has caused me to get motivated to possibly redesign this site. There are still several things left to check and do, and of course there is always the chance that I’ll get tired of the design and dump it, but you can see what I’ve done so far here.
There are several things left to check including:
- Making sure everything on posts looks right
- Making sure everything on pages looks right
- Making sure everything on search/category/archive pages looks right
- Implementing threaded comments
- Fixing the footer
- Figuring out why exclude_tree isn’t excluding the category in the “categories” menu (whoever designed the code for this is a blithering idiot. I had to set “exclude” as well, as if I didn’t set exclude but did set exclude_tree, since hierarchical is true by default, the code overwrote my exclude_tree value by my empty exclude value. stupid.)
- Importing my current database to make sure everything still works with what I’m doing now
- Fix “choose theme” functionality again (though it’ll only change the banner, not the colors, on the new site)
- Test a couple of new tidbits that I have in mind but I’m keeping secret
- Anything else I run into
So it’s a long, though not really overbearing list of things left for me to do. I played around with changing the color of the sidebar, but didn’t hit anything I liked, but I may try again. Of course, if anyone else has any suggestions, fire away.
Update: Oh yeah, I also like how Kabitzin did his sidebar, so I may steal adapt his idea for that if I can come up with a good way to do it.
Update 2:
OK, I’ve run into a new problem, and it deals with the image gallery. I’ve downloaded a plug-in that will allow me to code the gallery however I want, so the “normal” gallery code is a non-factor in this equation.
Basically what I’m trying to figure out is code that will:
- Have a box around all the images (as I do in my episode reviews now)
- Be only as wide as the images
- Be flexible enough so that images can stack horizontally for however wide the page is (meaning, it can be 2 wide, 3 wide, etc. depending on the size of the images and the width of the page)
- Preferably isn’t a table
Now, this sounds easy, but it isn’t. Here is what I’ve tried and how it’s failed (at least in FF3 on the mac):
- Attempted Solution: Container is a div. Problem: Expands to full width. My current gallery code uses a nav, but that’s because I give it a set width. However, I can’t do that in this case because I don’t necessarily know what the width is, and….
- Attempted Solution: Container is div with set width. Problem: Box is only as wide as width, either causing images to overflow out of box, making the images narrower to fit, or just plain cutting off the images once they’re outside the box.
- Attempted Solution: Container is span. Problem: That fixes with width expansion problem. However, now the top of the box starts near the bottom of the top row of images, and I can’t seem to figure out a way to make the span “cover up” the top of the first row of images. I can’t set a height, because I don’t know how high the image stack will be.
- Attempted Solution: Container is span, with display set to inline-block. Problem: In theory, this is supposed to work based on what I’ve read. However, it acts just like a block, making the box full width of the page.
- Attempted Solution: Container is span, images are floated (or are in another box which is floated). Problem: Images stack properly, but box is now outside of the stack of images (and very small).
- Attempted Solution: Container is div, images (or box that images are in) are floated. Problem: As expected, the div has collapsed and there is basically no box there.
- Attempted Solution: Container is div, overflow is set to auto, images are floated. Problem: Fixes the flat div problem, but it is still full width.
- Attempted Solution: Put images in a list, and making the li items display: inline. Problem: ul (ie, the box) displays full width.
I’ve tried every combination displaying, floating, and whatever else I can think of and I’m about at wit’s end right now. I’m just about ready to just say “i’m gonna style it for the new site, and heck with the old galleries. too bad if they look bad.”
8 Comments
Hey redesign looks great! The two-column look is less cluttered, especially with the dropdowns. Here’s a few suggestions:
1. Lower the placement of the text on your menu, because the text is breaking above the gradient line. Because the text is overlaid on top of the glassy background, it seems a little odd (since the text does not have a shadow on top).
2. I don’t know how easy this is to do, but is there a CSS way to make the background of the dropdown menus black and the text white (if you find out, let me know)? It’s not a huge deal, but it might make the top blend better.
3. Maybe have the left-edge of the first dropdown menu match with the left edge of the box around Home, just so they line up cleanly. It matches up on most pages, but it does not match up with the blue box when you are on the home page.
4. I thought it was cool how your first post is wide and the rest are narrower, but on pages it seems your sidebar gets pushed to the bottom. There is probably some css wrapper class to confine the entry area.
5. The theme changer probably doesn’t work anymore.
To make the dropdown do that, just set the select background color to black and color to white (I already slightly changed the bg color). I thought about doing a black blackground/white foreground but didn’t, though I may try it now to see how it looks.
As for the sidebar on the pages…it’s just that I haven’t gotten around to styling the pages yet.
For the theme changer, I’ll probably have to do a child function or something to try to stick it into the header or something, but yeah, it doesn’t work on that site right now.
I think the black dropdowns look HOT.
Did I see some Mariya banner? Oh hell no!
The overall design looks great. But I hope you’re doing something about the colors. Currently it feels too glaring for me @_@
Too glaring in what way? (I guess I’m trying to figure out what you mean)
I think all the glass on the sidebar might be a bit much, as glass horizontally looks nice but tons of vertically stacked glass is a bit of overkill.
OK, I took the “glass” off of the sidebar links (though not the sidebar headers or rollover). It looks a little blander now I think, but it hopefully isn’t glass overkill now either.