Lots of us like to do some modifications to our WordPress Themes to make it look unique. In reality, modifying a theme’s look is easy and anybody, even without basic knowledge of CSS can do it with some experimenting and through trial and error. The most important thing to remember is to keep the original copy of you theme’s code handy and not delete them once you have uploaded your theme. If the layout turns funny after changing something that you can’t remember, all you have to do is to copy and paste back the whole original CSS file.
I am presuming that you know how to use your FTP client to upload files to your server as you already know how to upload a new Theme. The most popular way to personalise your theme is of course to change the header image to your own unique design and just by changing the header image alone will make you stand out of the crowd.
Changing The Header Image
For noobs like me, who don’t have any prior training in HTML or CSS, changing the header image will be made easier if the theme that you have downloaded have an image as header. Many themes nowadays, don’t have images for headers as they believe it distracts the readers attention from the contents or the Ads. It is a subjective topic so I am not dwelling into it, but if your theme has an existing header image and you want to change it, go to Dashboard - Presentation- Theme Editor - Stylesheet.
Scroll a little way downwards and you will find these codes.
#header{
height:160px;
width:950px;
background: url(images/wall.gif) no-repeat;
color:#ffffff;
}
Take note of the height, width and the name of the title of the image which in this case is, 160 px, 950 px and wall.gif.
Open Photoshop or whatever image editing program you are using and make a new image with exactly the same height and width as the one in your Theme. After completing the design, remember to save it in the same format and same title. The one we are talking about here is a gif file, so save your image as gif. If your original image is a jpg file save it as a jpg file. If you save it in the exact format, then you won’t even have to edit and codes your CSS file.
Now open your FTP client and connect to your server the way you would when you were uploading your theme. Go to the theme that you are using, open the folder, look for the folder named “image” inside and open that folder. Locate the new image that you have created and upload the image. Since it has the same title and in the same format, you will be prompted to overwrite the old file. Do just that and the new image will take over the old one. Open your blog and enjoy your new header. You just changed your header without touching any codes. Next post, let’s change the the background colour or maybe add an image to the background.
Well the code you have given may well work on themes, however it is by no means all of them. Some blogs may code their header image by using the H1 A instead of a simple DIV like what you have mentioned, others might juse use image sources which would be the easiest to modify without any change of code. In my opinion, if you are actually modifying the code, the first and foremost thing is to know your code well. Because there are different ways to get around to displaying what I want, for e.g. I want to change my header image, but put me in a crowd of several other coders and we will have different ways of achieving the same effect.
Darran
Yup, that would be easy if you are well trained and have good knowledge of CSS and codes, but how many of us do? I, for one is one big noob when it comes to this, so if I like a theme that don’t comes with a image as a header,(like this one) I don’t even think of adding a image as a header as I will probably screw up the whole layout. LOL. Read the third paragraph, but thanks for your input anyway.
So then what do we do if there is no header image? Can you explain or do you know of a good link that could help?
BlueWorkhorse
Sure can, I’ll do it in my upcoming post.