ritchan’s new design

I hate trackbacks. They always fill up your comment section with somebody’s post which obviously isn’t anywhere close to being a comment. So I’m just going to say THANK YOU VERY MUCH to Small Potato, whose ‘So you want to create WordPress themes huh’ series of articles really helped me out. If you take a look at the style.css and php files (I wonder if you can, just figure out my directoy tree) you’ll see that it’s copied almost verbatim from Small Potato’s tutorial. Except for a few changes.

First off, I just gotta say that only the front page and posts without comments are validated XHTML 1.0 Transitional. This validator shit is such a pain in the ass, mostly because it’s all generated by stupid WordPress plugins that spew out bad code. Especially this new WP-Gravatars plugin I’ve got going on here. At the same time, I would like to encourage everyone to invalidate all of my posts for XHTML 1.0 Transitional. Thank you.

I also haven’t tested this on browsers other than Firefox 2.0 and IE7 on Vista, and IE6 on XP, and the Firefox 1.5 that comes with the OLPC. Suffice to say they render, but if you’re running IE at all, don’t expect me to fix the web layout. Already I can see the 10 pixel padding on the sidebar being padded way more than necessary on IE. Without the padding, it’s already indented. Well, I said ‘ul {style-type:none}’ in the CSS, so it is not my problem at all.

As you can see, there are still some rough edges around here. The post title is repeated twice in the same post entry, for instance, and the Edit box (for me, the admin, aka root, aka GOD) is all the way at the bottom of the post instead of where it should be, at the top. And I don’t like the ‘Filed under’ category blurb. But that is all. The W3C validator would complain again if I changed it, but I’ll get around to fixing that soon.

The comments also show up indented sometimes, thanks to the Gravatars. Fuck. I don’t know what to do about that. EDIT3: more than fixed, baby. See EDIT4

You may remember that I had quite some problems with linking back to the top page in my previous design. I had to settle for a very small ‘Home’ link on the top, which might not be noticeable, and worst of all, isn’t the expected behaviour – I expect the banner to lead me back to the top page. Well, this time, I copied the code from DarkMirage‘s website. It took quite some time to browse through his source and style.css (which didn’t have new lines at all, it was all just on one straight line) but after copying it I finally understood how it worked. I was trying to get some ugly margining and padding and transparent images with the CSS opacity property to get a ‘Home’ button onto the banner, but now that I have DarkMirage’s code, I don’t have to make buttons and transparent bars that hinder you, dear readers, from basking in the beauty that emanates from those girls in my banner (all hail my taste).

So basically the whole of my header.php is like this:

<div id="header">
<div id="buttons"><a href="<?php bloginfo(url);?>" id="buttons"><span>Ritchan testbed</span></a>

What you do in your CSS is:
#buttons {display:block;width:995px;height:170px;}
a buttons {display:none;}

The top line does something, but I’m not sure what. I just found it in DarkMirage’s CSS, and figured it ensured that the div stayed around or something, and then tweaked the dimensions. The second line makes the border that signifies it’s a link go away. You don’t want that ruining your pretty images, don’t you? Then:

#buttons span {display:none;}

Which makes any <span> tag inside an id “buttons” go away too. So basically that little blurb up there that says ‘Ritchan testbed’ will go away. Amazingly enough, the link still stays there for you to click on it. Is this a bug? I sure hope not, because it works wonders.

Basically, this theme involves some copying, an image rotator script from Dan Benjamin, and lots of small image files with transparency in them. LOTS. Pray that your browser supports transparency properly. I sure hope they have their cluster sizes turned down on their filesystems over at dreamhost. Come to think of it, most themes I design are like this. The background is just a 5×5 8-bit PNG, for example. In this case, I issued ‘background-attachment:fixed’ so you don’t see tearing in the background as you scroll up and down. This might also help cut down CPU usage on your part, since it won’t have to scroll along with the rest of the content, and that small image has to repeat many times to fill up your browser window.

Oh yes, do tell me if there are any usability issues with this theme.

