My Tapestry

Some users of the plugin “I Like This” asked me how to custom the style. So, here’s a little tutorial to do what they generally want.

First, you have to know that the file used for styling the plugin is /wp-content/plugins/i-like-this/css/i-like-this.css. If you make any modification in this file, be careful about the updates! Don’t do an auto-update via the administration, your file will be erased! Backup this file and upload next updates manually (without replacing it, of course).

Instead, you should keep this file unmodified and add the following properties in the style.css of your template.

How can I increase the font size?

Add the property font-size to the class .iLikeThis

.iLikeThis {
	font-size: 1.5em;
}

You can obviously change the value as you want, 1em is the normal value.

How can I put the counter near the post title?

For this customization, you have to do some modifications in your theme. Go to your theme folder and choose the template you want to customize: index.php, single.php, archive.php or search.php (for more information, see Wordpress Template Hierarchy).

Place this code <?php if(function_exists(getILikeThis)) getILikeThis('get'); ?> right before the post title, like this:

<div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
	<?php if(function_exists(getILikeThis)) getILikeThis('get'); ?>
	<h2 class="post-title"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
	(...)*
</div>

* Here is others lines of code to display your post content, but you don’t need to change them. Note that this example use the original WordPress theme.

You can now make some changes in our CSS file by adding a float property to the class .iLikeThis, this will put it right from the title. I also added a background-color, a padding and some border-radius properties — for rounded corners — but it’s not essential.

.iLikeThis {
	float: right;
	background-color: #ccc;
	padding: 10px;
	border-radius: 5px;
	-khtml-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

If it doesn’t work, the theme Smooth has this style. Try to download it and look at the source code to understand.

How can I change the images?

Simply replace the files in wp-content/plugins/i-like-this/css/. If you choose an image bigger than 16×16px, it will be cropped. I’ll not give an example for that because it’s different for each image.