New Blog Design

As you can tell, I’ve redesigned the site. This was long overdue. I had been wanting to do this for a long time, but I knew it would be a beast of a project. When I “upgraded” WordPress a month ago and it broke the old design, I knew I had to get started on the redesign immediately. I spent much of the last two weekends working on it.

This design is based on a theme I found at FreeWPThemes.net, but I had to seriously re-engineer the thing. Superficially they are similar, but the original was missing all sorts of essentials like blockquotes. The features it did have needed to be customized to my colors, margins, and other formatting preferences. My customizations were made unnecessarily difficult by two things:

  1. The original Cascading Style Sheet was poorly (i.e., NOT!) documented.
  2. I’ve never been able to comprehend CSS.

So after many hours of trial and error So after many minutes of trial and many hours of error, I was finally able to get the thing redesigned. I also think I’m finally starting to understand CSS.

Look over the site. I hope you like the improvements. If you think the new look is a total disaster, you’re out of luck. I have no desire to repeat the last two weekends. I’m married to this design for at least the next couple of years (See? First we let the gays marry, now people are marrying inanimate objects!).

If you find some things are not working or don’t look right, please leave me a comment here. I still have a few tweaks yet to do, but I’m sure I’ve overlooked some things as well.

Oh, BTW, the new masthead has four quotations in it. I’ll be adding an explanation about them to my About page. The quotes are from the First Amendment, the Treaty of Tripoli, the Virginia Statute for Religious Freedom, and Jefferson’s letter to the Danbury Baptists. Hopefully, you knew that already.

spacer
Updates:

1/11/09 @ 11:00 PM
I’ll try to get the Recent Comments plugin working ASAP (hopefully Monday night).

There is a problem with IE 6. The header is shifted a bit to the right, a vestigial header is showing behind it, and the whole horizontal green menu bar is messed up. This is because IE 6 is not standards-compliant (Translation: It’s a piece of crap).

1/12/09 @ 8:10 AM
I think the best way for me to deal with the IE6 problem is to install a Javascript that checks if you’re running the odious browser and disables the horizontal menu bar (it’s redundant with the links on the right anyway). Does anybody know where I can find such a script? I can Google it tonight, but I won’t get home until late. If you save me some search time, I can fix these issues sooner.

