izumitelj
Member
Hi all,
I'm searching for a way to add different header backgrounds for some pages. I found some information about this here, but I'm not sure how to implement it in Thematic, as it suggests loading background(style) from php, which I'm not succeeding so far.
It would be great if this could be made in child theme so that it's independent from main theme... I'm probably asking too much now? :]
Any help is appreciated, I'm stuck.
Thank you
Jamie Mitchell
Member
Howdy partner...
i use different backgrounds in the header of thematic using css and the body class of that particular page to give each page the different image.
for example:
body.slug-about #header{
background: url(images/header-image-one.jpg) no-repeat
}
body.slug-services #header{
background: url(images/header-image-two.jpg) no-repeat
}
body.slug-contact #header{
background: url(images/header-image-three.jpg) no-repeat
}using the page slug to assign the background to that page only, if you look at your websites css you will see in the body tag all the different classes, one of those will be the page slug, or if it's the blog, it will be that, if it's single than that, category and so on.
Every page has it's own unique class, with this you can make any page you like look different than any other page just using css.
J
izumitelj
Member
This is exactly what I was looking for + much more considering possibilities you've just opened :)))
I'm new to WordPress and Thematic, but so far this is really exciting, both software and the community:)
Thank you Jamie!
Take a look into the source view of your browser and search for body. There are lots of classes that can be used to play with conditional designs.
Cheers,
Chris
This works great for me on pages and main index.
How would you apply the same thing to categories for instance?
example: url.com/category/name
Hey,
can't check this at the moment (iPhone only) .. look into the source view of your browser .. we should create a category based body class ..
Cheers,
Chris
Based on what you said I went in and checked the tags on the body element in source code when viewing a category and found it to be category-name. Quickly switching out slug-name for this worked wonders.
KateFox
Member
My image is on #branding within the header, and this worked for me for category pages:
body.category-charleston #branding { /*cat=35 */
background: url(art/mast_charleston.png) no-repeat;
}
You must log in to post.
