Today WordPress 1.5 was released, and in a grand moronic display, I ran and deleted all my files and uploaded the new ones without reading the documentation. I figured it would have been the same as other upgrades, but nope. They introduced this theme system, so after figuring out what happened, I procceded to converting my current design into a theme so that I could use it. I think I’m finally done.
Make sure to hit refresh on your browser, so that you cache the new css; otherwise stuff might look wierd.
Other changes, I moved login widget to the right of the top bar, and it will now notice when you are logged in (and tell you so). Also, if you are registered and logged in, when you post a comment it will pull your info from your profile, so you’ll only be presented with the comment text area. I also started using mod_rewrite to get the php links to look a bit more permanent.
I added an implementation of the time_since() function, so instead of the specific date and time when the comment was made, it will now display how long ago since the time of the actual post was that comment in question posted. Might not be as user-frieldly as I thought. Basically the same codebase also gives us the time of the day that is now found after each post (x at night, x in the morning).
I’m considering making it so that you must be logged in (and hence, registered) to post a comment. Comment spam is becoming a real pain in the ass. I also might extend this user stuff a bit more. Later.
Continuing my previous endeavors with the almighty sidebar, I played around into the unknown lands of JavaScript (to me, at least) and managed to get the sidebar panels to show/hide upon clicking on the header of each of the panels. If you like, you can see the pertinent JavaScript here.
I tried using images that would toggle with it, a minus and plus widget, but I didn’t like how it looked in the end, so out they went. It seems to degrade alright too, panels just display expanded when you turn off JavaScript.
It is persistant! -if you do happen to have cookies enabled, it will save one with the position of the panels, so next time you come read some more of my blasphemy, the panels will be just like you left them last time you were around.
And.. that’s all it does for now. Maybe next upgrade I can get it to make butter toasts.
I started playing around with the sidebar again, I think I’m happy with it now. For the rounded corners I made two gifs with transparency (pngs with alpha channel would have been worlds better, but there is some stupid browser out there that doesn’t support them without a hack), the white color is actually there, while the inside of the gif is the one that is transparent. Generally you do it the other way around, but since I don’t intend to change the background: #fff; of the content div and the sidebar might get new colors and even new boxes, this is much better -I can swap, change or add colors to the sidebar, and still use the same two images for the rounded corners.
I had to use the h3 element to set the top left corner since CSS2 won’t let me set more than one background image per div. While I was poking at it, I also gave the h3 area a different color background and a bottom white border resulting in the titles of each box being separated from their content. The div of the second box (archives) uses the following code for example: background: #b6d638 url(images/box_top.gif) no-repeat top left; while the h3 element states border-bottom: 1px solid #fff; for the white border.
For the bottom left corner I just gave a background image and color to each div like you normally would, resulting in: background: #c0dd5b url(images/box_bottom.gif) no-repeat bottom left; for the same second box (archives).
I embraced the opportunity to play around with the flickr images too, I took out a redundant div and used the same trick flickr itself is using on ther site with the white background, grey border and margin/padding to center the image inside of it. I might play around with their API later, but next thing on the line is the banner.
I finally got around re-coding the CSS (I also just slightly changed the markup, nothing drastic), this time the spacing finally does look “pixel-perfect” in IE.
Apart from adding the contact button on the menu bar right on top (I’m an attention whore, what can I say?), i modified the overall width of the layout, bringing it down to 800 pixels wide, so that it barely just fits on a 800×600 resolution screen (who’s using that anymore?) without any dreaded horizontal scroll bars. I took away the user link at the footer of each post: It’s always going to be me, so i thought people don’t need to reminded continually of it. The background also changed, just a simple doodle with lines (not that the last one had a more elaborate “making process” anyway), I’m not sure if it’ll stay for long.
The sidebar is now less wide, it is now float positioned, no longer is it a crappy position:absolute element with margins to fix it, the unordered lists on it have less padding, allowing for a wider content area (in order to compensate for the now smaller width).
Less nested divs are in use, and the CSS has been generally cleaned up (redundant stuff taken out, et cetera) which should speed up rendering and possibly usage.
I still need to make an about section, and I will probably turn the contact button into a php mail form instead of directly a mailto: link. But I’m lazy -I’ll just bask in my grandeur for now, I’m happy it looks how I meant it to look on stupid IE.
Update (9:35 pm): I just changed the line spacing, I think it’s easier to read this way.