//engtech gets new CSS duds
4 months ago WordPress.com introduced their paid CSS upgrade feature. My first reaction was that I wanted to stay the hell away from it because I know I’d end up endlessly tweaking the site and never producing any content. So instead I focused my efforts into trying to improve the existing WordPress.com themes (and coming up with nifty stuff that is useful to any theme designer). The time I’ve spent debugging themes countered any argument against the CSS time sink.
So ten hours later (cumulative), this is what I came up with. It is my first time using CSS and as you can tell I’ve still got a lot to learn. I’ve been developing my CSS using the preview button — little did I know that it would go live the minute I hit the upgrade button. On the same day I’m on the front of Slashdot and Digg. Oops.
Oh well, life is full of opportunities. It’s up to the user to decide how to interpret them.
Credit where credit is due:
- Colours based on Unsleepable by Ben Gray.
- Font settings from Oreo by Scrivs.
- Silk icons.
- Thanks to Andy for telling me I could move a sidebar widget to the navbar using CSS.
Tools used:
- CSS Tutorial
- CSS Table Border Style Wizard — Amazing!
- Firefox Web Developer extension – Ctrl-Shift-F brings up a CSS highlighter that shows the name of the element your mouse is pointing at.
- XEmacs – because I can’t even get my brackets to match up unless I’m using a syntax highlighter :)
- I really don’t recommend it for people who aren’t familiar with emacs.
Existing problems:
Is the font size too big?Need to fix post headers… problem with highlighting.Visited links look wrong in the top bar.Internet Explorer 6 is being dumb with the sidebar on individual post pages. (Am I surprised? No.)Trackbacks have a background colour.I want to improve previous/next posts.“Read more >>” could probably be improved.Indicate which page/category you’re on in the sidebar.Fix navbar hover for the current page.Remove link-style on the headers in the sidebar.Add left margin to the comment entry box.Fix headers on single-post view.Add CSS to the tag cloud page.- Reduce margin before first post on excerpt pages.
Add section specific feeds to the sidebar when viewing that section.Add CSS for tables.Look at name/email/website boxes on comment form when not logged in.Add icons to entry titles / comments.- MORE ICONS!
- Validate.
- Reload while not logged in looking for WP.com Adsense.
Let me know in the comments if you can find anything else wrong. Please link to specific pages that show the problem. :)
Most Popular Posts
Most Recent Posts
Site Map
Random Post
About Me
Subscription Options
Free Software
Wordpress Tools
// Internet Duct Tape 
Dang, I didn’t realize that the Sandbox theme uses posts excerpts for the category pages, instead of full posts.
Sandbox isn’t the only theme I’ve run across that does excerpts. I think it is confusing for the reader because it isn’t obvious that one has to click on the post title to see the entire thing.
This comment box uses huge type!
It is difficult with the type size to get an idea of the post as a whole. Actually, I don’t want to see the entire post at a time, but people often read many lines at a time. Also, going back to the days of desktop publishing, the presentation of written information (white space, careful fonts, highlighting, etc.) is important to the conveyance of information, too. There must be a way to calculate the optimum size, leading, browser page, etc. for most blog readers.
Where’s the cat?
Yeah, definitely need to fix the post comment box size. Went overboard there. :)
(But it’s fun when people can read the comment you’re typing from across the room… errrrr)
Thanks for the comments, Vuee.
I’m really not happy with the way excerpts are done on category/search pages. Looks like crap.
I like the “all posts by title” page. is that a CSS mod or can it be generated for the regular WP.com?
Under “Blog Stats” in the sidebar, you have an empty field. (maybe that’s where the cat is?)
The combination of hotlink color (not red and not blue), white background, indent, little bullet, and unobtrusive underline I find a good balance for finding what I want without getting distracted. However, I am not colorblind so maybe someone else could check that aspect.
I think you could do with a smaller font-size – especially here in the comment field.
Thanks for the link on the color scheme ;). Yeah, you could definitely make this font size in the comment box smaller. Also, increase the line height on your post titles so when a person hovers over it the lines don’t overlap. Other than that it looks very original and good!
ok, I think that’s better.
I still think I might have to switch base themes because I *hate* the way the category pages look. I really wanted to do the top navbar so that if you’re only interested in blogging than you can quickly look at everything to do with blogging.
re: the kitty
My blog was getting a little too popular and I wanted to reduce some of the aspects of how easy it was to identify me.
it looks really nice. the widget-as-navigation is pretty slick as well, nice work. personally i like the excerpts on archive pages, since otherwise they’re way too unwieldy.
@adam: thanks
Maybe I’ll get used to the excerpt pages. It’s probably better for search engines anyways since it focuses all the links inside the site.
And I really don’t want to try redesigning the CSS for another theme. Ugh.
So we’ve known each other long enough now to be brutally honest right?
***KISSES*** The font everywhere is large enough to read without eyeglasses.
YAHOO! A comment box I don’t need either glasses or magnification to use.
YIPEE! There’s lots of contrast between the background and fonts for easy reading without squinting.
YUCKO! The page tabs are too HUGE and the white lines between the labels are … ahem … unattractive [I really mean butt ugly].
MEH … the header is boring.
MEH … the pink font in general doesn’t appeal to me and the amount of pink in the sidebar gives me a Barbie land feeling [nope I never owned one of the dratted dolls].
Hmmmm… I like the excerpt format [she shrugs].
YUP! I loved the cat but he/she was too much of an identifier.
SUGGESTIONS:
background colour – cream as in yummy white chocolate;
font colours – primary colour yummy dark chocolate brown;
links the same blue and rss orange.
[And don’t give me the I won’t be tweaking this theme anymore nonsense – of course you will – you won’t be able to help yourself.] ;)
@tt: honest is always good. I didn’t write this post in order to collect compliments. When you’re working on something by yourself you get tied to your decisions even when they’re bad.
I just checked it out on my laptop… and that’s more pink than I indended. (It’s more of a purple-pink on my desktop PC).
I’ve decreased the amount of pink to purely the unvisited links in the post body. I think it looks a lot better.
So do I. :) It’s a softer pink now. Before it was screamy. Being a geek you took my request fro a cream background dead seriously. *lol* I actually meant the blog part. The part that you changed IMO ought to be blue. ;)
I’m not a fan of the fixed width layout. Sorry! :) Is there a way to toggle that using CSS? Or even hiding the side bar as your reading posts? I did the hiding side bars on my site and it helps focus on the content.
So far so good though. I like the colour scheme and your use of font sizes. Good work.
One advantage to the way you / theme have the category excerpts is that there is an ellipsis in a box which is a clearer indicator the post continues elsewhere. (The shaded number of comments box helps too)
The new comment box type size (and typeface?) is very nice.
Nice, strong look. It seems you fixed your biggest issues before I got a look. I did experience a problem when posting comments. The last couple of words on each line disappear into whitespace – makes it hard to remember what I was typing (not a touch-typer, I have to see what I’m typing.
This is on IE 6 via Windows XP (work mandated setup – not my choice).
Fixed, thanks for the catch.
Ok, finally got rid of the ugly header image.
I’m planning on iconizing the pages/categories with more of the silk icons. I think they look really good with this colour scheme.
iconification is done
[…] Yes, I am trying to ride the Passive Depressive traffic wave. It’s been almost a month since the last digest, so apologies for the size. I finally got my hands dirty with CSS and //engtech is sporting a new custom look by yours truly. […]
[…] It’s been almost a month since the last digest, so apologies for the size. I finally got my hands dirty with CSS and //engtech is sporting a new custom look by yours truly. […]