Different Masthead Images / Background Images

Hi Lucas

If needs be please watch our Custom CSS video here: https://siteorigin.com/basics/modifying-theme-design-with-custom-css/

Use your browser’s developer tool to inspect the page source and find the unique body class for the page. For your home page it’ll be .home, your blog page will be .blog and for this page we’re on right now the unique body class is: .postid-4293

You can use Custom CSS, prefixing each selector with the unique body class, to set a background. For example, for the masthead:

.postid-4293 header#masthead {
background-image: url("http://localhost/so/wp-content/uploads/2014/09/ujKaaIATKKx7vi5kkfQn__DSC39321.jpg");
}

Just swap out the body class and image url I’ve used there.

For the page background you’d use:

.postid-4293 #main {
background-image: url("http://localhost/so/wp-content/uploads/2014/09/ujKaaIATKKx7vi5kkfQn__DSC39322.jpg");
}

If you’re prepared to jump in at this level, this is how you could accomplish this task.

Are you asking how to adjust the site title color based on the page being viewed? If so that would be:

/* Vantage Site Title Color */

.postid-4293 header#masthead hgroup h1 {
color: #666666 !important;
}

The logo can be changed globally from Appearance > Theme Settings > Logo. Does that answer your question?

This is unfortunately a lot more work and more complicated. You can see an example of us doing it here but only for the home page: https://siteorigin.com/thread/we-want-to-change-out-our-logo-only-on-our-home-page-and-do-it-for-normal-retina-variants/.

Try this:

1. Create a child theme for Vantage: http://codex.wordpress.org/Child_Themes

2. Using Text or another text editor create a file called functions.php and insert the following:

<?php
 
function vantage_child_change_logo($value){
	if( is_page( 93 ) ) {
		$value = 41;
	}
	return $value;
}
add_filter('siteorigin_setting_logo_image', 'vantage_child_change_logo');

function vantage_child_change_retina_logo($value){
	if( is_page( 93 ) ) {
		$value = 41;
	}
	return $value;
}
add_filter('siteorigin_setting_logo_image_retina', 'vantage_child_change_retina_logo');

?>

93 is the page ID that you want to change the logo on. 41 is the logo ID that you want to load. Change it to the logo ID the first time you see 41, the second time you see 41 change that ID to the Retina version of that logo.

It’s unfortunately normal to see the following when activating a child theme.

a. Menu assignments will be lost. Go to Appearance > Menus and re-save your menu to the primary location.
b. All Customizer settings will go back to default. Be sure to open the Customizer in one tab before switching to the child theme. That way you can manually copy your settings over.

Your logo is white now right? http://www.lucasmartin.ch/concerts/, wasn’t it black before?

For sure. Please see my answer regarding the activation of child themes above, points a and b.

That’s it.

Switch back to the parent theme. Open the Customizer. Now open a new tab, in that new tab re-activate your child theme, go to the Customizer. Now you have two tabs, one with the parent Customizer and one with the child theme Customizer, you can now manually copy your settings over.

Un-tested but you could give this a try:

 <?php
 
function vantage_child_change_logo($value){
	if( is_page( 21 ) && is_page( 15 ) ) {
		$value = 273;
	}
	return $value;
}
add_filter('siteorigin_setting_logo_image', 'vantage_child_change_logo');

function vantage_child_change_retina_logo($value){
	if( is_page( 21 ) && is_page( 15 ) ) {
		$value = 274;
	}
	return $value;
}
add_filter('siteorigin_setting_logo_image_retina', 'vantage_child_change_retina_logo');

?> 

Sorry about my poor code there. Give this a try:

 <?php
 
function vantage_child_change_logo($value){
	if( is_page( array( 21, 15 ) ) ) {
		$value = 273;
	}
	return $value;
}
add_filter('siteorigin_setting_logo_image', 'vantage_child_change_logo');

function vantage_child_change_retina_logo($value){
	if( is_page( array( 21, 15 ) ) ) {
		$value = 274;
	}
	return $value;
}
add_filter('siteorigin_setting_logo_image_retina', 'vantage_child_change_retina_logo');

?> 

We appreciate the support!

Awesome, appreciate it. Thanks from everyone at SiteOrigin.