Johnny Chin » WordPress

Using Tags to Highlight your Posts

Johnny — Fri, 10 Apr 2009 10:25:54 +0000

While playing around to get Highlight your Sticky Posts, I realized that with WordPress 2.7, we can now modify our CSS stylesheet (styles.css) so that we can highlight a Post by simply adding a “tag” to that Post. What we need to do is add that appropriate entry int our styles.css file.

For example, this Post is highlighted in “shade”, so I added the tag “highlight-shade” to this Post and added the following line to my styles.css:

.tag-highlight-shade { background-color: #EEEEEE; }

NOTE: the “tag” prefix to the stylesheet entry.

I guess you can have fun with tags and various stylesheet effects now.

Highlight your Sticky Posts

Johnny — Thu, 09 Apr 2009 23:07:08 +0000

To simply highlight something you can just modify your CSS stylesheet styles.css to include something like this:

.highlight { background-color: #FFFF00; }

With WordPress v2.7, you can now mark a post as “Sticky”, which puts it at the top of the page. If you are using a WordPress 2.7 compatible theme, then it should work right out of the box. However, for older themes, you need to make a few simple modifications to your theme template and stylesheet.

In your template index.php file,

	change:	`class="post" id=... >`
	to:	`id=... >`

Add this to your template styles.css file:

.style { background-color: #FFFF00; }

Now any posts that is checked as “Stick this post to the front page” will be highlighted and moved to the top of the front page.

NOTE: you must be using WordPress 2.7 or newer to have this feature.

Tweaking your Social Bookmarking widgets

Johnny — Wed, 08 Apr 2009 11:35:13 +0000

Are you tired of your social bookmarking widgets looking like this under each of your posts and pages? Notice the line spacing between them.

Well some simple editing of the plugins’ code can make it look like this:

First … we modify the CSS stylesheet for the Sociable plugin. Change the first line in …/wp-content/plugins/sociable/sociable.css

from:	`div.sociable { margin: 16px 0; }`
to:	`div.sociable { margin: 5px 0; }`

Next … we modify the code of the AddThis Social Bookmarking Widget plugin and the ShareThis plugin; changing DIV and P tags to a corresponding SPAN tag.

To make it easier for you here are their respective Unix patch files:
addthis_social_widget.php.patch and sharethis.php.patch.

NOTE: whenever you update these plugins, you must modify the code again (unless the authors alter their code).

Enjoy!

Hello world!

Johnny — Sun, 05 Apr 2009 13:20:18 +0000

Finally … after helping others setup their blogs … I finally decide to make a public one for myself. So here it is.

Note: posts prior to this one were imported from my previous “test” blogs.