Re-redesign

Although it looks rather similar to the previous redesign, the CSS is actually completely rebuilt and customized. I have to say I have a huge amount of love for the Sandbox theme, which is about as mod-able as any theme can be. This redesign took a lot of time and energy, but I am very pleased with how it came out. It actually turned out to be a great learning experience, and I may post up some pointers about things I learned.

Here’s a short little fanboy rant about Sandbox (which is supposed to be packaged with WP 2.4). If you use Sandbox out of the… box, you notice it pretty much looks like crap, I mean it looks very minimalistic. However, just about every element that you could possibly want to mod already has class-generating functions. What this means is that you can pretty much make Sandbox look however you want, by editing just the style.css file! You can set unwanted element classes to display: none and the power of CSS lets you customize and move everything else around. About the only time I had to touch the Sandbox packaged files was when I wanted to insert a php call to a plugin. Believe it or not, the purple and black theme (aka the fugly theme) and this current theme share the exact same backend; the only difference between the two themes is the CSS file.

21 Comments

  1. Leon (29)
    Posted 10/22/2007 at 1:43 am | Permalink

    Centered-ness! Woot! :P

  2. Gevulde Kex (3)
    Posted 10/22/2007 at 2:24 am | Permalink

    Well balanced, relaxing and pretty.

  3. Zyl (242)
    Posted 10/22/2007 at 4:33 am | Permalink

    Two columns centred does somehow feel more balanced.

    And welcomes backs to the punny tagline! W00t!

  4. Posted 10/22/2007 at 6:01 am | Permalink

    Looks very nice!

  5. moyism (102)
    Posted 10/22/2007 at 6:35 am | Permalink

    Looks every better than before, plus aligned to the center as well!

  6. Owen S (50)
    Posted 10/22/2007 at 7:12 am | Permalink

    Much better. Glad to see you’ve settled down on things. By the way, what do you use to rotate your tagline? Or is it something you wrote yourself?

  7. TheBigN (131)
    Posted 10/22/2007 at 7:34 am | Permalink

    This looks better than the last, and feels good to look at. :P

  8. Kabitzin (1523)
    Posted 10/22/2007 at 8:28 am | Permalink

    By the way, what do you use to rotate your tagline? Or is it something you wrote yourself?

    As dorky as it sounds, I actually make all these taglines up and change them manually whenever I come up with a new one. It’s not a plugin or anything, I really do just keep changing the blog description line every time. However, I believe there are plugins that will rotate quotes.

  9. Totali (223)
    Posted 10/22/2007 at 9:25 am | Permalink

    Woot I love the new layout! It’s good that you got rid of those ugly comment borders. The 9rules emblem is the one thing that looks all distorted though…

  10. Kabitzin (1523)
    Posted 10/22/2007 at 9:32 am | Permalink

    Yeah, I am checking this out on IE 6, and a a few CSS elements do not translate perfectly. In an older browser the emblem background does not look quite right; perhaps this is because of the poor support for PNG. Can you describe how it looks distorted? It looked alright to me in IE 7 and Firefox, using Windows XP.

  11. Totali (223)
    Posted 10/22/2007 at 9:52 am | Permalink

    Actually I checked this in Safari and it looked fine…then when I emptied my cache in Camino it looked fine xD. Silly me…I guess my browser was just still trying to pick up the old one.

    Well it did look like this.

  12. Posted 10/22/2007 at 10:26 am | Permalink

    Love the new theme :D

    I’ve been wanting to try my hands at creating a wordpress theme. Would really be great if you could share your pointers. XD

  13. Josh (43)
    Posted 10/22/2007 at 12:45 pm | Permalink

    Oooh…that sounds interesting. As a web designer by profession, I would drool over anything which would allow you to change the look merely by changing the CSS.

    Maybe I should check out the sandbox when I look at doing a redesign.

  14. Kabitzin (1523)
    Posted 10/22/2007 at 12:48 pm | Permalink

    Seriously, when you look at the code, it is truly a thing of beauty. They recently had a contest where all participants could only edit the CSS stylesheet and supply some extra graphics, and it is amazing the stuff that people came up with.

    If you look at the CSS of some of the winners, you can see what they did to achieve certain effects, and then use their code as a template for your own site. It’s about as easy and intuitive as the process can be, short of providing a GUI.

    I think once Sandbox is packaged with Wordpress, we’ll see some really awesome stylesheets that take full advantage of Sandbox’s built in class functions.

  15. Josh (43)
    Posted 10/22/2007 at 10:44 pm | Permalink

    Whew, I’ve been playing with that template in an installation of wordpress I made elsewhere. I guess my fun has been more with the widgets than the template, given that the default category widget is, erm, quite non-functional to say the least (at least as far as what options you can choose).

    On top of that, the one plug-in that seemed to do what I wanted doesn’t work AT ALL in 2.3, so I had to hack my own widget plugin, but it was successful! I now have a section which lists ONLY the anime series categories (since they’re all children of another cat)

    BUAHAHAHAHHAHAHA!!!! lol

    Now I guess I just need to do things like, you know, actually style the page…

  16. Jesus159159159 (329)
    Posted 10/23/2007 at 6:07 pm | Permalink

    I’m glad we have the old comment box again (now I don’t have to look up HTML guides again! YAYNESS!)

    I also like how the comments you make are in a blue box. Sometimes, when I read the comments for other blogs, I hardly notice if the author is commenting or not. When I find out a long time commenter is the actual author of the blog, I’m like, “WHOA!!! So LoliX_SPICYNESS_PRINCESS was the owner all this time!” What I’m trying to say is that I’m glad your so organized =D

    Maybe this is just a glitch, but I’ve noticed that Ender’s comment (on the Gundam 00 2 post) is not in a blue box but his previous comment (in Jyushin Enbu -Hero Tales- 01) is. Could one Ender be a fake???!!!

  17. Kabitzin (1523)
    Posted 10/23/2007 at 6:15 pm | Permalink

    Mwahaha, actually, the blog author is in blue, but all of the writers in our team will have special highlighting. If Ender comments on an article he has written, he will be in blue because he is the author. However, if he is commenting on an article I have written, his answer will only get the “user” highlighting and not the “author” highlighting, and so his comment will be in a gray-green.

    Also, I think you have the colors in your example reversed.

    Edit: Nevermind, you have pointed out a problem; namely, that Ender is too freaking lazy to log in, even though the browser will remember your information… This pretty much drives me crazy, and I always have to clean up the database whenever he comments from a different computer (that doesn’t have his info stored).

  18. Jesus159159159 (329)
    Posted 10/23/2007 at 6:30 pm | Permalink

    LMAO!!! SOMEONE CHANGED IT! While you are correct that the comment Ender left in the Jyushin Enbu -Hero Tales- 01 post is not blue (its gray), I swear on my life that there was no blue box in his Gundam 00 2 post! ITS A CONSPIRACY I TELL YA! Cause, in that post, it said he only had 1 comment, which was weird, cause I know that his is over 300…i think…. ;_; blue boxes have left me in despair!

    Edit: oh! Ok, so I’m not going crazy(er)! lol! XD

    Edit 2: Now that I think about it, thats pretty cool how you can easily (I think) change his comment like that (and give him the blue box and his comment number)

  19. Zyl (242)
    Posted 10/23/2007 at 7:22 pm | Permalink

    Ender’s habit of not logging in > or < Kabitzin’s relationship with BEETRAIN???

  20. Ender (422)
    Posted 10/23/2007 at 9:26 pm | Permalink

    Maybe I do it because it drives you nuts!

  21. Jesus159159159 (329)
    Posted 10/23/2007 at 11:32 pm | Permalink

    One more thing I’d like to add (its not like I’m searching for this stuff…it just pops up in my head). I like where you put the “Colophon, Contact, Archives”, but something has been plaguing me about those green cube-like dots next to it… I don’t know, its just that when I noticed them, I immediately clicked it, but nothing happened, because obviously theres nothing there to click. This might be a cheesy/bad tip, but wouldn’t it be cool if when you click one, it’ll take you to the authors posts? Since theres three members (and three squares), you can have a K, E, and…er…Ku on each box, so we can browse through the authors posts. I know you can see the authors archive when you click their name at the “This entry was written by”, but…I don’t know! I guess I just want to click there! XD

    drives you nuts!

    VRRRRRRRRMMMMMMMMMMM!!!!!!!! OH YEAH! CANT DRIFT LIKE ME!!!……err….i mean *hugs Enders gray box because of the trauma from blue boxes*

    wait…Kabi-kun…IN A RELATIONSHIP???!!! HOW COULD YOU??!! You told me I was the only one in your life ;_;

3 Trackbacks

  1. [...] I was redesigning the theme for SS!AB, I wanted to make the title of the blog look a certain way. Unfortunately, the font design I [...]

  2. [...] on design, it may not be worth going through the effort of importing real data. When I did the last redesign, I just did some copy-paste magic on a handful of old posts in order to see how the site would [...]

  3. By Year 4!!!! | Sea Slugs! Anime Blog on 1/1/2008 at 12:01 am

    [...] Layout: Now that the new blog smell has faded, hopefully the new layout continues to work well for everyone. It was sad to see Mobile Student Osaka go, but I’ve been [...]

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*
:blank: :blush: :cool: :cry: :eek: :grin: :hmm: :lol: :love: :mad: :| ;P :( :o :) ;)