Issue 4 will be out some time in the future. WP Mag is on holiday while its writer is busy after moving house!
Home » Issue 2

Featured theme: Water

29 October 2008 1,411 views 7 Comments
Featured theme: Water

The Water theme is available from the WordPress Theme Directory.  You can customise it without knowing any CSS, because it has a lot of settings.

 

1. Change the theme’s settings

After activating the theme, go to Design > Water’s Settings.  Here’s how I decided to change it to make it match Deep Red Carnation from Flickr.

  • I changed the font to Georgia
  • I find wide coloumns of text difficult to read, so I reduced the “Blog’s Width” and “Content (Post) Width”
  • I changed the text and background colours
  • I cropped the image for the header, resized it to the same as the “Blog’s Width”, uploaded it to wp-content/themes/water/images and entered the details into the “Header” page of the theme’s settings
  • I removed some things from the sidebar, on the “Sidebar” page of the theme’s settings

2. Add some custom CSS

Finally, I decided to take advantage of the “Custom CSS” page of the theme’s settings.  This allows you to easily add a few lines of your own styles, if you want to tweak anything.

I wanted to increase the space above and below the content of each post.  I viewed my site in my browser, right-clicked the page and chose “View Page Source” (your browser might use slightly different words for this).


<div class="the_content">
    <p>I&#8217;m writing some articles for <a title="The WordPress Magazine" href="http://www.thewpmag.com">The WordPress Magazine</a>.</p>
</div>

I could see that the content was inside a <div> with a class of “the_content”.  To target a class in CSS you begin with a dot, so you can add top and bottom padding to it like this:


.the_content {
    padding-top: 1em;
    padding-bottom: 1em;
}

1em is always the height of one line of text, so by adding 1em padding above and below the content, it effectively leaves a blank line at the top and at the bottom.

3. Water theme, red carnation version

Here’s my finished version of the Water theme!

Top image copyright Shinsou.
Email this article
1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5 out of 5)
Loading ... Loading ...

7 Comments »

  • AlohaArleen said:

    Aloha!

    I’ve been going blind looking at different templates for the last few days. Now you SHOW me how completely custom this one can be. And even better - a NON-programmer like me can figure it out!

    It’s almost midnight… and my eyes are crossed - but I’ll be back tomorrow to download and copy all your notes and “how to’s” - Thank you!

    Mahalo,
    Arleen Anderson

    2 November 2008 at 9:46 am
  • Steve Smith (author) said:

    Fantastic, let me know how you get on with it!

    Steve

    2 November 2008 at 11:22 am
  • Arleen Anderson said:

    Steve,

    New to adjusting WP themes. Need basics ready for tomorrow. (”alomost live” podcasting from local Starbucks)Can’t figure out how to:
    1) take out Blog Roll
    2) edit Meta tags (afraid to loose Admin access)
    3) add blatent RSS button to top
    4) add fill in form for folks
    5) how do I know my askimet is active? shows no stats
    6) can’t get font size of text to change (needs to be a point bigger)
    7) MOST IMPRTANT - need to activate and insert the Blubrry Podcasting plug in for tomorrow! Ideally want a button/bar at top of post for folks to listen and/or download the podcast. With posting room below for an outline of the podcast.
    8) Want to insert a video box in the sidebar to put in some clips.
    9) Love to put in a twitter tool to show my tweets and maybe some keywords?

    Okay - I really need 7), 1), 2), & 3) for tomorrow.
    All help appreciated - REACH ME on Twitter!
    http://www.twitter.com/AlohaArleen

    Thanks so much - you’ve got a great template - just that my programmer is swamped with our project deadlines. (and I’m totally blonde at this stuff)

    Warmly,
    Arleen Anderson
    Kaneohe, Hawaii

    3 November 2008 at 9:23 pm
  • Steve Smith (author) said:

    1 and 2. The easiest way to remove things from the sidebar is to go to Design > Widgets. As soon as you add one widget, it’ll replace everything in the default sidebar. Remove all the meta section, it’s fine, to log into admin then just go to yoursite.com/wp-admin.

    3. You can add an RSS button using a text widget at the top of the sidebar. Get a nice big icon from Feed Icons and upload it to wp-content/themes/water/images/. Then in the text widget do something like <a href="http://www.yoursite.com/feed" rel="nofollow"><img src="/wp-content/themes/water/images/rss.png" alt="Subscribe by RSS" width="28" height="28" /></a>.

    4. The FormBuilder plugin is great for making forms.

    5. Go to Comments > Akismet Spam. If there’s nothing there saying Akismet is not working then I think it means it’s working.

    6. When you tried to change the font size in “Water’s Settings” did you put a unit after the number, e.g. em or px?

    7. To add something to the top of each post, put it in single.php under the while (has_posts()) line (the start of The Loop). If you want it to only show on posts in one category you can use if (in_category()) - see Conditional Tags on the Codex for more information. Look in the documentation that came with the plugin for what you need to add.

    8. The Video Widget plugin looks good, but I haven’t tried it myself.

    9. I use Twitter Widget Pro on this site. I’m not sure about listing keywords with Twitter, I’ve not seen that done.

    3 November 2008 at 11:41 pm
  • Nec said:

    Nice theme! Thanks!

    2 February 2009 at 5:43 pm
  • reklam ankara said:

    Nice theme! Thanks!

    3 June 2009 at 1:19 pm
  • Antalya Nakliyat said:

    Nice theme! Thanks!!!

    31 July 2009 at 4:21 pm

Leave your response!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

You can get your own avatar which will appear here and on other Gravater-enabled sites.