Since I’ve had a few clients that have been using the Thesis theme, I’ve learned a thing or two about it, and have written a couple posts in the past. On one of those posts I received a question about changing the color of the comment box in Thesis and thought I would respond with a screencast. You’ll find the code snippets mentioned in the video,at the bottom of the post.

/* This changes the background color of the comments box */

.custom #comment_list {
background-color: #ccc;
}

/* This changes the text of the comments themselves */

.custom #comment_list .format_text p {
color: red;
}

I used “red” as a shorthand here just for ease and simplicity. But you can use one of many websites to find the exact color and hex code you need.

Do you have any other customization questions regarding Thesis or other WordPress themes? Post them in the comments!

But once in a while, I need to sort of cheat and pull off some design-y type things and I have found several online tools that help me do this in a competent way. Plus, most of these tools are just super-fun to play with!

Web-based Color Palette Tools

Need to pick a font color for a website that will match the overall look and feel? Or maybe you need to introduce an additional color that will match. These handy tools will let you upload a logo or any image and generate a color palette of complementary colors.
Color Palette Generator
This is very simple to use – just paste in the url of a logo or image and it will generate some colors.
Adobe’s “Kuler”
tool does a few more things. It has some preset color schemes which can be useful if you’re starting from scratch, or you can create your own based on a color you select, or an image. It also presents versions of the color schemes based on mood or other criteria.

Browser Add-Ons for Color Palettes

The Firefox add on Rainbow Colors lets you analyze a website and extract a color palette right from your browser, from any website. It’s slightly buggy to use, but overall does a nice job.

For Chrome you have a couple of good options.

The Palette for Chrome extension creates a color palette based on an image on a website. As you’re browsing, you just right-click (CTRL+Click on a Mac) an image and select Palette For Chrome, and it will whip up a color palette in seconds.

The Colorzilla extension (by the makers of the useful CSS Gradient Generator ) does a few different things, but the feature I like the most is the ability, much like Rainbow Colors, to generate the color palette from any website you are browsing, without having to identify a specific image.

Fonts and Typography

In addition to being creatively impaired, I’m also a bit of a design snob. This is a really unfortunate combination! I want to come up with really elegant and cool font combinations (because of course I look down upon poor typography as if I were a pro) but it’s really hard for me to do that when left to my own devices. But once again, there are some really nice tools available that can help the common-a-garden snob such as myself.

Ever see a nice font and want to know what it is? What The Font lets you identify a font based on an image that you upload. Or if you see it on a website, you can just paste in the exact url for the image.

My personal holy grail and what lead to this list of resources was a search for a free online tool into which you could select a font and it would suggest complementary fonts that would look good with it. I was not able to find exactly this, so if someone out there knows of its existence, please leave a comment!

All the tools I’ve listed in this post are free, but if you are really into fonts, you should look into Type DNA which is a paid application.It not only helps manage the fonts on your computer but will actually help you choose fonts and find complementary fonts.

In my hunting I did find several articles showcasing various examples of font combinations that work really well. So you can use these as inspiration and examples:

40 Best Typeface Combinations in Web Design

10 Great Google Font Combinations You Can Copy

Top 19 Font Combinations

40 Font Pairings

25 Examples of Beautiful Typeface Combinations

Font Combinator is a really cool way to test out how different fonts from the Google Fonts directory will look together.

TypeTester.org – this is similar to Font Combinator, although it gives you 3 columns of text side by side to play with. Type Tester has a broader range of fonts than Font Combinator and you can also play with things like word spacing, alignment, and both font and background color.

Esperfonto is the closest I could find to the holy grail I was looking for – a tool that would suggest font pairings. It works pretty well but seemed a tad limited. It’s connected with the MyFonts.com directory of fonts, but when I tried typing in something like Museo, which you can find on MyFonts, Esperfonto couldn’t find it. But it will let you specify certain characteristics you are looking for (e.g. Modern, Traditional, Cool etc) and then make suggestions based on that.

How To Make a Landing Page

Ever need to put together a one-pager for a specific product or project? It always seems like it should be simple, but there’s an art to creating a good landing page. Let these smart people guide you:

Formstack’s ‘Anatomy of a Perfect Landing Page’

50 Effective Landing Page Templates

Examples of Effective Landing Pages

Call To Action Graphics

Another apparently simple task which is tricky to do well for the non-designer, is making buttons or graphics for things like “calls to action” – you know the kind – Click Here, Download This, Subscribe Now etc.

Hongkiat.com has a really great resource that includes many free  PSD templates that you can easily customize to make your own buttons.

In WordPress, there is a really handy button maker plugin called: Max Buttons which generates pure CSS buttons for your site.

You can also create CSS buttons using this awesome tool from CSS-Tricks.com

