/contrib/famzah

Enthusiasm never stops


Leave a comment

Paragraph indentation fix for HTML lists in the WordPress.com Contempt theme

Here is how a list in the original Contempt theme looks like:

Contempt HTML list, original

And here is how a designer fellow helped me change it:

Contempt HTML list, modified

The differences are as follows:

  • The indentation of the non-first lines in the list paragraph are aligned with the first line.
  • The list marker is not the symbol “o” but the original circle symbol provided by browsers.
  • The spacing between list paragraphs is a bit bigger, in order to improve the readability.

If you like the modified version better, you need to navigate to Appearance->Edit CSS and add the following CSS code there:

.entry ul li:before,#sidebar ul ul li:before {
	content:"";
}

body .entry ul {
	list-style-position:outside!important;
	list-style-type:circle!important;
	text-indent:0!important;
}

body .entry ul li {
	margin-bottom:13px;
}

You can also read my other post if you like to Make WordPress.com Contempt theme layout wider.

Advertisements


1 Comment

Make WordPress.com Contempt theme layout wider

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.