ThemeShaper Forums » Thematic

[closed]

Different Header Images per Page

(15 posts)
  • Started 11 years ago by lance1572
  • Latest reply from helgatheviking
  • This topic is resolved

Tags:

  1. lance1572
    Member

    Hi all!

    Having some problems here and not sure where to start. My designer has designed a site with different headers for different pages. So I tried to take Chris's solution for writing different body classes for different pages. Right now I have an about us page and need to get an image in the header area or rather the #image-box. For some reason it's not working.

    // We wrap #branding
    function childtheme_brandingopen() { ?>
    	<div id="header-box">
        	<div id="branding">
    <?php }
    add_action('thematic_header','childtheme_brandingopen',1);
    
    // And we add our #image-box
    function image_box() { ?>
    		<div id="image-box">
    		</div>
    <?php
    }
    add_action('thematic_header', 'image_box', 8);
    
    // REMOVE CURRENT ACCESS
    function remove_access() {
    	remove_action('thematic_header', 'thematic_access', 9);
    }
    add_action('init', 'remove_access');
    
    //ADD ACCESS TO NEW POSITION
    add_action('thematic_header', 'thematic_access', 7);
    
    // Now we need to close #header-box
    function header_box_close() { ?>
    	</div>
    <?php }
    add_action('thematic_header', 'header_box_close', 9);

    Then I added the CSS to the body but I dont think this is right. My template page is called About Us Page - so Im not sure how the code references OR writes to that body template

    body.about #image-box {background: url(../images/about-us.jpg);}

    Hope I wrote the code in the tics right. Any help is again GREATLY appreicated!

    This is the only code I have so far - do I need more? I will become a guru if it kills me! :)

    This design has been on BIG Cluster!

    Posted 11 years ago #
  2. lance1572
    Member

    // Add specific CSS class by filter
    add_filter('body_class','my_class_names');
    function my_class_names($classes) {
    	// add 'class-name' to the $classes array
    	$classes[] = 'about_us';
    	// return the $classes array
    	return $classes;
    }

    Okay this seemed to work ;)

    I spoke to soon. Anyone know how to get other classes in this array? Sorry for being stupid!

    Posted 11 years ago #
  3. the above code you have for filtering the body classes work fine if you are using the default wordpress body classes. if you are using the thematic body classes

    ie, you have this in your functions.php

    define('THEMATIC_COMPATIBLE_BODY_CLASS', true);

    then you need to target the thematic_body_class filter instead of the body_class filter.

    // Add specific CSS class by filter
    add_filter('thematic_body_class','my_class_names');
    function my_class_names($classes) {
    	// add 'class-name' to the $classes array
    	$classes[] = 'about_us';
    	// return the $classes array
    	return $classes;
    }
    Posted 11 years ago #
  4. lance1572
    Member

    ALL HAIL HELGA!!!!! WE'RE NOT WORTHY!!!!!!!

    WORKED LIKE A CHARM. I DIDNT SEE THIS IN THE THEMATIC SITE - IT'S PROBABLY THERE THOUGH!!!!

    THANK YOU FOR HELPING ME AND OTHERS!!!!!!!!!

    Posted 11 years ago #
  5. lance1572
    Member

    Ok so I'm still stuck on this issue. I got the CSS slug change on every page except the blog page. For some reason it's not writing it to that body class.

    I basically made the 'blog' page out of a new template called home.php which shows excerpts of the posts. This is just the default - I didn't edit it. I'm using a plugin called WP Title which changes the title of the page. The url is still - /insights but it made the title of the page Shop Talk. I don't believe that would have any affect though

    here is a link to the site if anyone wants to check it out. I haven't done cross browser stuff yet so there maybe some difference - go easy :)

    You'll see there is no header bg image like the others - but it is writing the #header-box div

    http://harborsidesalesgroup.com/site1/

    body.slug-about-us #header-box {background: url(../images/about-us.jpg);}
    body.slug-capabilities #header-box {background: url(../images/capabilities.jpg);}
    body.slug-shopttalk #header-box {background: url(../images/insights.jpg);}
    body.slug-contact-us #header-box {background: url(../images/contact.jpg);}

    the body class showing in Firebug is

    wordpress blogid-1 y2011 m12 d15 h14 blog not-singular loggedin mac firefox ff8

    Its the slug with the shoptalk - I've tried changing that to insights etc.

    I also added this to my functions

    define('THEMATIC_COMPATIBLE_POST_CLASS', true);
    define('THEMATIC_COMPATIBLE_COMMENT_FORM', true);
    define('THEMATIC_COMPATIBLE_FEEDLINKS', true);
    Posted 11 years ago #
  6. lance1572
    Member

    This seemed to work

    body.blog #header-box {background: url(../images/insights.jpg);}

    Posted 11 years ago #
  7. onelittlemoose
    Member

    lance1572, I think I'm looking to do the same things as you, except I'm not clear on how you did it. Namely, I'd like a specific header image to appear in specific pages or categories. The home page can be a random selection (it's a static page anyway), or, it could even be the blend of rotating images like you are doing on your site (nice job, by the way)

    But first things first. Did you need to use the code you originally posted above, or was Helga's code for thematic_body_class filter all you needed to add in the functions file?

    Any help welcome. Thanks.

    Posted 11 years ago #
  8. onelittlemoose
    Member

    Ok, I haven't actually tried this yet, but before I do, hoping someone can tell me if I'm on the right track. I want specific header background images to appear for specific slugs. The following would reference the corresponding styles in style.css

    function childtheme_override_brandingopen($somevariable) {
    	if (the_slug ('cypress-hills')) {
    		$somevariable = '<div class="cypress-bgd-photo">';
    		$somevariable .= '<div id="branding">';  }
    	if  (the_slug ('sandhills')) {
    		$somevariable = '<div class="sandhills-bgd-photo">';
    		$somevariable .= '<div id="branding">';	}
    	else {
    		$somevariable = '<div class="normal-header">';
    		$somevariable .= '<div id="branding">';  }
    	}
    	add_action('thematic_header','childtheme_override_brandingopen',1);
    
    function childtheme_override_brandingclose($someothervariable) {
    	 	$someothervariable ='</div></div><!--  #branding -->\n';
    }
    add_action('thematic_header','childtheme_override_brandingclose',7);

    What variable should I be using for $somevariable and $someothervariable? Am I even in the ball park here?

    Thanks

    Posted 11 years ago #
  9. lance1572
    Member

    Hi there onelittlemoose! Yes there was a combination here is what I did for the interior pages.

    In the functions.php I defined the classes:

    define('THEMATIC_COMPATIBLE_BODY_CLASS', true);
    define('THEMATIC_COMPATIBLE_POST_CLASS', true);
    define('THEMATIC_COMPATIBLE_COMMENT_FORM', true);
    define('THEMATIC_COMPATIBLE_FEEDLINKS', true);

    I wrapped the branding with a div header-box

    function childtheme_brandingopen() { ?>
    	<div id="header-box">
        	<div id="branding">
    <?php }
    add_action('thematic_header','childtheme_brandingopen',1);
    
    // Now we need to close #header-box
    function header_box_close() { ?>
    	</div>
    <?php }
    add_action('thematic_header', 'header_box_close', 9);
    
    /
    // then add this 
    
    //WRITING CLASSES TO THE SLUGS
    add_filter('thematic_body_class','my_class_names');
    function my_class_names($classes) {
    	// add 'class-name' to the $classes array
    	$classes[] = '';
    	// return the $classes array
    	return $classes;
    }
    
    then in the CSS I did the (check the body class in Firebug)
    
    body.slug-about-us #header-box {background: url(../images/about-us.jpg);}
    body.slug-capabilities #header-box {background: url(../images/capabilities.jpg);}
    body.blog #header-box {background: url(../images/insights.jpg);}
    body.slug-contact-us #header-box {background: url(../images/contact.jpg);}

    It didnt work for things like categories, singular so I wrote them like this

    body.search-results #header-box{background: url(../images/insights.jpg);}
    body.search-no-results #header-box{background: url(../images/insights.jpg);}
    body.category-public-relations #header-box{background: url(../images/insights.jpg);}
    body.category-marketing #header-box{background: url(../images/insights.jpg);}
    body.category-sales #header-box{background: url(../images/insights.jpg);}
    body.single #header-box {background: url(../images/insights.jpg);}
    body.tag #header-box {background: url(../images/insights.jpg);}
    body.archive #header-box {background: url(../images/insights.jpg);}

    May be confusing but it worked Im sure they is a better of accomplishing this but this is how I got it to work

    Posted 11 years ago #
  10. onelittlemoose
    Member

    Thanks, lance1572. This will require some study on my part. Had brain-lockup on attaching it to the body itself, rather than wrapping a new div around the branding div. I think it might be starting to sink in.

    One question before I tackle it with a fresh mind later, your code

    function childtheme_brandingopen() { ?>
    	<div id="header-box">
        	<div id="branding">
    <?php }
    etc ...

    is this in the functions.php file also? I ask because the closing and opening of the php kind of threw me.

    Posted 11 years ago #
  11. thematic does add body classes for categories. looking at my local demo, i see:

    wordpress blogid-1 y2012 m01 d02 h13 archive not-singular category category-child-category-i loggedin windows firefox ff9

    in the body class for a category archive.

    and on a single post, for a post in said category i get:

    wordpress blogid-1 y2012 m01 d02 h13 singular slug-hello-world-3 single postid-56 s-y2008 s-m12 s-d29 s-h19 s-category-child-category-i s-author-helga s-comments-open s-pings-open loggedin windows firefox ff9

    make sure you are using the latest thematic. though i can't promise it will work, b/c i might have some crazy beta going locally.

    http://developing.thematic4you.com/thematic-development-release/

    @onelittlemoose- yes that goes in your functions.php. almost ALL php will go there. you have to open and close to mix php and html like that.

    Posted 11 years ago #
  12. lance1572
    Member

    Whoops for got to close the branding div...The viking master knows best ;) I was trying to write CSS to the slug but for cats and singular I couldn't find them in firebug so I just wrote CSS to the body like so

    body.category-public-relations #header-box{background: url(../images/insights.jpg);}

    A little more cumbersome if there are new cats that get published but oh well.

    onelittlemoose - you dont need to wrap that div if you dont want to. I just did for more styling becuase my designer didnt really understand wordpress. Though I like the flexbility of it - sometimes it's nice to just design right out of the box w/o having to make different page templates for each page! UGH!

    Sorry for the non breaks my keyboard is acting up :)

    Posted 11 years ago #
  13. you could filter the body class to add the category name for singular posts if you aren't getting something like s-category-child-category-i in your body classes. (that must be beta)

    add_filter('thematic_body_class','my_class_names');
    function my_class_names($classes) {
    	// add 'class-name' to the $classes array
    	if(is_single()){
               $category = get_the_category();
               foreach($category as $cat){
                  $classes[] = 's-category-' . $cat->cat_name;
               }
    	}
    	return $classes;
    }
    Posted 11 years ago #
  14. lance1572
    Member

    Can I just say that I LOVE YOU!!!! Thank you for the help!!!!!

    Posted 11 years ago #
  15. so much love. you're welcome. can you mark the topic as resolved if we've sorted it out?

    Posted 11 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.