And for a general resource for all things free and design-related, keep your eye on this freebies page from SmashingMagazine – they offer all kinds of free resources for icons, fonts, images, etc.

What resources have you found that should be on this list? Or what are you currently looking for that should be included here?

header image courtesy: http://www.flickr.com/photos/songallery/4592139716/

The other day a friend asked me about styling the various parts of the Thesis comments display and when trusty Google didn’t come up with a fast answer, I was forced to delve into some CSS with the aid of Firebug to determine the solution.

If you use the Thesis theme, on your homepage you may display the number of comments for a post, like so:

So the question is, how to change the colors of each of those elements – the word ‘comments’, the curly brackets and the number of comments. You can simply copy/paste the relevant code snippet from below into your custom css file to achieve the desired result. I’m using the color #000000 in the code samples, but you can pick out your own colors here.

Change bracket and comment number color:

.custom .format_text .to_comments span {
color: #000000;
}

Change just the word ‘comments’:

.custom .format_text .to_comments a {
color: #000000;
}

Change just the color of the brackets:

.custom .format_text .to_comments span.bracket {
color: #000000;
}

Change only the color of the number of comments:

.custom .format_text .to_comments a span {
color: #000000;
}

As an extra bonus, here’s how you can change the background color of your own comment box, so that your responses as the author stand out from others:

/* this controls the background that holds your name and the date of the comment*/
.custom div#comments dt.bypostauthor, #comments dt.bypostauthor div.format_text{
background:#FFFFCC;
}

/* this controls the background that holds your comment text*/
.custom div#comments dd.bypostauthor, #comments dd.bypostauthor div.format_text {
background:#FFFFCC;
}

/* this controls the color of your comment text*/
.custom div#comments dd.bypostauthor, #comments dd.bypostauthor format_text {
color:#000000;
}

So there you go, now you can get fancy with it….

When choosing a theme you must consider design, layout and functionality.
When considering these, keep in mind the general type of theme you are looking for (see previous post). If you are looking for a free theme,  you need to find something as close to what you want as possible (or be savvy enough to tweak it yourself). If you are looking at Premium themes,  you may have some flexibility on colors and admin options. The closer your theme is to what you want to begin with, the less tinkering you will have to do. Determining what options the theme gives you will be important.

Remember as you are looking at themes that colors and fonts are easier to change (with a little CSS) than things like sidebar placement, and changing the layout/ structure, unless you’re comfortable with PHP.

BEFORE looking for a theme:
1) Look at other sites you like/dislike and try and identify those characteristics that turn you off or on.

2) Think about what you want your site to do and look like first. Sketch out a rough diagram of how you want it laid out – where’s the navigation? Where’s the sidebar (left or right)? Do you want a prominent footer (for archive and category links for example)? Think about which of these factors are important, if any and make sure to identify those in any theme you are considering.

3) For each section you outline on your site, figure out whether it will be static/evergreen content (a page) or updated, timely content (a blog post) – this will help you figure out how to create your site and also pick a theme that displays content the way you want.

4) What do you want your homepage to look like? If your site is a straight up blog this might be easier to determine. But if you are using Wordpress for a magazine, portfolio or business site, you might have specific content you need featured on the homepage.

5) Know which things you’re willing to compromise on, and which are crucial. For example, you may know you want a sidebar on the right, not the left, but you don’t really care about the footer.
The clearer your vision (or the more flexible you are) the more likely you are to find something you are happy with.

Some Design Considerations:

1) Do you like the color scheme?
2) Is there an obvious place for a logo image to go? Replacing a default image that the theme provides is easier than having to create your own place for it.
3) Do you want to put a customized banner-style header on your site? Look for a theme that already has that – you can just swap out the image.
4) Do you like the details, such as the color of links or the way images are displayed?
5) Does the them enhance your particular type of content? E.g for text-oriented sites such as  blog, does the them present the text in a clean, easy-to-read manner?
6) Does the overall look appeal to your target audience?
7) If you plan on having pages with sub-pages, how does the theme’s navigation handle that?
8) Is the theme designed with SEO in mind with good use of Heading tags? Ideally H1 tags should be used for the title of your blog post, not the title of your blog.
Generic links like categories, comments, tags etc should be h3 or less – this will leave h2 tags for you to use as subheaders in your blog.

Layout Considerations:
1) How many columns do you want?
2) Do you need built-in advertising banner spots? Or pre-loaded spaces for Adsense?
3) Do you want images with each post that are displayed on the homepage and in posts in a particular way?
4) Is the sidebar where you want it?
5) Does the layout suit the type of content you have e.g. does it showcase videos well, if that’s a focus for you?
6) Does it have the kind of footer you want?
7) Is the layout for a single post page different or the same as the homepage or the archive pages? Some themes hide the sidebar on single post pages for example. Make sure to check such details.
8) Is the navigation bar where you want it?

