Instead I decided to write a very simple function to add a class name to the first paragraph by filtering the content, then setting the styles accordingly in my theme CSS file.

function first_paragraph($content){
	return preg_replace('/<p([^>]+)?>/', '<p$1 class="first">', $content, 1);
}
add_filter('the_content', 'first_paragraph');

By default this will append class=”first” to the first p tag in your post.

If you want to use this function on your own blog, just add it to your (or create a)  functions.php file within your themes folder.

One of the main reasons for for the lack of updates is due to the stack of work I’ve been attempting to get through and my attempts at redesigning the layout of my blog.

I had a couple of different concepts for the redesign, but this is the design I eventually went with.

Other ideas included a post-it note type design, where the notes were randomly placed on the screen with the ability to drag and re-organise.

Although I liked the idea of randomisation, after putting the design into practice it failed to fulfil it’s purpose of a blog theme. Content was difficult to get to and awkward to locate, so for this reason decided to take a different approach.

The second design couldn’t be more different from the first. I decided against proceeding with this design for a number of reasons. Firstly, the length of each page would have been too long and secondly I didn’t really like it.

My third and final attempt was loosely based on the previous, using a single fixed width column with the sidebar below the main content. The colours were reduced to a single primary colour – orange – with white text on a dark background.

I felt this was going in the right direction and so continued through with the development process to create the current theme, which – to be honest – is nothing special but it’s quite clean, simple and is a bit different.

$("#id").css({opacity: 0.8});

It turns out that the latest version of jQuery (1.3.1) doesn’t believe that Opera 9.2 supports CSS opacity, and therefore it is ignored completely.

There are two possible fixes for this, the first is to simply upgrade Opera to a newer version (the latest is 9.6.3).

The second option is to tell jQuery that opera does support opacity using the following – or similar – within your script:

if ($.browser.opera) {
    $.support.opacity = true;
}

One solution for this is to set a dimension (width or height) to the button.

To target Safari 3 in CSS you can use the following to add or override any existing attributes, such as the height of a button:

@media screen and (-webkit-min-device-pixel-ratio:0) {
	button {
		height: 40px;
	}
}

If required, multiple selectors can be added into a single block.

The Problem:

In the example below there is a standard button with 10px padding on all sides. Internet explorer chooses to add additional horizontal padding:

The solution:

After coming across this problem myself in the past, I eventually remembered that there are two CSS styles you can add to fix this bug feature in IE:

button {
	width: auto;
	overflow: visible;
}