Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Header configuration & styling »

Change header image per category


  #1  
Old May 18, 2010, 08:09 AM
Craig Atkinson's Avatar
Craig Atkinson
 
53 posts · Mar 2009
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
  #2  
Old May 18, 2010, 10:41 AM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
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 (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #3  
Old May 18, 2010, 11:09 AM
paulae's Avatar
paulae
 
1,333 posts · Feb 2009
Wordpress 3.4.1, Atahualpa 3.7.7
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.

Last edited by paulae; May 18, 2010 at 11:11 AM.
  #4  
Old May 19, 2010, 02:22 AM
Craig Atkinson's Avatar
Craig Atkinson
 
53 posts · Mar 2009
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.
  #5  
Old May 19, 2010, 08:03 AM
paulae's Avatar
paulae
 
1,333 posts · Feb 2009
Wordpress 3.4.1, Atahualpa 3.7.7
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.
  #6  
Old May 20, 2010, 05:57 AM
juggledad's Avatar
juggledad
 
23,576 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #7  
Old May 20, 2010, 06:23 AM
paulae's Avatar
paulae
 
1,333 posts · Feb 2009
Wordpress 3.4.1, Atahualpa 3.7.7
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.

Last edited by paulae; May 20, 2010 at 06:25 AM.
  #8  
Old May 20, 2010, 06:37 AM
juggledad's Avatar
juggledad
 
23,576 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
where are the category images in the content? I don't see them

something similar might be doable
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #9  
Old May 20, 2010, 06:47 AM
paulae's Avatar
paulae
 
1,333 posts · Feb 2009
Wordpress 3.4.1, Atahualpa 3.7.7
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?
  #10  
Old May 20, 2010, 07:07 AM
juggledad's Avatar
juggledad
 
23,576 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #11  
Old May 20, 2010, 07:32 AM
paulae's Avatar
paulae
 
1,333 posts · Feb 2009
Wordpress 3.4.1, Atahualpa 3.7.7
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?

Last edited by paulae; May 20, 2010 at 07:47 AM.
  #12  
Old May 20, 2010, 09:54 AM
Craig Atkinson's Avatar
Craig Atkinson
 
53 posts · Mar 2009
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?
  #13  
Old May 20, 2010, 11:21 AM
paulae's Avatar
paulae
 
1,333 posts · Feb 2009
Wordpress 3.4.1, Atahualpa 3.7.7
You need to change "yourdomain.com" to your domain.
  #14  
Old May 20, 2010, 01:34 PM
juggledad's Avatar
juggledad
 
23,576 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #15  
Old May 20, 2010, 03:28 PM
Craig Atkinson's Avatar
Craig Atkinson
 
53 posts · Mar 2009
Thanks again for the help - I did that and it's just blank on every category
  #16  
Old May 20, 2010, 05:39 PM
juggledad's Avatar
juggledad
 
23,576 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #17  
Old May 21, 2010, 02:04 AM
Craig Atkinson's Avatar
Craig Atkinson
 
53 posts · Mar 2009
still no joy
  #18  
Old May 21, 2010, 05:28 AM
juggledad's Avatar
juggledad
 
23,576 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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")
};
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #19  
Old May 21, 2010, 06:37 AM
Craig Atkinson's Avatar
Craig Atkinson
 
53 posts · Mar 2009
ha, no I can't get to it, see image - seems to affected the whole dashboard?

update:Error with Firefox, sorry

Last edited by Craig Atkinson; May 21, 2010 at 07:12 AM. Reason: update
  #20  
Old May 21, 2010, 07:14 AM
Craig Atkinson's Avatar
Craig Atkinson
 
53 posts · Mar 2009
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?
  #21  
Old May 21, 2010, 08:17 AM
juggledad's Avatar
juggledad
 
23,576 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #22  
Old May 21, 2010, 03:53 PM
Craig Atkinson's Avatar
Craig Atkinson
 
53 posts · Mar 2009
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?
  #23  
Old May 22, 2010, 07:48 AM
juggledad's Avatar
juggledad
 
23,576 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
nope, CSS changes the STYLE not the HTML
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Bookmarks

Tags
categories, category, change, header, image

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
How do I change the header image link? catherinehbbh Forum How-To 4 Jan 20, 2012 07:49 PM
How can I change the header image by clicking on a thumbnail? GustavK Header configuration & styling 0 Feb 26, 2010 10:21 AM
How do i change my header image? hermanchauw@gmail.com Header configuration & styling 3 Feb 18, 2010 05:48 AM
[SOLVED] How to change header image on Atahualpa3.4.1 pilsen1 Header configuration & styling 4 Sep 26, 2009 06:53 AM
How do I change the Header Image? Lisa221 Header configuration & styling 3 Jul 11, 2009 05:45 AM


All times are GMT -6. The time now is 05:16 AM.


Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.