Saturday, May 13th, 2006...1:42 pm
Modifying Header Images
If you’re anything like me, one of the first things you’ll want to do after loading up your new theme is to personalize the different header images across your site. Fortunately, this is an extremely easy task thanks to the pragmatic way that CSS and XHTML interaction have been constructed.
There are four main header images pre-packaged with PressRow, and they apply to the following pages:
- Your main blog page: viewable on this very page, just scroll up!
- The archives page (or any page created with the “Archives” template): view here
- The “about” page (or any other page created with the default template): view here
- 404 error pages: view here
All of the header images have the same width and height specifications, as they are each 770px wide by 200px tall. Find some pictures that you like; use your favorite photo editing software to crop them into these dimensions; and then upload them to the “images” folder that lies within the “PressRow” theme folder. In case you’re not familiar with the process, you’ll need an FTP client to access these directories.
Once you’ve uploaded your pictures, you’ll need to modify a few lines of code in the PressRow stylesheet. To begin, log in to the WordPress administration panel and click on the “Presentation” link. Next, click on “Theme Editor” in the sub-navigation menu. Once you’ve done that, a list of your theme files will appear on the right side of the page. The very first link in this list should read “Stylesheet,” and you’ll want to click on that. This action will load up the stylesheet in the editing box, and your screen should now look something like this:
Scroll down through the style.css file until you see a line of code that looks like this:
/*---:[ header styles ]:---*/
Underneath that header, you’ll want to change the lines of code indicated below:
.blog #pic { background: url('images/churchill.jpg') no-repeat; }
.archive #pic { background: url('images/books.jpg') no-repeat; }
.about #pic { background: url('images/deuce_stream.jpg') no-repeat; }
To make the appropriate changes, simply edit the .jpg files in the image references in those lines of code. To illustrate, if you wanted to change your main blog image to the file “my_cool_pic.jpg,” then your new line of code would look like this:
.blog #pic { background: url('images/my_cool_pic.jpg') no-repeat; }
Easy as pie!
The Keen Observers Among You…
may have noticed that I did not include any reference to the 404 page header image in the above code. This is because that image must be handled differently, due to what I believe is an absolute file path issue with the way that the server “serves” 404 pages.
At any rate, if you would like to modify the header image on your 404 pages, all you have to do is edit the header_404.php file within the Theme Editor. Simply upload your new image following the instructions in the first part of this post, and then change the “oops.jpg” file reference by adding the name of your new image. Cool?
26 Comments
May 17th, 2006 at 12:55 pm
Doesn’t look too cool under IE7 - very nice in Firefox, though, thanks!
May 17th, 2006 at 1:42 pm
Matthias, what seems to be the problem in IE 7? Everything in IE 6 looks great on my end, so if you could provide me with some screen shots or a better description of whatever is not “too cool,” that would be awesome!
The purpose of this test installation is primarily to support the use and growth of the PressRow theme, and helpful suggestions from users are the most valuable piece of this puzzle.
Thanks!
May 23rd, 2006 at 1:38 pm
[…] Modifying header images […]
May 23rd, 2006 at 1:42 pm
The IE 7 display problem has been fixed in the newest update, version 0.11!
IE 7 doesn’t obey the old IE 6 hacks, and that’s why there was a problem. On that note, in most cases, “hacks” are unnecessary anyway. Generally speaking, better code eliminates the need for just about all IE hacks in CSS stylesheets.
June 9th, 2006 at 6:18 pm
Excellent theme. I really like it.
Now the question. How can I customize header images for each category (or even each blog post)?
Thanks much!
Greg
July 3rd, 2006 at 1:09 pm
I can’t seem to fix my header images. I did just what you said and posted it to the images part.
What’s the deal? help!
Lawton
July 3rd, 2006 at 6:29 pm
Greg,
You could institute a PHP randomization structure that pulls images from a pre-defined folder at random. This would generate a different image every time a header page is served.
I may tinker with this myself and present it as an option in a future release of this theme.
July 3rd, 2006 at 6:31 pm
Lawton,
Did you use an FTP client to upload images to the following folder:
(site root)/wp-content/themes/PressRow/images/If you used the WP administration panel instead of an FTP client to upload your photos, then I suspect your problem can be found right there.
I am thinking that you have a file path issue here.
July 20th, 2006 at 10:17 pm
great theme! i have been able to change the header images with no problems, but i do have a quandry and need some help with it. if you take a look at the site, gastoncounty.info, you will notice the “Sponsor” section to the sidebar. while i like where the “Sponsor” is, would like to see if there was some way to put this section in the header without really screwing with things. i am not sure what CSS i would use exactly, but if you could figure it out, i think it would add some great attractiveness to the curent look. i am using an image that is 144px X 144px. if it has t be smaller, i can do that.
July 22nd, 2006 at 8:17 pm
Great looking theme.
I am currently on Blogger and want to make the switch to Wordpress on a hosted website. I really don’t want a picture in the header. I would like a box with text and maybe a shaded background. Would that be possible or pretty easy to do with the Pressrow theme?
September 12th, 2006 at 7:35 am
Hello:
I’m here again….
Which is the line of code in the “header_404.php” that allows me to change the permalink when a page doesn’t exists to a 404 url??
Ie: from http://myblog/post-doesnt-exist/ to http://myblog/404)
September 12th, 2006 at 8:43 am
Pande,
As far as I know, WordPress cannot actually control the 404 URL. If a page is reached in error, then the 404.php page will display regardless of the URL. I cannot, from within the header files or other PHP files at least, change the URL when a page is reached in error.
On the semantics side of things, there really is no reason to have a particular 404 URL. As long as the 404 page is specific and tells your visitors that there is an error, then no one will care about the URL.
November 9th, 2006 at 2:43 pm
still have not found how i can place the “sponsors” in the header.php. I would like for it to be where the white space is currently - I guess a table would work but I am not that great when it comes to CSS.
any ideas, thoughts, suggestions?
December 10th, 2006 at 7:11 pm
How can I implement the ‘random header images’ from the Cutline Theme on PressRow?
December 10th, 2006 at 10:08 pm
Jhay,
Header images are handled differently in each theme, so the lack of a 1:1 correspondence means that you cannot use the Cutline code directly.
Instead, you’d need to modify PressRow’s header code to accommodate images rather than CSS-based images, as it is now.
One of these days, I’ll get around to releasing a totally fixed up version of this theme, but I’m really swamped at the moment. Unfortunately, this kind of thing gets sent to the back burner.
December 13th, 2006 at 7:50 pm
What could I have possibly done to make my blog, increasesalesrevenuedotcom, revert back from Press Row to the Word Press default and any ideas on how to get it my old Press Row back? All I did was try to replace the Churchill Downs graphic. It worked for about an hour and then just after I saved a future draft, I hit view site from inside the admin and my replacement image was gone and so was Press Row. Thanks in advance for your help.
December 25th, 2006 at 9:22 pm
hi i am using wordpress.com and my blog is above.
i have no problems uploading my own picture into the header image, but may i know how to enable the short description of my blog that i have placed under “options” of the free wordpress.com blog management system?
Thanks a lot and great theme!
December 26th, 2006 at 11:54 am
Jeff,
I am afraid that I have no control over the WordPress.com-hosted version of the theme. If you were using a self-hosted version from WordPress.org, then I could tell you how you could incorporate your tagline into the header.
As far as I know, WordPress.com does not allow you to alter the source code for the theme. Unfortunately, this is what you’d need to do in order to display the tagline.
All I can suggest is to try and send WordPress.com support an email to see if they can add that functionality.
January 18th, 2007 at 1:26 pm
Chris,
How can I eliminate the header image altogether?
Thanks -
Dave Navarro
January 27th, 2007 at 10:30 pm
This has probably been explained elsewhere (I did not see it), but how do I get the tagline shown on the front page of my site? I would like a smaller font than the title. I tried just putting in a bloginfo (’description’) in the header code, but nothing happened. Other than this, I am loving this theme!
February 18th, 2007 at 11:32 am
Love the theme, I am working on modifying it some before it becomes my active theme, two questions though.
1. My blogroll is no longer in alphabetical order seems sort of random. How can I get it in order again?
2. My title does not fit well, I should have had a better title. How can I change the font size? Ideally I’d like split the title into two parts of different font size and center them.
Thanks for such a helpful site and great theme.
March 6th, 2007 at 11:31 am
Do you have somewhere a gallery page with links to peoples blogs? Could pick up some ideas what kind of header images look good…
March 6th, 2007 at 11:41 am
No I don’t, sorry. But I would recommend just trying a bunch of different solutions until you come up with something that you like!
March 7th, 2007 at 8:15 pm
For those of us using Press Row theme and WordPress hosting which is triggering the missing header image problem.
It is a path issue. My work-around was to store the image on my own server and use the full path in the css to the image. Worked fine. So basically you just need to know the full path of the image - be it on your or WP’s server, and plug that in.
April 30th, 2007 at 4:54 am
Is there anyway I can turn the bottom line of my header into a subhead, where it will appear in smaller font?
April 30th, 2007 at 8:23 am
Carlos — Your blog is on the hosted version of WordPress at WordPress.com, which I cannot support directly.
You can, however, upgrade to a package that will allow you to edit some of the CSS, and through that, you should be able to control the font size of the tagline in your header.
Leave a Reply
You must be logged in to post a comment.