How to Change the Style of WordPress Header


There are many different header images available for you to use to change the header image. The header image in the WordPress themes is 192 X 740 pixels. Before you replace the header of any WordPress theme, check the header image and make sure the header image matches that size. If you use a header image that is wider or taller, you may have to modify the CSS elements in the WordPress theme.

You can make your own header image using Photoshop. There are free header images which you can download from the web as well as paid commercial ones. The header graphic art that you use to design your own header image must bear the Creative Commons License that allows public to use. You can change the header image of the default WordPress theme by replacing the header with a new image file. The new header image should be saved in the same file name as the old header image.

Wordpress Modified

The WordPress header can be changed by editing the code in the style.css in the Theme you are using.

In the Classic Theme, the code for the header, the #header is in one selector.

#header {
              background: #90a090;
              border-bottom: double 3px #aba;
              border-left: 1px solid #9a9;
              border-right: 1px solid #565;
              border-top: 1px solid #9a9;
              font: italic normal 230% 'Times New Roman', Times, serif;
              letter-spacing: 0.2em;
           margin: 0;
             padding: 15px 10px 15px 60px;
}

If you are using the Classic Theme and you want to change the header style, you can do so by editing the code above. You can find the above code in the style.css of your Classic Theme.

To change the header style, follow the instructions below.

  • Go to Appearance > Code Editor > Stylesheet (style.css).
  • Press Ctrl + F in your web browser and the search box will appear.
  • Type in #header into the search box in the web browser.
  • If you want to change the background image, replace the code “background: #90a090” with “background-image: URL(your image URL)”.
  • If you want to change the background color, replace the code background: #90a090 with appropriate code. For example, if you want to change the background color to green. Replace the code “background: #90a090” with “background-color: Green.”
  • If you want to change the font, replace the code font: italic normal 230% ‘Times New Roman’, Times, serif; with the appropriate code. For example, if you want to change the header font to Arial. Replace the code “font: italic normal 230% ‘Times New Roman’, Times, serif;” with “font-family: Arial;”
  • If you want to hide a header text but don’t want to remove the code, don’t change anything in the template files. Add display:none to the prefix of the CSS selectors. For example: h1 {display:none; font-size: 230%; color: blue;.
  • Edit the code above until you are satisfied.
  • Click Update File to save changes.
  • Visit your blog to see the changes which you have made.

Alternatively, you can download the style.css in your Theme folder and edit it on a code editor.

Filed Under: Computers & Technology

Tags:

About the Author: Justin Belden is a freelance web & graphic designer with over 15 years' experience. He is also an Avid member of the Design/Development community and a Serial Blogger who loves to help people by sharing interesting and informative tips and trick related to computer and technology.

RSSComments (0)

Trackback URL

Comments are closed.