Customizing WordPress Headers

Word press is simply amazing…I’m constantly amazed by the quality of open source software, but that is another topic for another day

As I was setting up my installation for this blog I wanted to customize the header image and style.  I turns out this tasked proved to be a bit more tricky than I had first imagined.  I spent more time then I care to admit trying to edit the header div and image using the appearance editor tool in the admin area.  What took me so long to figure out was that there are multiple css files and the properties I was trying to change were in a different css file altogether.  Even more tricky was that this file was not available in the appearance editor tool.  I found it  in the  “wp-content/themes/” folder.

Now I know that this may be a no-brainer for some, but for me it was a bit tricky because it was not what I was expecting. Here is a trick I learned that might make this easier in the future to help identify the location of the correct css file. In many modern web-browsers you can right click and choose to inspect the element.  This will give you a run down of all the css properties that are currently being applied to that element along with the name/location of the css file (In Chrome you have to mouse over the file name to get the location).

So, if you want the customize the header for your word-press blog just right click on the header somewhere and select “inspect element”.  From here it is simple to figure out the location of the files with the properties you want changed.  After that use your favorite FTP program to download the file and make the desired changes.

 

Comments are closed.