Outreach Pro Theme – Different Background on Pages

[PainterMommy]

I am working on a site (http://kraftlove.com) and the client would like to have a custom background on her pages, but when I go to add a background through the dashboard, the same background shows up behind the slider on the homepage. How can I have it so that the homepage stays the same and I can add a background on the pages / posts instead?

I am a novice when it comes to coding so I appreciate any help that you might have for me. 🙂

DAWN

http://kraftlove.com

[Victor Font]

The custom background is actually a WordPress function, not Genesis. It's a little complicated to do you what you want because you need to create your own custom function to replace the WordPress functionality. The whole reason for this is because the WordPress function creates inline CSS. All we have to do is add :not(.home) to the CSS, but to get there, you have to do the following:

Find add_theme_support( 'custom-background' ); in the Outreach Pro functions.php and replace it with the entire block of code below. I've tested this with Outreach Pro in my local environment and it works. Be very, very careful editing functions.php. If you make a mistake, it will bring down your site and you will have to correct it through FTP. FTP is my preferred way for editing the functions file.

$my_defaults = array(
				'default-image'          => '',
				'default-repeat'         => 'repeat',
				'default-position-x'     => 'left',
				'default-attachment'     => 'scroll',
				'default-color'          => '',
				'wp-head-callback'       => 'my_custom_background_cb',
				'admin-head-callback'    => '',
				'admin-preview-callback' => '',
			);
			
add_theme_support( 'custom-background', $my_defaults );

function my_custom_background_cb() {
	// $background is the saved custom image, or the default image.
	$background = set_url_scheme( get_background_image() );

	// $color is the saved custom color.
	// A default has to be specified in style.css. It will not be printed here.
	$color = get_background_color();

	if ( $color === get_theme_support( 'custom-background', 'default-color' ) ) {
		$color = false;
	}

	if ( ! $background && ! $color )
		return;

	$style = $color ? "background-color: #$color;" : '';

	if ( $background ) {
		$image = " background-image: url('$background');";

		$repeat = get_theme_mod( 'background_repeat', get_theme_support( 'custom-background', 'default-repeat' ) );
		if ( ! in_array( $repeat, array( 'no-repeat', 'repeat-x', 'repeat-y', 'repeat' ) ) )
			$repeat = 'repeat';
		$repeat = " background-repeat: $repeat;";

		$position = get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) );
		if ( ! in_array( $position, array( 'center', 'right', 'left' ) ) )
			$position = 'left';
		$position = " background-position: top $position;";

		$attachment = get_theme_mod( 'background_attachment', get_theme_support( 'custom-background', 'default-attachment' ) );
		if ( ! in_array( $attachment, array( 'fixed', 'scroll' ) ) )
			$attachment = 'scroll';
		$attachment = " background-attachment: $attachment;";

		$style .= $image . $repeat . $position . $attachment;
	}
?>
<style type="text/css" id="custom-background-css">
body.custom-background:not(.home) { <?php echo trim( $style ); ?> }
</style>
<?php
}

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[PainterMommy]

Thanks so much, I have added your code to the functions.php. I then went into the admin panel and uploaded the custom background image. But when I look at the site, I am not seeing the background. I know you mentioned needing to update the CSS. Can you tell me what code and where I need to add it exactly? Maybe that is what is missing? I so appreciate your help!

DAWN

[Victor Font]

That code does update the CSS. The color from your .site-inner at line 478 in style.css is covering the background image. The background image is behind it. You either have to remove the background-color or change it to something with a little transparency. background-color: rgba(0,0,0,0.3);

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[PainterMommy]

Thankyou!!! That did it!!! 🙂

[Author]

Posts