Monthly Archives: August 2011

Cars and Code goes wide track

This site is best viewed at a resolution of 800 x 600. Ugh. If I ever see anything like that on a site, I’m gone in a flash. Yet today, many web sites seem to be built for a resolution of 800 x 600. Sometimes even smaller!

I have a 30″ monitor that I run at 2560 x 1600 resolution. I don’t say this to brag (OK, maybe just a little bit), but instead to bring up what I consider to be a big problem with many web sites. It’s really annoying to have a site that looks like the image on the right.

Cars and Code using the default Elegant Grunge Theme

Cars and Code using the default Elegant Grunge Theme on my big monitor

That’s a LOT of white space. Now this isn’t all that big of a deal unless the content requires you to scroll. If all the content that you want to read fits in one screen then a centered narrow screen isn’t really all that bad. But having to scroll through a LONG story/article and watching all that wasted white space go by is something that annoys me. This morning I read this article from East Bay Express on Yelp and the Business of Extortion 2.0. It was an interesting read [although I’m not sure you can trust everything you read on the internet… 😉 ], but the whole time I’m reading through the six pages(!) at 11 words or so a line, I’m thinking “Man, this would be so much easier to read if there was more content on the screen.” It got even worse when I started looking at the comments (all 223 of them) and my scroll bar turned into a tiny little sliver on the right edge of my browser. I do understand that less content on more pages gives a site more hits, but even if you click the link for Full Text it just dumps all six pages into that one narrow column. My conclusion: I’m probably not going to trust Yelp! as much as I have in the past and East Bay Express needs to use a wider format for it’s articles.

That’s not to say that you can’t go too far the other way. If you are reading on the internet (as opposed to just scanning) then it can get a bit hard to make the jump across a screen that’s 2560 pixels wide. When I read PDF documents on my computer I usually use the 2 page non-scrolling view, as just about half the screen on a 2560 pixel width monitor is the right width for me. To me the ideal web site, particularly with content that you will READ as opposed to SCAN, is one where the reader has the choice of how it will appear. Tyler’s blog is like that. He’s got a lot of code examples that look better on a wider screen. Anton’s blog is pretty good too. The whole screen is used even if the side bar on the right hand side is a bit wide. (Sorry Anton!)

I’m not sure why I ended up choosing WordPress to host Cars and Code. I actually have a few other sites on the web and I could have installed WordPress there instead of using the hosted server, but it just seemed so easy to use WordPress on their servers instead of mine. It took minutes to turn into They have a number of predefined themes and many of them are quite good. Unfortunately for me, I happened upon Michael Tyson’s excellent Elegant Grunge theme. For some reason I immediately liked it (as do over 111,200 other people using WordPress!). It really seemed to fit in with Cars and Code. Elegant Code. Grungy Cars. Check! Now I say unfortunately because Elegant Grunge is one of those ‘all your content gets mushed up into the middle of the page’ type of themes. I looked around at some other themes but just kept on coming back to Elegant Grunge.

Well it turns out that for a small fee you can upgrade your WordPress account to enable you to customize the CSS for your blog. I’m not a CSS expert by any means, but with just a few modifications of the CSS and a bit of playing in Photoshop I was able to increase the width of Cars and Code.

Here’s how:

There are three main images that make up the background of the theme: header.png, body.png and footer.png. If you have a side bar (like these blog posts) then you use the default images. If you have no side bar (like my About and Rich Soule Racing pages) then you use header-no-sidebar.png, body-no-sidebar.png and footer-no-sidebar.png. I’m not using the two sidebar style, nor the rtl style (right to left), but there are images for those too. Since I’m not using those, I didn’t modify them. That means that of the four choices for elegant grunge in Appearance -> Theme Options: Content-Sidebar, Sidebar-Content, Content-Sidebar-Sidebar, and Full Width (No Sidebar), these modifications only modify Content-Sidebar and Full Width (No Sidebar). If you want to use the other options then you’ll have to update the images yourself. With the default images and the two theme options I’m using, you get this:

Quick Specs (all measurements in pixels):

  1. One sidebar: main column width is 490, sidebar width is 220.
  2. No sidebar: main column width is 760.
Cars and code at 1024 x 768

