Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Header configuration & styling (http://forum.bytesforall.com/forumdisplay.php?f=15)
-   -   Change header image per category (http://forum.bytesforall.com/showthread.php?t=7166)

Craig Atkinson May 18, 2010 07:09 AM

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

lmilesw May 18, 2010 09:41 AM

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.

paulae May 18, 2010 10:09 AM

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.

Craig Atkinson May 19, 2010 01:22 AM

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.

paulae May 19, 2010 07:03 AM

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.

juggledad May 20, 2010 04:57 AM

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 {
background:url(http://yourdomain.com/wordpress/wp-content/themes/atahualpa/images/main_logo.jpg);
}
body.category-announcements img.logo {
background:url(http://yourdomain.com/wordpress/wp-content/themes/atahualpa349/images/cat-announcement-logo.jpg);
}

just repeat the second CSS Selector/rule for the categories you want to deal with.

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.

paulae May 20, 2010 05:23 AM

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.

juggledad May 20, 2010 05:37 AM

where are the category images in the content? I don't see them

something similar might be doable

paulae May 20, 2010 05:47 AM

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?

juggledad May 20, 2010 06:07 AM

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 {
  background:url(http://yourdomain.com/wordpress/wp-content/uploads/2009/12/newsheader150.jpg);
}

etc, etc

paulae May 20, 2010 06:32 AM

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?

Craig Atkinson May 20, 2010 08:54 AM

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?

paulae May 20, 2010 10:21 AM

You need to change "yourdomain.com" to your domain. :)

juggledad May 20, 2010 12:34 PM

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{
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)
}

this will give you a blank logo except on the caferoyalbooks category pages

Craig Atkinson May 20, 2010 02:28 PM

Thanks again for the help - I did that and it's just blank on every category

juggledad May 20, 2010 04:39 PM

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>
get rid of teh 'HTML:---------' and the ending '---------' that not valid CSS so it's messing up your style sheet

Craig Atkinson May 21, 2010 01:04 AM

still no joy

juggledad May 21, 2010 04:28 AM

oops, forgot the quotes and http try this
HTML Code:

body img.logo {
background:url("http://www.craigatkinson.co.uk/wp-content/themes/atahualpa348/images/blank_logo.png"):
}
body.category-caferoyalbooks img.logo {
background:url("http://www.craigatkinson.co.uk/wp-content/themes/atahualpa348/images/craigatkinson.gif")
};


Craig Atkinson May 21, 2010 05:37 AM

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

Craig Atkinson May 21, 2010 06:14 AM

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?

juggledad May 21, 2010 07:17 AM

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.

Craig Atkinson May 21, 2010 02:53 PM

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?

juggledad May 22, 2010 06:48 AM

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.