Change header image per category
Sorry if this has been covered, I searched but didn't find!
I's like to have one header image for most category pages, but a different one for other categories. 2 different images in total. Is this possible? http://www.craigatkinson.co.uk - the 'Café Royal Books' link I'd like to have a different header, as with it's sub-categories. Any suggestions would be great, Craig |
Check out this thread. You may have to figure out how to select categories instead of pages. But if per page or post is ok you could try the Dynamic Headers plugin.
Off topic... You should reduce the file size of your images. Many are over 200Kb and cause your site to load slowly. |
Larry, if I understand the Dynamic Headers plugin, it doesn't let you assign a special image for each category archive page. Right?
To accomplish that, I created a new widget area for each category I wanted to have a header image, and then used the text widget to call the image, and Widget Logic to place each widget only on the category archive page for each category. Here's one: http://www.larchmontgazette.com/category/news/ . Most of the other categories have a separate image. |
Hm, I have no idea what widget areas are or how to use them. I've just remembered too that it's a logo, not header image that I'm using! I don't know if that makes it any easier? I'll keep searching but I might just have to make an all-in-one logo instead of having two.
|
Look in the theme options. One of them is Add new widget areas. Read that section. You can add a new widget area in many places, including the top of the center column. I wanted most of my category archive pages to have separate "header" images denoting what the category was about. Like an old-fashioned typewriter for the news section, a headstone for obituaries, a flower image for garden guide, etc. The overall header image for the site remained the same, at the top.
|
Here is another way you could do it. This will work if all teh logo images are the same size
1) create a blank logo as a 'png' call it blank_logo.png and put it in the atahualpa/images folder 2) at ATO->Style & edit HEADER AREA->Show Logo Image? enter 'blank_logo.png now the fun part at ATO->Add HTML/CSS Inserts->CSS Inserts add the following HTML Code:
body img.logo { What this does is first display the blank logo, then on the main page it overlays the 'main_logo' except on the category-announcements page. there it will show the cat-announcement-logo.jpg. The name of the categories will be what ever you are calling your categories. |
This is very clever! I'm going to try it out. I would think this would be less of a server load than all the widgets I'm using now, right?
However, this would put the image up in the main header area, not down in the content area where I have my category images. So this wouldn't work for me, actually. I still want my main newspaper title image at the top of every post and category. |
where are the category images in the content? I don't see them
something similar might be doable |
As in http://www.larchmontgazette.com/category/news/, if you click on most of the categories, you'll see a specific image atop the center column of the category archive page, not on each post. I suppose this could be done with CSS too?
|
Yes, you should be able to do the same thing there since you can tie off the body.category-dinewine or body.category-news and if you changed the <img to have an id '<img id="center_cat_img" ...' then you could use
HTML Code:
body.category-dinewine img#center_cat_img { |
I'm going to try this. Don't know why I didn't think of it. I guess I was enjoying having the ability to create new widget areas all over the place!
Am I right that this method should be "lighter weight" than calling widgets? Does it take less load-time? UPDATE: Not working, but it's because I can't add the ID to the image. Where do I put that? If I go into the media library and edit the image, I don't see where I can add the CSS at this point. Also, should the CSS insert mention the word "archive" somewhere, since I want this only on the archive pages, not each post? |
This sounds great.
I think I know what to do but I 'm pretty bad at understanding this kind of thing! I've made the blank PNG and put the link in the theme options. In the add CSS at the bottom I've added your code. Now, what do I change? HTML: --------- body img.logo { background:url(http://yourdomain.com/wordpress/wp-c...ain_logo.jpg); } body.category-announcements img.logo { background:url(http://yourdomain.com/wordpress/wp-c...ent-logo.jpg); } --------- I changed to this: HTML: --------- body img.logo { background:url(http://yourdomain.com/wordpress/wp-c...ank_logo.png); } body.category-caferoyalbooks img.logo { background:url(http://yourdomain.com/wordpress/wp-c...atkinson.gif); } --------- but its not working - I guess I have it wrong? |
You need to change "yourdomain.com" to your domain. :)
|
two things,
1) you need to put the 'blank_logo.png' at ATO->Style & edit HEADER AREA->Show Logo Image? 2 change your insert to HTML Code:
body img.logo{ |
Thanks again for the help - I did that and it's just blank on every category
|
what isw with all the dashes in your css inserts?? I see this
HTML Code:
HTML:---------body img.logo{background:url(www.craigatkinson.co.uk/wp-content/themes/atahualpa348/images/blank_logo.png)}body.category-caferoyalbooks img.logo{background:url(www.craigatkinson.co.uk/wp-content/themes/atahualpa348/images/craigatkinson.gif)}---------</style> |
still no joy
|
oops, forgot the quotes and http try this
HTML Code:
body img.logo { |
ha, no I can't get to it, see image - seems to affected the whole dashboard?http://www.craigatkinson.co.uk/wp-co...t-12.36.19.png
update:Error with Firefox, sorry |
it's working now, thanks for your help.
If I replace the blank_logo.png for craigatkinson.gif, will the standard logo be craigatkinson.gif unless I command it otherwise, or does it only work with a blank PNG as default? |
you need the transparent logo to start, but you can then have the 'body img.logo' css point at a real logo and have the 'body.category-caferoyalbooks img.logo' point at your alternative one.
|
Thanks that's exactly what I needed!
I just thought of something else! Can I make one of the logos link to it's category rather than the home page? |
nope, CSS changes the STYLE not the HTML
|
All times are GMT -6. The time now is 04:25 PM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.