Cars and code at 1024 x 768

This works if you have a really small monitor. You can actually fit the content section (minus the side bar) of the default Elegant Grunge theme on a 800 x 600 monitor. That’s cool… except SVGA (800 x 600 resolution) was introduced in 1989. That’s right, 1989. That’s before some of you were born… While 1024 x 768 was actually introduced in 1987, it became a standard with more adoption starting in 1990. Now were only talking about a resolution that is only two decades old. That said, an iPad2 has a screen resolution of 1024 x 768, so that became my compromise resolution. If the site was readable on 1024 x 768, I would consider it a success. But I’d like the content to use up as much as that 1024 width as possible while still looking largely like Michael’s theme. I used the Full Width (No Sidebar) theme option (which is used on the Rich Soule Racing Page, see the image at the left) as my test and at a content width of 955 pixels everything fit on the screen without much space to spare. When using the Content-Sidebar theme, I played around with sizes until the images for the date of the post didn’t overlap the vertical line separating the content body from the sidebar. By the way, Firesizer, a plug-in for Firefox was really helpful for looking at my site in different resolutions. (You are using Firefox and Firebug for development, right?)

A quick session with Photoshop (I tried Gimp first, but layers are so much easier in Photoshop than Gimp) stretched Michael’s images from their default resolution of 813 pixels wide for the body (there’s a bit of white space on each side of the image) to 1200 pixels wide. That’s an extra 387 pixels for content or a 47.6% increase in content width. That seemed about right. It’s not as good as letting the user choose how much content is on the screen, but it’s still a big increase over the default. I uploaded the images to my Media on, and then used the custom design upgrade to add my own CSS to Michael’s Elegant Grunge CSS. Custom CSS is loaded after the default CSS, so you can add just the CSS you need to modify to get the look you want. A quick search through the provided CSS showed me the locations where the header, body and footer images were being used and where the widths for content were being set. After a few minutes I had the below CSS in my Custom Design CSS window. I left the default of “Add my CSS to Elegant Grunge’s CSS stylesheet” checked and used 810 in the “Limit width to pixels for videos, full size images, and other shortcodes.”

Here are the six images that I modified: cac-header.png, cac-header-no-sidebar.png, cac-body.png, cac-body-no-sidebar.png, cac-footer.png, and cac-footer-no-sidebar.png. If you’d like to use this, please click each link, and then right click each image and save it to your computer. Then upload each image into your Media library on WordPress. Once you’ve done that you can click on each image name in the Media Library and you’ll see the URL for the image. Plug that URL into the code below, replacing each PUT-YOUR-MEDIA-LIBRARY-URL-HERE with the base portion of your URL. For instance if your media library URL for the cac-body.png is then you would update the second line below to background:url(‘’) no-repeat center;.

