Posts Tagged ‘KUBRICK’

How To: Widen Your Kubrick Wordpress Theme

Permalink
We Love WordPress

Although I plan on creating my own theme whenever I stumble across some free time, the default Kubrick theme that came with WP suits my needs just fine for now.

Lately I’ve been finding myself wanting to take advantage of the entire width of my blog screen. Elements that get in the way of accomplishing this are obviously the sidebar but also the column width as defined in the CSS.

Fortunately we can take care of that with a simple Page Template. If you’d like to create the occasional wide page and use your existing blog width, read my article on creating a Page Template.

Still Need More Space?

Alright, we still need more room for things like Amazon’s astore so let’s widen our standard Kubrick width from 760 to 800.

Note: Take note of the 40px increase as we’ll use that to adjust div padding and such.

As always, be sure to backup your CSS file (default: styles.css) just in case. I’ll present the following steps in an order you can follow if modifying a production site for minimal disruption.

Modify Some Graphics

Using your favorite editor or even MS Paint, open the following files and increase the image attributes to your desired width.

  • kubrickbg.jpg
  • kubrickbgwide.jpg (this might only be present if you’ve installed the sidebar widget)
  • kubrickfooter.jpg
  • kubrickheader.jpg

Once that is done, extend the image length by cutting off the right size and moving it to the new “right side”. Then copy a middle section of the image and paste it to fill the hole left behind by your initial cut.

If someone knows of an easier way of accomplishing this please share. All it all it isn’t very difficult at all anyway.

Save the new files as a name you’ll recognize to associate with your new width like *_800.jpg or .png (e.g., kubrickheader_800.jpg).

Note: If using MS Paint, you might want to save the image as a PNG to avoid the default JPG dithering that Paint applies to new files.

Edit The CSS

Using the standard Kubick Stylesheet, there are only a few CSS elements you’ll need to modify. Modify your style.css doc by navigating to Read More »