Using CSS to Wrap Text Around Images

  • Posted On: April 18th, 2007
  • Filed Under: Web Design

Last night a friend asked me about floating images in his posts. I gave him a quick answer with the promise of a full followup today.

When you're writing a post you basically have two ways of floating an image. The first is pure HTML and can be done quickly without any advance setup. While it's quick - it's also dirty. Using HTML to float an image can lead to unexpected results in many browsers and, in extreme cases, may cause your theme to fall apart completely when viewed by some visitors.

The alternative to an HTML implementation is CSS. By adding two lines of code to your stylesheet you can setup your theme to display images, inline, in any post easily. I'll cover both methods but I highly recommend using CSS as a first choice.
Read the Rest of this post

Building a Strong Footer for your Theme

  • Posted On: April 9th, 2007
  • Filed Under: Web Design

As part of the theme design series I'll be starting this week I wanted to talk a bit about what we look for when viewing other people's themes. The idea here is that by reflecting on those things that we most often hunt for on other sites we can more easily diagnose what we want to include in our own custom theme.

While your out and browsing around your favorite blogs and websites take a moment to check out the footer on each site. Think about what things that you might expect there and what things you have actively sought out in footers before.

Personally I almost always look to the footer as a go to spot for finding the following:

  1. Contact Information (or a contact page link)
  2. FAQ or Help links
  3. a link to the About page

When you look at a footer what are some of the things you expect to see or hope to see?

In a couple days, when we start work on the group theme we'll return to the things here to start putting together our footer.

Are you Looking for a free Custom Theme?

I've been working with WordPress for a while now. Close to two years if not more.

In that time I've only ever used themes that I myself designed. While I'm no graphical artist, I find that using simple CSS and some creative Photoshop play (I simply couldn't reference GIMP there) has been highly rewarding.

The funny thing about WordPress is that it's actually surprisingly simple to design for. I've not released a full theme yet to the public but it's been something I've had in mind for awhile. So ... I've got a question for anyone interested.

Have you ever wanted to learn theme design for WordPress or are you in the market for a cheap custom theme? I'm thinking about running a series of posts on theme design and I'm just curious who would be interested in it. If you'd be interested in following a project of this nature please let me know. I may take a few extra steps to make it more interesting but I thought I'd just ask up front to guage interest.

Thanks,

-bill

Protecting your AdSense for Search Earnings

Here's a quick tip that doubles as a follow up to my recent post on incorporating AdSense for Search into your WordPress Theme. In case you missed it, Google discourages site owners from using Google AdSense for Search when searching their own pages.

While it's true that you can use the search dialogue that's built into WordPress' administrative interface, sometimes you just want to jump in and get to work. This is where a familiar piece of WordPress code (a bit that I introduced when talking about AdSense and the Postpreview pane) comes in handy.

In that post I went over how to prevent WordPress from displaying AdSense ads whenever you're reading your own site. This cuts down on false impressions and decreases the chances of you wasting any high paying CPM or CPC ads. With a slight tweak to that code you can actually get WordPress to use two search dialogues. One for you and one for your reader.
Read the Rest of this post

The Importance of print.css

Bloggers... I'm begging you... create a print.css file.

Sure, it's important that your site look good on a computer screen but occasionally your visitors may need to print something. If your website doesn't print cleanly on an 8.5"x 11" sheet of paper then you're doing a disservice to your readers. Take a second and look at your site. Select a post and in your browser click File -> Print Preview and see what happens.

You're looking for three things. First, is there anything from your site that is getting cutoff? Second, how long is your sidebar in relation to your post's copy? And finally, are you forcing your users to print a lot of background images?

A Quick Tip for Getting Started

One quick and very dirty way to get your print.css file off the ground is to create a blank css file and cut and paste the entirety of your regular css file into it. From here you can tweak a few settings without giving up the majority of your theme's style and tone. In this post I'll share a few quick tips for tweaking this new css file to make your theme more printer friendly.
Read the Rest of this post