Custom Header & Background For Your Site

By Gretchen A Green

WordPress Customized


Personalize your WordPress install with a custom header and custom background in just a few easy clicks! No longer do you have to use the default theme and have your blog look like every other WordPress site. Follow these easy steps to customize your WordPress installation.

The new WordPress theme Twenty Ten is installed with all copies of WordPress 3.0, the newest version of the very popular blogging and website software. Twenty Ten features easy to use dropdown menus and some other features new to WordPress 3 which make it easy to customize the appearance, to make your site, truly your own.

Two of these new features make it easy to change the header image and the background color of your site. These two changes will help set your website apart from the thousands of other websites that use Twenty Ten.

Changing the header image involves finding a suitable image and uploading it with the WordPress editor. Changing the body background color involves using the Background Editor in the Appearance section to select and save a new background color.

The first thing to do when changing the header image is to find your choice of image. You can use your own digital photos from your camera, scan your photos or search for free images from stock photography websites.

The images need to be at least 940 pixels wide and 198 pixels high, because if they are smaller than that, the image will be stretched out of proportion to fill the header space. It works best to use images that are either that width or bit wider and taller.

If you have an image editor, you can make header image the correct size without using the WordPress built-in image cropper. But if you need it, WordPress makes it easy to resize images with the built-in image cropper.

Once you have your new background image, go to the WordPress Dashboard, and then to “Appearance,” and then to “Header.” This is the “Custom Header” page. Your current header image is displayed. Below the current image is the area where you can upload your new custom image. Choose your new header image by clicking “Choose File.”

You will then see a dialog box that will let you select an image from your computer. After selecting your image click “Upload” to import your image into WordPress.

In the next window, you can drag the cropping frame around your photo if it is wider than 940 pixels. (If it is smaller, remember that you will get some distortion in the image.) Once you have cropped the image, click “Crop and Publish.” You will return to the previous page and see a preview of your new header image.

Now, click the “Visit your site” link at the top to see the new header on your live site. (If you still see the old header, reload the page in your browser.)

You can repeat the process if you don’t like the look of your new custom header image.

The other way to set your WordPress website apart from many others is to change the body background color. That is the area outside of the header area and content box. In the same Dashboard Appearance menu, go to “Background.”

Although the top box on the page says “Background Image,” we will be changing the background color in this example. You will get a preview of the color in that box. Below the “Background Image” box t is “Display Options” and a color picker. That is where you select your new background color. Click on “Select a Color” and you will see a color picker.

Click on the approximate color you want in the outer color ring, and then fine tune it by moving the pointer around within the inner circle. You will then see the color change in the Preview box above.

You will also see the CSS color code change in the box right above the color picker. This is the style sheet code that determines the color. If you are familiar with the color code of your preferred color, you can enter the code directly. After pressing your enter key the color will appear in the preview window.

When you have a color you like, click “Save Changes” and your color selection will be saved. Then click the “Preview Changes” link at the top of the page to see the new background color. (If you still see the old color, reload the page in your browser.)

If you don’t like the color or want to adjust it, work with the color picker again, save your changes and then reload your site again.

The header images you uploaded are stored in the standard WordPress Uploads folder, and the background color you picked is stored in the database. If you upgrade the Twenty Ten theme in the future, you won’t lose your customization.


Leave a Reply

Your email address will not be published. Required fields are marked *