Enthusiasm never stops

Make WordPress.com Contempt theme layout wider

1 Comment

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.

One thought on “Make WordPress.com Contempt theme layout wider

  1. Pingback: Widen wordpress.com Contempt theme « Arkaitzj’s Blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s