Wow, it’s been over a year since I last revamped the theme! The change is not as drastic as the last redesign, and I decided to keep the same basic blue-green color scheme. I’ve come to associate these colors with SS!AB (and a few sports teams), and the last time I tried to play around with colors I ended up with a purple/black theme that almost everybody hated. While the front looks similar, the parent theme is totally different (sorta).
While I was doing the layout and major design work, it seemed like the process was going smoothly and quickly and I was able to finish in maybe 6 hours. I followed the guide I posted and worked on a local version of the site. However, the last few details regarding color and some spacing issues are much more annoying. I’ve decided to upload what I have so far, since it looks like everything works. I’ll probably be adjusting the rest of the site as I get time.
Why?
I had been waiting for the latest version of Sandbox to come out so that I could tweak SS!AB, but all development seemed to have stopped a while back. Then, I see this post, where the creator says he is putting it all up for sale since he has no time for the theme anymore. I loved Sandbox when it came out because it was one of the first really robust WordPress themes that incorporated Microformats.
Still, all was not lost. A quick search showed that other themes with Microformats had popped up in the last year. I decided to base the redesign off of the Thematic theme because it was similar to Sandbox. The support for Thematic looks to be a great deal better than that for Sandbox, but I was able to craft the child theme without too much trouble. One easy way to start is to open up the default stylesheet and then download one of the child stylesheets already linked on the site. It’s easy to customize the most commonly used tags and keep what you like.
If you use Sandbox and want to stick with it a bit longer, user Dreamcolor was nice enough to modify Sandbox to take advantage of the new features in WordPress 2.7.
New Features
- Threaded comments: Threads can go 3 levels deep. I’ve already started to inflate my comment count; too bad I can’t see it yet.
- Streamlined sidebar: The full blogroll has its own page now, and a shortened blogroll appears on the sidebar. The blogroll was getting too long so I moved the full blogroll to its own page and used this plugin to display 10 random links from the full list.
Still to Do
Fix colors and spacing: I know a few things look a bit odd, like theolformatting and the comment padding.Enable some plugins: I have to figure out how to add comment counts to the new WP comment loop. This is turning out to be a rather complicated problem that relies on the functions.php file to make the change without hacking the parent theme.New banners: The revolving banners will return as I get around to making them. The header is taller now, because it was annoying having to transform everything to fit details into the short-but-wide header in the last version.More pages: Now that the menu is not as constrained, I’d like to use more pages. I’d also like to move the blogroll off the front page and onto its on static page. My plan is to have a certain number of randomly selected links on the main sidebar, but the full blogroll on its own page.
Things I Learned
- IE still hates standards: It still takes ugly hacks to get anything to look right in IE… I was excited to use the opacity property in the menu and then discovered it doesn’t work in IE. Fortunately, there is a way around this. I also can’t understand why IE has to make positioning so damn difficult.
- You can adjust the dropdown widget: Unfortunately, some anime titles are very long. The default WordPress widgets aren’t really that much fun to tinker with, but there is a way to use CSS to limit the width of the default category dropdown menu. I added
select.postform#cat { width: 160px; }to my stylesheet and it worked like a charm. - Tricking Adsense: It can be annoying to format Adsense ads in terms of exact position. However, you can wrap the ad in a
<p class="adsensesidebar">tag and then defineadsensesidebarin your stylesheet. - Hacking Core Files Sucks: Adding the various comment plugins has been a pain. I found out that to get any buttons to actually do anything, you have to ensure that the line
<?php do_action('comment_form', $post->ID); ?>appears after the final closingdivtag, but before the closingformtag. - Overruling Your Parent: Using functions.php is actually pretty cool. Because I declared new functions in functions.php and created a new comments.php to call my new functions, upgrades won’t erase any of my theme hacks. Even if the parent theme gets changed, your child theme tweaks will overwrite/augment the parent files.
- You Can Never Have Too Many Sidebars: Here’s a map of them all. True, I guess they are not all on the side, but this is one really really awesome part of the Thematic framework.
Related posts:
This post was written by...
Kabitzin – who has written 1940 posts on Sea Slugs! Anime Blog.
One of the founders of Sea Slugs, I handle most of the blog admin tasks while wearing my I AM BOSS shirt. I like my action series well choreographed, and my romance series extra trashy. I also have a soft spot for puns.
{ 4 trackbacks }
{ 32 comments… read them below or add one }
This is a hot woman right here. I hope I can do as well with my redo. What is this Thematic thing and how does it compare to using Sandbox?
It sounds like it is the new Sandbox. Thematic is similar on the backend (at least in terms of class names and IDs) and it is better commented and supported.
Does this mean you are not going to stick with the Gears theme?
Indeed. Matsurika is an auto win.
the new design looks good! it’s a subtle change, but looks pretty fresh. maybe it was round corner fatigue. perhaps sharp corners are making a comeback? =D
what exactly do you use microformats for? i remember looking at it in the past, and thinking it was interesting, but couldn’t figure a good practical use for them.
When the theme is set up with microformats, you can customize how everything looks by just editing the css stylesheet and not touching the actual theme. It just means someone has gone through and named every single design element and you can refer to these names to tell the browser how to display your theme.
Ah ok. Thanks for the info. That is quite handy.
I’m a huge fan of opacity and whatnot (check out the revamped UK-Anime.net to see what pretty things can be done with it) but yeah, IE is still a bitch to code for. I think my blog looks more or less OK in both now but my stylesheet still does annoying things seemingly on its own accord. Alignments and floats across browsers is still something that gets on my nerves
I don’t know if your main menu bar at the top is supposed to be in that Courier-type font but I think it looks really cool. Kudos for getting blue and green to work alongside each other in the text too.
The alignment was a nightmare in the comments section. Couldn’t get it to work in IE (although of course it was simple in FF and Chrome), so I had to increase the size of the gravatars so that the positioning of the text looked more natural. IE image-resizing seems to be especially bad as well.
Nice. It looks sharper, and it scales better on my 46″ than the previous theme. Looks sharper, too. Plus
I did away with the rounded corners, and just went with regular boxes. Ironically the page is actually smaller now, although the content area is wider. I was able to shave a significant number of pixels off the sidebar once I learned how to format the width of the category dropdown menu.
Yeah, it looks better, so ‘web2.0′ish. But comment threading looks odd. Are you sure there’s no other solution than child
lis?It is the default Wordpress comment threading and I agree it is a bit strange. I’m not completely convinced that this is the best way to handle threading, but it does beat having to type a bunch of @ replies in one big block.
Really? Seems like now you have to write lots of comments instead of just one with that big block of @s. Personally I’m not sure what I’d prefer.
I noticed it spams up my Recent Comments plugin too, haha. I think the threaded nature makes it a little easier to follow some conversations, but this is not universally true.
I actually had to check the exclude blog authors option in the Recent Comments plugin because I was spamming up the list so badly…
I’ll have to take a look at Thematic. Plan to change the look of my blog sometime in March and maybe instead of wasting time looking a theme that’s close to what I want, I can waste just as much time making it myself — minus having any design skills.
The way I see it, I can either try to find a really good pre-made blog and just tweak it or I can make my own theme using a parent theme with microformats. The first case takes less time, but you can end up with a blog that looks like everyone else’s (not that there is anything wrong with that), and the second one usually starts off looking like junk and requires a lot of work (and planning) to polish to a shine.
Nooo! Your site looks so grungy awesome, don’t change it! (Except if you’ll make it even better)
Not a bad change at all. Then again, I didn’t think there needed to be a change in the first place.
Nice new look, looks fresh and oceanic. :p
If I had the coding skills I might make threaded comments but I rather see if there is a plugin for that, since I have no such interest in technical stuff. Keep up the good work.
So Sandbox is gone eh? I should probably try out Thematic with help from others in future. :\
I wouldn’t say Sandbox is gone, but if no one picks it up it will gradually grow more and more obsolete (as Wordpress adds features and deprecates various template tags).
Looks nice. Yeah IE can be a major headache sometimes. At least IE7 seems to behave slightly better than IE6 in terms of rendering to standards
So I heard square is the new round.
I wish there was a way to collapse threads by default using javascript or something.
Looking at the 2 themes side-by-side, I think the new one looks less heavy, although none of the themes have been particularly heavy. Very nice! I’m in a similar boat as you – not sure what to do about the nested comments. I think if my blog gets popular and there becomes a need for discussion clarity, I’ll change but I haven’t seen much use for that on mine.
I love the new design, this is the best yet. Looks very ‘clean’.
I like how I can savor my avatar with a larger resolution now.
Shizu?
Hmm, maybe I should check out Thematic as you’re the one who led me to find sandbox in the first place (though I don’t think I have much time to make any significant design changes to my site for a little while).
The biggest obstacle to my getting any new themes is also banner size, and I think that, given how we do banners, I have an even bigger issue with it than you. I’ve toyed with having a taller banner, but I’ve always been of the theory that big banners are basically dead space that do and help nothing, so I try to avoid having overly large banners if I can.
and yes, IE is evil. As a web developer by trade, I’m not sure how many countless times I’ll finally get a design looking just right…and then open up IE.
I’m sure that’d be easy enough to do (actually attempting that is exactly what I was thinking about doing whenever I implemented threaded comments on my site, which will probably happen the next time I do a major design overhaul), as long as the code for the comment treads is done in a predictable and rational manner (and I’m assuming it is)
Update:
I actually find it quite humorous that both of our new main headers (or at least the header you have in the screenshot) are both of the same series. And indeed, the more I look at it, I believe we even use the same image…you use the top half and I use the bottom half in my header lol.
Yes, haha, my blog banner would be the seme, and yours would be the uke I suppose…
I feel the same way you do about banner height, but a taller banner often does look nicer. To sorta combat the dead space, I overlaid the menu at 50% opacity over the bottom of the banner (since the items are generally to the left and the banner images are typically to the right).
Damn it, now you have me wanting to play with my design again lol.
Hooray for threaded comments! The redesign definitely doesn’t look all that drastic to the uninformed viewer, but I guess it does the job.
hmmm, never got to comment this, but anyways:
you know, I was really pissed (jay kay, not pissed, more like, a tad bit annoyed :3) when I found out your beautiful name wouldn’t appear in the Recent Comments Box anymore (yea, its a box now, not a cube
). I also realized that it would be a bigger hassle finding out if you replied to my stalker-like questions, cause you usually don’t reply back to those (and who could blame you? 
), buuuuuuuuuutttt most of the stuff that I had to bitch about back then, is now fixed (ex: for the beginning stages of this new design, there were no comment power levels, so it almost felt like all those 300+ comments of mine were lost forever, but then I see that you litterally added a comment “Power Level”. I wonder who could have influenced that? :3)
So yea, the site looks great! And I’ve grown attached to the reply system. Although I do wish for that threaded-ness you spoke of. Cause like, we can both do our hai-*EXPLODES*