Guest post by Indrek Saarnak, who’s the author of OnlineBlogger.

Have you wondered how to change the layout of the WordPress plugin Subscribe to Comments subscription manager? There’s no easy solution provided by the author of the plugin, so after looking at its core file I found out it’s actually quite easy by using an extremely simple tweak. With this tutorial I’m going to show you how you can also give it a nice custom design.

What actually is “Subscribe to Comments”?

Subscribe to Comments is a robust plugin that enables commenters to sign up for e-mail notification of subsequent entries. The plugin includes a full-featured subscription manager that your commenters can use to unsubscribe from certain posts, block all notifications, or even change their notification e-mail address! It’s an excellent plugin used by so many people, but it was last updated in Dec 2007 with no easy option for changing its layout. That’s the reason for this simple tutorial.

Just how much can I change it?

By default the subscription manager looks like this:

This is what my subscription manager looks like after a few modifications:

How to achieve this?

First we need to modify the plugin a little bit. Browse to the plugin directory wp-content/plugins/subscribe-to-comments and open the file named subscribe-to-comments.php and scroll down to line 950:

<style media="screen">

@import url( <?php echo get_settings('siteurl'); ?>/wp-admin/wp-admin.css );

</style>

Replace it with the following code:

<link rel="stylesheet" href="<?php echo get_bloginfo('template_url'); ?>/subscription-manager.css" type="text/css" media="screen" />

This little tweak makes it possible to use a custom CSS file. According to this the file would be named subscription-manager.css and it would reside in your active theme directory. Of course you can name it what ever you want. After this it’s just a matter of coding and experimenting different looks.

Customization – how am I supposed to do that?

First you need to know the basics of CSS. If you’re not yet familiar with it maybe this would be the perfect time to get to know it! As they say the best way to learn something is by doing it. Look at different examples and read what every property actually does and what it’s used for. A good place to start is w3schools.com website.

Ok, lets move on. Thankfully the HTML markup is pretty reasonably put together so there aren’t that many blocks of CSS code we need to write. By that I mean every section has the same classes and coding styles.

Here’s an overview of what blocks should be used for the CSS file:

body {}

input {}

input[type=”submit”] {}

h2 {}

h3 {}

a {}

ul, ol {}

fieldset {}

.updated {}

.updated-error {}

So as you can see there’s not much to it.

Give me an example

Below is a sample code from what you can get started on creating your own custom layout.

body {

font: 13px Tahoma;

color: #000000;

margin: 50px;

}

h2, h3 {

font: 1.82em Tahoma;

font-weight: normal;

}

a {

text-decoration: underline;

color: #5c461b;

}

input {

font: 15px Tahoma;

font-weight: bold;

padding: 6px;

border: 1px solid #C0C0C0;

}

fieldset {

padding: 10px;

border: 1px solid #C9C9C9;

background: #F5F5F5;

margin: 0 0 30px 0;

}

Just copy/paste the code inside the subscription-manager.css file and you’ll see the subscription manager starting to look like something – something decent.

If you like what you already have with this example code that’s good. But I encourage you to take it a step further – experiment with the background (give it a nice color or even a background image), change the font, try different colors and border types. If you don’t know how – learn it. Believe me, it’s worth the time!

A template you can use

If you don’t want to mess around with coding you can use a template that I’ve put together for this tutorial. It includes the CSS file with a few images (which should be uploaded to your themes /images folder).

Download