// Internet Duct Tape

//engtech gets new CSS duds

Posted in Internet Duct Tape News, Technology by engtech on November 25, 2006

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:

Tools used:

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.
  • 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. :)

21 Responses

Subscribe to comments with RSS.

  1. engtech said, on November 25, 2006 at 4:03 am

    Dang, I didn’t realize that the Sandbox theme uses posts excerpts for the category pages, instead of full posts.

  2. vuee said, on November 25, 2006 at 6:00 am

    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?

  3. engtech said, on November 25, 2006 at 7:09 am

    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.

  4. vuee said, on November 25, 2006 at 8:15 am

    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.

  5. Kristin K. W. said, on November 25, 2006 at 12:29 pm

    I think you could do with a smaller font-size – especially here in the comment field.

  6. Ben said, on November 25, 2006 at 7:50 pm

    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!

  7. engtech said, on November 25, 2006 at 10:26 pm

    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.

  8. adam said, on November 26, 2006 at 12:07 am

    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.

  9. engtech said, on November 26, 2006 at 12:18 am

    @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.

  10. timethief said, on November 26, 2006 at 2:08 am

    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.

    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.] ;)

  11. engtech said, on November 26, 2006 at 3:43 am

    @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).

  12. engtech said, on November 26, 2006 at 8:24 am

    I’ve decreased the amount of pink to purely the unvisited links in the post body. I think it looks a lot better.

  13. timethief said, on November 26, 2006 at 10:25 am

    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. ;)

  14. roy said, on November 26, 2006 at 11:41 am

    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.

  15. mpb said, on November 26, 2006 at 1:53 pm

    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.

  16. Mr Angry said, on November 27, 2006 at 3:42 am

    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).

  17. engtech said, on November 27, 2006 at 9:45 am

    Fixed, thanks for the catch.

  18. engtech said, on November 27, 2006 at 11:13 am

    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.

  19. engtech said, on November 27, 2006 at 10:15 pm

    iconification is done

  20. Tech Talk with engtech « Beats Entropy said, on November 29, 2006 at 8:22 pm

    […] 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. […]

  21. Digest for November 2006 « //engtech said, on November 29, 2006 at 8:25 pm

    […] 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. […]

Comments are closed.

%d bloggers like this: