If you want to modify the width of your blog layout, you have to fist purchase the “Edit CSS” Upgrade. You can then tweak the CSS and adjust the Contempt theme for a bigger resolution.

First download the new background image which is stretched to fit the new wider design. You have to upload this image to your blog via Media->Add New. Copy the URL address of the uploaded image; in my case this was “https://famzah.files.wordpress.com/2009/11/bg.jpg”.

Navigate to Appearance->Edit CSS and put the following CSS code there:

#topbar {max-width:950px;}
#pagebar {width:950px;}
#page {width:950px;}
#footer {width:950px;}
#content {width:700px;}

#sidebar {padding:20px 0 10px 0; margin:-60px 0 0 730px; width:200px;}

#headerimg {background-repeat:repeat-x;}
body {background-image:url(https://famzah.files.wordpress.com/2009/11/bg.jpg);}

Make sure that you replace the URL address “https://famzah.files.wordpress.com/2009/11/bg.jpg” with the URL address of your image.

If you want even bigger space for the primary content area, you can shrink the sidebar a bit by using the following CSS code for “#sidebar”, instead of the above one:

#sidebar {padding:20px 0 10px 0; margin:-60px 0 0 780px; width:150px;}

Special thanks to the WordPress.com Support team. The Contempt theme had the background image embedded in the HTML body source code. This made it impossible for the background image to be replaced. After I contacted the Support team, they fixed this in a few hours. Kudos!

Another fellow blogger came to the same CSS conclusion on how to resize the Contempt theme and make it wider. So we are either both correct, or we both broke the CSS of our blogs and you are now facing layout problems while reading this. 🙂

You can also read my other post about Paragraph indentation fix for HTML lists in the WordPress.com Contempt theme.

Author: Ivan Zahariev

An experienced Linux & IT enthusiast, Engineer by heart, Systems architect & developer.