33. MINAMOTRANCE – [MINAMOTRANCE CORE DUO!! #03] into the night-original mix- [UK HARDCORE]

EDIT: W3C is complaining that id=”buttons” is being used twice. I am not correcting the code presented above in an attempt quite likely to result in FAIL to get people to READ THE ENTIRE FUCKING ARTICLE.

EDIT2: Yay! It’s also XHTML 1.0 Strict validated! I didn’t know what the string for specifying XHTML 1.0 Strict was, so I just copied it from DarkMirage’s source again. I fail as a web designer.

EDIT4: My ass aches from sitting this long, but I finally got this place looking like a blog. Okay, so some of the banner images aren’t quite of the same calibre as the Yukirin one, but what the fuck, nobody can ever beat Yukirin anyway, so don’t even try. Ever17 is a nice touch, regardless.

Three RSS feeds are on the right for Menclave (because their fansubs kick ass), Danny Choo(because it’s frequently updated so it’ll make the place look alive and for otaku.fm) and Randall’s page on dasaku.net, formerly ikimashou.net. It’s always good to take notice of what root’s saying, lest you scratch his bad side and he goes ‘userdel ritchan’ on your ass or something.

A CSS min-height attribute fixed the comments randomly indenting, and gave me a chance to put some background-color stuff on just to imitate how comments look like on Randall’s site.

An awesome second text widget lets me brag about my system just like I did over at EFX2 when it had the kickass Legacy script going (whoops, dead giveaway). Saying ‘Compal GL31’ should let you know already what chipset and DVD drive and graphics card and LCD panel I’m using already, so I’ll leave that up to you intelligent people. Also it lets me brag about my current desktop, displayed with opacity:0.4 so it makes all images in the sidebar, including those obnoxiously orange RSS icons, fit the colour scheme. Ah, I’m so leet at CSS!

Rachmaninov’s Rhapsody on a Theme of Paganini’s is orgasmically AWESOME at 7:02. Ahhhhh! Those chords!

EDIT5: I gave up on CSS for the category links above. Tables kick so much ass, it actually hurts this time around. And the little bar on top is a search form. Truly minimal, except for the banners. Hah! I’m sure Akagi Ritsuko would be proud… except that something totally broke IE7’s rendering. Ritsuko, since she is paid to fiddle around with the Magi, would spend time fixing it up, but since it’s… oh shit… 0624 right now? I gotta go to sleep, guys.

15 thoughts on “ritchan’s new design”

  1. Yes, me likes it too… I just need more images for the rotator script.
    EDIT: I see you’ve got a Gravatar now too hah. It’s kinda like Facebook… once your friends have it, you have to have it too – or else it doesn’t quite jive. Oh, but I’m an exception 😮

  2. your tagline sounds like an eroge company that I know: minori. LOL!

    “we always keep incestuous spirit.”

    “we always keep minority spirit.” 🙂

  3. No they didn’t. Each image has a different tagline. Try refreshing and see (there’s only 3 at the moment).

    (this is going to get my hit rate sky high…. uhohoho)

  4. It’s primarily a nod to insani.org. wind -a breath of heart- wasn’t a great novel, but their translation with NNL rocks. No Name Losers worked especially hard translating it… you can tell.
    Besides, it’d just look awkward having ritchan.dasaku.net up there, don’t you think?

  5. Glad you found my code helpful. The removal of whitespaces from the CSS file saves about 4KB of bandwidth, lol. You can actually paste the CSS into Clean CSS and set the compression to “Low (higher readability)” to get a nicely formatted human-readable output. (Too late now I guess.)

    BTW a buttons {display:none;} doesn’t do anything and is not needed. The idea is to have a <a> tag set to display: block; with a fixed weight and height so that it is there even if it’s empty. The <span> inside hides the text, and the text itself is necessary (even if not visible) for search engine optimization, because the whole thing is within <h1>.

    This is an intended part of CSS and is supported by all the browsers which I tested. (Firefox, Opera, IE7, Safari.)

    And also, glad that you like Menclave’s releases. 😛

  6. Really? I was beginning to think they were ‘good enough’… heh. Well later, it’s already 0648.
    About the CSS: I was wondering if you were having a fit of jealousy, since your theme does look pretty good.

Leave a Reply

Your email address will not be published. Required fields are marked *