23 Responses to “New Blog Design”

  1. Kevin Says:

    holy hell!
    *looks around*
    i like it. nice work! your efforts were not in vain!

  2. vjack Says:

    I like it. My only problem is that I’m starting to feel like I’m the only one not using WordPress. Oh well. If there is one thing I’m used to as an atheist living in the bible belt, it is feeling like I’m on my own!

  3. Ron Britton Says:

    Vjack:

    I don’t really like WordPress. In fact, I almost abandoned it last month. I decided to give it one last chance with that upgrade. They’ve made some improvements to it, so I’m a little less resentful of it now. If you like what you’re on, then stick with it.

  4. Jeff Eyges Says:

    Looks great, Ron. Couple of things:

    1. If the title of the post is long, it runs over the date. This may just be Firefox; I haven’t tried IE yet (mine seems to be busted, and I haven’t fixed it yet).

    2. There appears to be a bug; if you sign up for email notification on a thread, you may get notices from all threads on that blog. WordPress has been notified.

  5. Jeff Eyges Says:

    Actually, I’m not seeing the “Manage your subscriptions” link here.

  6. Ron Britton Says:

    Jeff:

    If the title of the post is long, it runs over the date. This may just be Firefox

    I’m aware of that. It happens in all browsers I tested. I’ll try to fix it, but it’s near the bottom of my list.

    There appears to be a bug; if you sign up for email notification on a thread, you may get notices from all threads on that blog. WordPress has been notified.

    I’ve never used that feature. If it’s a WordPress bug, it would have occurred before I made the change as well.

    Actually, I’m not seeing the “Manage your subscriptions” link here.

    I’ll look into that. Since I’ve never used the subscribe feature, I didn’t know it even had a manage feature!

  7. Jeff Eyges Says:

    The notification bug is one I noticed on another blog that’s made the switch.

    Re: subscription management – Actually, I’m not even seeing a “Subscribe” option under the comment field.

  8. Parrotlover77 Says:

    Ron – If you need CSS help, fire me the CSS and ask me the question and I will help resolve it.

    Also, don’t be too hard on IE 6. CSS was barely even a glimmer in any developer’s eye when IE 6 came out. 😉 IE 6 wasn’t the problem. The problem was that IE 7 took too damn long to come out!

  9. Parrotlover77 Says:

    Oh, BTW, I really like the design. It’s much cleaner and more modern.

  10. Parrotlover77 Says:

    You can fix the date overrun like this…

    #content .post .header H2 { width: 360px }

    However, the border under the title will shrink with the post title. A better method would be to “float” the date to the right with CSS, but the way the page renders, the date was designed to fit under the title, so the “absolute” positioning trick it uses is basically a hack. The relative positioning of the elements pretty much makes floating impossible without some serious CSS overhaul. I suppose editing how the block elements are laid out would be impossible since that’s generated by WordPress itself…

    Alternatively, if you don’t care about the date being in-line with the subject, you can change “#content .post .date” so that “position: absolute” is changed to relative (or removed) and then tweak the margins/paddings to get it to look pretty.

    Finally, the top-bar menu does not work in IE8 in standards mode (full CSS compliance!), compatibility mode (IE 7 mode), or “quirks” mode (IE 6 mode).

    Making cross-browser menus out of ULs is not rocket science, so I think the person who wrote the theme you downloaded made a mistake that firefox is forgiving of, but other browsers are not. (Believe it or not, FireFox has plenty of its own quirks, even if it was much better at CSS rendering than IE6.)

    Honestly, though, I don’t really see the need for the top menu at all.

  11. Brian Says:

    Being a complete computer illiterate, I have absolutely no idea what much of the above conversations are about, but I like the new look anyway! Nice work.

    Will there be a listing of the most recently-commented-on articles on the main home page as before? If not, no biggie.

  12. Ron Britton Says:

    Jeff:

    Actually, I’m not seeing the “Manage your subscriptions” link here.

    I’ll try to fix that within the week.

  13. Ron Britton Says:

    Brian:

    Will there be a listing of the most recently-commented-on articles on the main home page as before? If not, no biggie.

    It is a biggie. A lot of people use it. I’m still hoping to fix that tonight. Hopefully Tuesday night. I’m having to work extra hours this week.

  14. Ron Britton Says:

    PL:

    I’ll take your tips on the CSS and fiddle with it.

    Making cross-browser menus out of ULs is not rocket science, so I think the person who wrote the theme you downloaded made a mistake that firefox is forgiving of, but other browsers are not.

    Actually, it doesn’t work perfectly in any browser. I was going to research this next weekend and see what the deal is.

    Honestly, though, I don’t really see the need for the top menu at all.

    I sort of have it in mind to customize it. It would probably be a subset of the links on the right. Because of its prominent position, it would be good for emphasizing certain things. I might make a best-of page, for example, so people who are new to the blog could read my rare good posts instead of the crap I shovel out most of the time.

  15. Parrotlover77 Says:

    If you can get the top menu to work (especially with custom content), then awesome! Go for it! 🙂

    New formatting issue (not a huge one)… The comment number is smushing together with the user name in IE8. Anybody else seeing this or is it just IE8? Anyway, it can be fixed by moving the CITE over some pixels. Create a “#content .post .content OL LI CITE” and set a value padding-left: 15px.

    Also, if you could use a background image that has a horizontal line or maybe a fading background gradient of some sort to separate the comments, it might be easier on the eyes (to me anyway). The comments tend to sort of run together visually, to me. You can add the background tag to “#content .post .content OL LI” to achieve this.

    Sorry to be such a backseat CSS driver! 😉

  16. Ron Britton Says:

    PL:

    The comment number is smushing together with the user name in IE8.

    I haven’t seen that in the browsers I’ve tested with. I’ll play with that when I have some time.

    The comments tend to sort of run together visually, to me.

    That bothers me, too. I was just thinking of adding a little space between them. I’ll have to think about a background image. You’ll notice that the posts themselves use something at the bottom. Maybe I could use that, or a variation on it. I’d like the comments to not look exactly like the posts.

    BTW, the blockquotes have too much space between the text and the border. I can’t get that any narrower. Do you have any brilliant solutions for that?

  17. Parrotlover77 Says:

    Oh, btw, I should mention the CSS I’m posting here has been tested. IE8 has a more advanced version of the IE Developer Tools integrated right in the browser. Anyway, I can go in and fiddle directly with the CSS on your site and see the results in real-time. It’s pretty awesome! 🙂

    As for blockquotes, in the BLOCKQUOTE tag in the CSS file, changing the padding-(direction) to a smaller value to decrease the space on the inside of the quote and margin-(direction) to change the spacing on the outside.

    Playing with it… What’s odd is that padding-bottom is already 0 and there is still space… Ah! There is a P tag inside the blockquote. That always adds space to the bottom (separate the paragraphs). To fix that, you need to create a new style for that P tag inside the blockquote. But if you do that, the problem is that if you have multiple paragraphs, they will run together. This is a toughy!

    You might be able to do a negative padding “-1 em” on the blockquote to match the positive margin set by the paragraph. But that doesn’t work in the Developer Tool here in IE8. Negative values, I believe, are not standards-compliant, but I’m not 100% sure. Also, IE8 is a buggy beta, so it might just be that.

  18. Ron Britton Says:

    PL:

    Oh, btw, I should mention the CSS I’m posting here has been tested. IE8 has a more advanced version of the IE Developer Tools integrated right in the browser. Anyway, I can go in and fiddle directly with the CSS on your site and see the results in real-time. It’s pretty awesome!

    That’s phenomenal. That would have saved me at least one weekend.

    You might be able to do a negative padding “-1 em” on the blockquote to match the positive margin set by the paragraph. But that doesn’t work in the Developer Tool here in IE8. Negative values, I believe, are not standards-compliant, but I’m not 100% sure. Also, IE8 is a buggy beta, so it might just be that.

    That doesn’t work in Safari either. Also, I’d prefer not to go non-standard, considering how much I’ve been railing against people who code their sites non-standardly (and the browsers that encourage that).

    I’ve had that W3C HTML button on the site since the beginning (which I still need to restore). There’s a similar tester for CSS, but I don’t use it, since (at least in the past and probably still) I wouldn’t know how to fix it if the site were out.

  19. Parrotlover77 Says:

    Lol. Well, you should give it a go. If you encounter CSS problems, just shoot me an email. I might be able to find a work-around.

    My website is not fully compliant. I wanted it to be really badly when I started, but there are so many third party plugins I use (forums, blog, etc.) that by the time I was finished, it failed the tests. I think I pass HTML 4.0 transitional, but XHTML 1.0 and beyond, forget about it! 🙂 I think the W3C has really good intentions, but constantly deprecating tags is not a good way to get a standard adopted, in my opinion. XHTML is a remarkably good standard, but it Breaks The Web (TM) for all the older sites trying to adopt it (and newer ones too that are working around browser quirks).

    Unless they were starting the web from scratch, they should have left in all the old standard tags and even the de facto standard tags, as long as they were XML compliant. For example, you can’t have XML compliance using the &ltbr&gt tag unless you integrate the closing slash into the tag, so it should be &ltbt /&gt. And that’s fine! That’s an easy find-and-replace. But why, oh why, did they do away with the <center> tag, along with all the other zillion incredibly useful tags introduced by the industry over the years?!?! It’s not as if any of the browsers can stop supporting those tags. If they did, 80% of the web sites out there would not render correctly. Even the most standards compliant browser in existence, Opera, renders those old tags!

    But I digress…

    A lot of the problems with the CSS on this site could be fixed by changing the actual HTML tags (mainly the order in which they appear), but I’m guessing you have no control over that, am I correct in that assumption?

  20. Parrotlover77 Says:

    Whoa – that was weird. Did I just forget the semi-colons up there when I tried to make greater-than and less-than symbols in a total brain fart or did your new version of Word Press filter it? Let’s test!

    <><>

    Okay those definitely are formatted correctly. Depending on what is seen when I hit post will tell us the answer!

  21. Parrotlover77 Says:

    BRAIN FART IT WAS! I need some caffeine…

  22. Ron Britton Says:

    My website is not fully compliant. … I think I pass HTML 4.0 transitional, but XHTML 1.0 and beyond, forget about it!

    I’m only going for Transitional here. At the time I started, I don’t know if any browsers rendered Strict correctly. Also, Strict doesn’t allow target=”_blank”. I don’t know why they got rid of it. I guess they felt that gave the designer too much control over the user’s browser. I don’t want to send people away from my site until they’re done reading the article.

    A lot of the problems with the CSS on this site could be fixed by changing the actual HTML tags (mainly the order in which they appear), but I’m guessing you have no control over that, am I correct in that assumption?

    Most of the HTML is generated by WordPress. There’s a little bit embedded in some PHP files, but I can’t figure out how to edit those. The PHP sends control in a zillion different directions, so I can’t tell when it’s going to do something or even be guaranteed what it will do.

  23. Parrotlover77 Says:

    Strict deprecates a heck of a lot of useful tags! I use Live Writer to post a lot of my entries and it uses the align attribute all over the place. Sigh — align is also deprecated in strict, in favor CSS’s text-align property.

    I would miss target=blank as well. The thing is (and no browser currently does it afaik), the whole “I don’t like how the site is opening this page” can be solved by a simple context-menu entry that says “open page in same tab/window” right above the “open page in new tab/window” entries.