Functionality Considerations:
1) Does the theme have the types of features you’ll need for your specific content – eg. multimedia features if you are showcasing video or images? Or good social media integration if that’s important to you. Some theme come pre-built to display your latest tweets for example.
2) The homepage can be a source of frustration, especially if you don’t want your site to look ‘bloggy.’ Does the theme allow you to display your content the way you want to? If you need to showcase a video on the front page – choose a theme that has that feature so you don’t need to create it yourself. Does it feature posts from specific categories, for example, which would give you additional ways to highlight content,  or is it just chronologically arranged?
3) What admin options does the theme provide? How easy will it be for you to change things and how much flexibility does the theme give you out-of-the-box?
Does the theme provide ‘widgetized’ areas which easily allow you to change what content is displayed where on the page?

Once you’ve installed a theme, make sure to try it out with a few test posts, comments and images, to see how it all works and if there are details you may have missed, before making a final descision on whether you like it or not. It’s really difficult to get a good feel for how a theme will work for you if you have no content for it to display.

What other features or considerations should be included in these lists that you look for in a theme? Leave a comment!

Selecting a theme is about more than the way it looks. Functionality and the ability to control options from your WordPress dashboard can be just as important. Many people choose a theme on looks alone and then become frustrated because it doesn’t work the way they want it to.

Generally speaking, there’s 3 types of themes available – free, premium and custom-built. To help decide which category you might be in note down your answers to the following questions:

Which best describes your budget?
a. Non-existent, I want to do everything as cheaply as possible
b. Limited – $50 – $150 approx
c. I am willing to spend at least a few hundred dollars  to get what I want.

Do you have a clear visual brand identity including a logo and color scheme?
a. Nope.
b. I have a logo but that’s about it. I just want a nice-looking site.
c. I have a logo and full visual identity that I want my WordPress site to match

How important is uniqueness?
a. Not very. It won’t hurt my site if others use the same theme
b. I don’t mind paying a little to look different but it’s not mission-critical
c. It’s important that my site looks unique.

What is your level of technical savvy, especially regarding design, CSS & PHP?
a. I’m pretty savvy and/or willing to learn & experiment
b. I get how WordPress generally works but am not too familiar with code.
c. I’m not savvy at all and/or would like to be as hands-off as possible

Very generally speaking, if you know some CSS, you can easily change things like fonts and colors and other cosmetic features. If you know PHP you’ll be able to adapt layout & functionality easier.

Which is more important to you in this process– time or money?
a. Money – I have limited resources and would rather expend my own time and energy
b. Hard to say – I have some resources and would be willing to pay in order to make things easier.
c. Time -  I have a budget and no inclination to get my hands dirty with code. I’d rather someone else handle all that stuff and hand me the finished product.

If you answered mostly A’s you will probably want a free theme that either provides some admin options, or that you can tweak a little. If you’re willing to get your hands a little dirty with code, you can probably get it to do what you want, but if not you’ll have to take the theme pretty much as it comes. Some free themes are better-supported than others, so keep that in mind when selecting.

If you answered mostly B’s you will probably want to look at Premium themes that have a lot of dashboard admin options to make customizations easy. Premium themes usually cost around $30 – $90 and are typically well-coded with support of some kind so you can ask questions if you get stuck.

If you answered mostly C’s you may want a custom designed theme which will guarantee a unique theme that does exactly what you want, with minimal effort on your part. This could cost anywhere from a few hundred, to a few thousand dollars depending on the complexity of what you need.

A 4th option is what I call a ‘blank canvas’ theme such as Thesis or Headway which provide the core functions but little design.  They allow you to lay your design on top of their canvas without coding, using a visual interface and/or dashboard admin options to get the look you want. Only buy such a theme if you know how you want your site to look, or have a design to work from,  otherwise you’ll end up with a theme that blends in with everyone else’s. Poorly designed Thesis themes can be spotted a mile away. If you’re pretty savvy and know what you want your site to look like you could also try a free framework theme like Thematic or Hybrid. These are probably not recommended for absolute beginners as the sheer number of options might become overwhelming.

I realize my outline is quite a generalized way of breaking things down – there could be lots of combination of factors. But no matter what your circumstance, keep in mind that there are often trade-offs based on time, money and savvy. If money is no object, or if you are pretty savvy and can put time into working on your theme– you can usually get what you want, one way or another. However if you are restricted by money, and/or time you may have to make a couple of compromises in the way things look or work.

So now you know roughly what type of theme you’re looking for, what are some of the specifics you should look for in your theme? Read: How To Choose A WordPress Theme – Design & Functionality Considerations

What other considerations go into your decisions to choose a theme? I realize my list is not exhaustive, so let me know your experiences.