#header {
background:url('http://PUT-YOUR-MEDIA-LIBRARY-URL-HERE/cac-header.png') no-repeat center;
.no-sidebar #header {
#content-container {
background:url('http://PUT-YOUR-MEDIA-LIBRARY-URL-HERE/cac-body.png') center top repeat-y;
.no-sidebar #content-container {
#content {
#content-body {
.no-sidebar #content-body {
.post .entry {
#sidebar {
#footer-wrap {
background:url('http://PUT-YOUR-MEDIA-LIBRARY-URL-HERE/cac-footer.png') no-repeat center top;
.no-sidebar #footer-wrap {
h1.entry-title,h2.entry-title {

After using the modified images and CSS, I get this:

Quick Specs (all measurements in pixels):

  1. One sidebar: main column width is 810, sidebar width is 220.
  2. No sidebar: main column width is 950.

What do you think? Is this better? Is anyone having issues now that the width is wider? Leave some feedback and let me know. Also, I know that these CSS and image modifications are not perfect. If someone else can come up with better numbers and/or images, please share and I’ll update the post.

P.S. This site is best viewed at 1280 (or wider)  x 1024 (or any other height you desire!) 😉

Edit: Added a line to increase the line-height after a suggestion by Designsimply on the WordPress forums. Also added some clarifying information about the theme options and why I chose the width I did.


Expert Oracle Application Express

Expert Oracle Application ExpressOne of the fundamental problems with most documentation from most technology companies is that the documentation usually contains a bunch of assumed knowledge.

Take for example, the Oracle Application Express Installation Guide for Release 4.1. This document has the following line in Section 1.4 About Choosing an HTTP server. “In order to run, Oracle Application Express must have access to Oracle Application Express Listener, Oracle HTTP Server and mod_plsql or the embedded PL/SQL gateway.” Yep. That’s right… sort of. As an experienced installer of APEX, I know that they mean: There are three different ways to connect to Oracle Application Express:

  1. The Oracle Application Express Listener
  2. An Oracle HTTP Server and mod_plsql
  3. The embedded PL/SQL gateway

But, if I was a brand new person with no experience, I might wonder if I need the Oracle Application Express Listener + an Oracle HTTP Server + mod_plsql, or the embedded PL/SQL gateway. Reading the rest of the guide might give me an idea, but for a while I might be confused.

However, I often waffle back and forth between what the biggest problem with technology documentation is: Is it assumed knowledge? Or is it the fact that almost all technology documentation tells you what some setting or button does, but it almost always leaves out the ‘and here is why you would want to do this’ information. You could make the argument that they are one in the same, but I usually see them as different problems. The second problem really comes into play when there are choices. If there are no choices then just telling me what I have to do is fine. Just make sure I know how to do it. I once saw a step in an installation guide that was “Configure SQL/Net”. No links to other documentation. No explanation on how to do it. Just “Configure SQL/Net”. Ummm… Aren’t you kind of assuming that I know how to do that? (And lest it seem like I’m picking on Oracle here, I’ve seen this in all types of documentation from other technology companies like Microsoft and Dell to even simple things like power tools.) But when I have choices, let me know what those choices mean to me and why I’d choose one over the other.

While it would be great if all the documentation from technology vendors addressed both problems, I doubt it will happen soon. Until then we have books like Expert Oracle Application Express.

This book is 13 chapters long and each chapter was written by a different author. At first that sounds like a recipe for disaster. But when you realize that each author is a pillar of the APEX community and a subject matter expert on their chapter and (most importantly) each of the chapters is excellent, you suddenly realize you’re holding a treasure in your hands.

Each chapter contains real world experience including the all important ‘and here is why you would want to do this’. If fact chapter 1 by John Scott addresses the above connection to Oracle Application Express issue. Sure there are three ways to do it, but why would I want to use one way or the other? Well, read chapter 1 and you will know.

I spent 14 years at Oracle and taught hundreds of people how to use Oracle Application Express and I thought at least some of the chapters would be a bit of a review for me, but I can truly say that I learned valuable information from each and every chapter.

I highly recommend this book to anyone who is going to be using Oracle Application Express.

Cars and Code is born

Today I started installing Oracle Enterprise Edition on Oracle Enterprise Linux inside a VirtualBox VM so I could play around with Oracle Application Express. I’d been doing some APEX work for a customer and I wanted to see how different APEX 4.1 was from 4.0.1 that I had been using. After installing Oracle Enterprise Linux, I wanted to upgrade the version of firefox on the virtual machine ‘the correct way’. A lot of the stuff that I found using Google made assumptions. The biggest assumption: You knew exactly what you were doing with Linux. Other assumptions: You were not root. You were root. You were using sudo. You were not using sudo. And so on.

A very long time ago I wrote a step by step guide for installing Oracle WebDB on a laptop. There were NO assumptions. Basically you could hand the document to your grandmother and she could install WebDB (which involved setting up networking, Oracle Database, Oracle iAS before you could even start with the WebDB).

My hope is that I might get the time to write a few new step by step guides for some of the things that I find myself doing every once in a while. Since I needed somewhere to put them, this site was born.

My other source of income is cars. I’m a high performance driving instructor. I spend two to six days each month on a race track teaching people to drive their cars on various tracks around Texas and sometimes travel to tracks outside of Texas to do the same. I also race in NASA TTB and in the 24 Hours of Lemons. Soon I’ll be adding Chump Car racing to the resume.

So every once in a while there might be a post or two about cars.

I hope that I’m able to add content here, and I hope that someone, somewhere has a better day because of it.

Rich Soule