ThemeShaper Forums » Thematic

different header for different pages

(8 posts)
  • Started 10 years ago by izumitelj
  • Latest reply from KateFox
  • This topic is resolved
  1. 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

    Posted 10 years ago #
  2. 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

    Posted 10 years ago #
  3. 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!

    Posted 10 years ago #
  4. 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

    Posted 10 years ago #
  5. 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

    Posted 10 years ago #
  6. 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

    Posted 10 years ago #
  7. 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.

    Posted 10 years ago #
  8. 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;
    }

    http://www.oregoncoastdigest.com

    Posted 10 years ago #

RSS feed for this topic

Reply

You must log in to post.