Graphics are the little touches that make your theme special
Graphics is another place you can really change the look and feel of a blog theme. In case you didn’t know you can replace or tweak those graphics used to trim out a theme. Closely associated with the style.php are the images for the theme. Here to is where you can work some magic to make the theme your own. I often change the images associated with things like buttons, blockquotes, RSS, Dividers, (sidebars, body, header, footer, etc.). The images are stored in a directory inside the theme folder; usually img or images.
This is probably the first real directory I open once I download and unzip a theme. I can learn a lot about a blog by looking at the image folder contents.
I will often make a screen shot of this folder opened so I can see the images and their file names. This does two things for me:
- When I’m reading through the CSS Stylesheet I can see what images are being used where which helps me get a better mental image of what is going on in the theme.
- I make a list of the ones I want to keep, the ones I want to delete and create my own, the ones I want to modify just a bit.
Then while going through the style.php learning the layout in CSS I make note of those image files and where they are called in the formatting of the blog. You can make some small changes and additions to these graphic files creating some dramatic changes in the look of your blog. It is a quick and fairly easy way to customize the theme to your personal taste.
Adding a Header Image
If I’m going to be adding a header image to the theme and one doesn’t exist I’ll put it here or install the rotating image header plugin.
If you are adding a header image to a theme that has one, it is pretty easy to replace if you keep the same dimensions as the one originally with the theme.
As you get more comfortable with CSS Style sheets you will find it easy to add a header image to any theme and even change the size of the theme width to accomodate your image.
Here there is a fine line to be walked. I’ll cover Header Images in a separate post.
Where the Magic Happens
Learning how to work with CSS (Cascading Style Sheets) is like learning to drive a stick shift. If you can edit and modify CSS style sheets you can drive anything. If I find a theme that has “good bones” I can usually modify it to appear in the browser the way I want it to.
- No header image, I can do that
- Header size change, I can do that
- One sidebar instead of two
- Right sidebar instead of left
- You name it.
This is where the magic happens in theme design. If you don’t know anything about CSS you will be destined to point and shoot themes.
I’ve never had a computer class. I’ve learned by looking at code and reading books. I can tell CSS style.php files that are well laid out and the ones that aren’t. No matter how much I like a theme, if the CSS file is a mess to interpret, I move on. Recently, I did just that, I tweaked for two days, learned a few things, and in the end moved on.
It is in analyzing the CSS you learn about how the Theme handles everything. The browser’s “View Source” (IE) or “View Page Source” (FF) is the Rosetta Stone to the CSS. Study this on one tab with the CSS open on another and you will break the code. Write down the class divs and what the container structure hierarchy looks like.
Most CSS style.php files are broken down into the basic elements for the theme.
- General Formating of Tags
- Code to handle Images (this is often left out)
- Styling of the various parts of the blog (Header, Footer, Containers, Content, comments, sidebars, etc.)
Here is where the fun begins and a little frustration as well. I’ll tell you right up front I’m not a CSS guru by any step of the imagination. Much of what I do is:
- try it,
- save it,
- switch tabs,
- F5,
- switch tabs,
- undo it.
- try something else.
To keep it simple I only work on one part at a time. I’ll make changes to the fonts. Then move on to the Header. Once it looks good I back up the file. Now changes and additions to the Footer, etc. Using this simple procedure and the try it, save it, list above I can move through the process of modifying the CSS to make the blog look the way I want.
I’ve suggested before but will say it again here, when you get a change you really like, back up the style.php and FTP that copy down to your computer. It will save you a lot of frustration if later on you make changes to the CSS that corrupt this file. If you do, you have a backup ready.
All along the way, I back up this file to my computer. I might make as many as 10 backups as I proceed using the method described.
Tags in CSS
I’ve debated about including this here since it is handled in the CSS, but it is important and can greatly help or hinder your blog or web site in the search engines. This is another one of those things where viewing the source in the browers is very important. Note how H1, H2, H3, etc tags are handled. More on this in a separate post to follow.
Learning CSS is Worth the Effort
CSS is one of the most fun and most frustrating parts of theme modification. Pick up a good book or hit some basic websites for an introduction to CSS. It might seem daunting at first, the same way driving a stick shift takes time and a few jerky starts. When it clicks, it clicks and you won’t look back. Great blogs and websites are built with CSS. You don’t just want it to look good in the browser you want it to look good to the search engine bots.
Well structured CSS will be an express lane for search engines. Poorly coded sites using tables or poorly structured CSS is like creating Construction Zones with detours for detours.
Header Branding
I know some people are really into “Branding” and it is all the rage these past few years. When I first heard the term living in Tucson I thought they were talking about cows and roundups. I think it was 5 years ago when “branding” became a buzz word, much like “Green” is now. The header is the perfect and most desirable place on your blog to show your brand.
On my blogs I have chosen to make the subject of the blog the brand. The Oro Valley Real Estate Blog has a header image of Oro Valley. The same is true of the Tucson AZ Real Estate Blog it has an image of Tucson.
Yes, I know I should put links to those blogs with the anchor text, but I keep saying “It isn’t all about SEO”.
The Tucson Real Estate News blog is the one with the rotating header and it displays images in and around Tucson; at the moment it is wildflowers and sunsets. But this could change, and I’ve already cycled some images out of the rotation and added a couple of new ones.
It is up to you what you want to display in your header file, maybe you don’t want an image in there at all. Maybe you want a color background and just text to keep the header to a minimum and give you more room for posts. It is up to you.
However, please don’t reject a possible theme because it doesn’t have an image when you want one or it does and you don’t want one. It is not that hard to modify the CSS to add or subtract an image in the header.
The theme I just modified had no header image, but I knew I could add one. (the same is true of sidebars, it is easy to take one away, not as easy to add one and it all depends on the code and CSS styles as to how easy or hard it is to modify).
Inside the Header
One of the files that almost always needs a little adjusting is the Header file. You will see it in the list to the Right when in the theme editor.
The code of the title of your blog is one of the most important pieces of code. Many bloggers change themes and never notice the code for displaying the title of the blog on the browser isn’t displayed the way it was before.
If you have ever done a google search (yes, I’m saying that tongue in cheek) you will notice the title of the page/post is indexed and plays a part in the search engines. If you want to expand the influence of your pages and post and cast a wider net you won’t have all your title tags appear the same.
When doing site searches I find so many sites that have exactly the same title for every single page “Bust Town Real Estate” nothing varies. Do they place well for “Bust Town Real Estate”? most of the time they don’t.
I want the title to be structures with the Title of the Blog Post followed by a dash space dash and the title of the blog. Since I put keywords in the title they are translated to the front of the Title and the name of the blog follows.
Here is a good title structure.
<title>
<?php wp_title(“”); ?>
<?php if(wp_title(” “, false)) { echo ” – “; } ?>
Your Blog Name Here
</title>
Again, I know there is a way to code it so the blog title is displayed without typing it in. But I don’t do much with php and we try and provide solutions anybody can do simply. That said, if someone has the code for doing this I’ll be glad to have it for future theme changes.
This is not the title of the blog displayed in the header it is the title displayed at the top of the browser, just in case there is any confusion about what title we are talking about.
Some will display the blog description from the setup options page in the header along with the blog title and URL.
Site Search Box in Header
One thing I see more and more of and I like is the search box in the header. If a search engine brings me to the home page there is a good chance the person doing the search will bounce right off your site and back to the search results. However, more people are becoming savvy in their search routines and if there is a search box place where it is easily spotted they will repeat the search phrase in the search box and find what they are looking for in the first place. I think a site search box in the header could reduce your bounce rate.
I rely on the All-In-One-SEO plug-in to provide the meta tag structure for the header file tags.
- I check the header.php to see how it is structured.
- A check of the CSS to see how the Header file is styled and if I want to make any changes to the header size, meaning width and height. I often will do this and add an image to the header.
- I check to see if how the h1 h2 and h3 tags are associated with the header and blog title. This is found in the CSS style sheet and not usually in the header.php itself, but it can be in there. There should only be 1 h1 tag and only 1 h2 tag to a page. Some theme authors experiment with these tags and forget to set them to a “production” value. I’ve found a couple of themes with 2 h1 tags in the header or multiple h2 tags there and in the post titles. You don’t want a new theme to change those header tags for all your content to something that isn’t considered a standard.
Header Size
I want it visually attractive to the eye, but I don’t want it taking up too much of the prime real estate in the browser. Currently I’m leaning toward 1000 for a width and somewhere between 200 and 250 for height.
Keeping The Header Visually Interesting
I’ve recently modified a blog theme which lead to this series of posts. One of the things I did was add the Rotating Header Image Plug-in. I have a directory of images which are sized to the header space provided and the plug-in allows you to set how often it will rotate the images. I like it to change often so I have it set to 1 minute. It doesn’t change till a page is refreshed, the readers aren’t interrupted by an image change while they are reading, just when they click to the next post or page.
You get to decide what your header will contain and what it will look like.
- Eye Candy for the reader
- Brand Identification
- Text only
- quick navigation
Prominent Links in the Header
I’ll leave you with one more idea for the header. On the Oro Valley blog I have several search pages which make it quick and easy to search for home by subdivisions and by price. I placed direct links to those pages/posts in the header. They are displayed right under the blog title. When you first open the blog these links are easy to spot, even if you were looking for something else that brought you to the blog, those search links are right there on top.
There are other page links in the top nav which is a part of the header, this is common on many blogs these days, but putting links directly in the header is something you do by pasting the link and anchor text directly into the header file itself.
The Header of a blog is usually easy to modify and customize making it unique. It is personally challenging to me to customize it to the point even the theme author wouldn’t recognize it if they saw it. Remember we are doing all of this in our workshop. We are backing up files as we make changes we like and we are having fun customizing our new theme.
The best way to become comfortable with modifying and navigating around header code, or any theme code for that matter, is to download themes you find interesting and start looking at the code in the various files. Find a Site search in a header, copy that code snippet, find meta tag code you want copy it. Take these snippets and add them to your customization routine. Save them for future changes and new theme modifications. I’ve been using Google Notebook to keep my code snippets.
Enjoy the Journey learn a lot and at the end of the process you can take pride in creating your own customized look for your blog.
The place to start when picking a new theme is at the bottom. One of the most overlooked elements of a theme is the footer. The footer is one of the first files I check when selecting a theme. It is a common practice for the footer to be the location for Copyright, the theme’s name and a link to the creator of the theme. The WP version is often included in the text.
One thing I’ve learned over the years it is get the proper tools to do the job right. Setting up a good workshop for Tweaking Themes is a great idea and worth the investment in time to setup. If your blog is a business blog you especially want to take this step to assure you aren’t in danger flowing away your blog while making changes to it. The workshop is safe. You can make changes, corrections, additions and if you accidentally blow up the blog all you have to do is clear a little smoke and start over.
There are any number of reasons you want or need a new theme for your blog. Some themes limit functionality and some are not easy to upgrade or customize. The reason for change isn’t as important as the process you go through to successfully change the theme of your blog.
ReBlogWorld 2010
My Hosting Choice:
Custom WP Site Design
Follow On Twitter
Recent News
-
Featured News
-
Email & RSS Feed
Copyright
This work is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 United States License.Yeah Right !
