Multiple custom backgrounds in Beautiful Pro

[AMCS]

Hi I'm trying to build a custom site design based on the Beautiful Pro theme. I want to change the background/banner image (the large one that flows across the page) on each page.

I think I could do this with css, using something like .page-id-XX .custom-background .site-header-banner {background: url(...);} each time, but that would mean the client won't be able to change the images themselves... Is there a way to change the way the theme pulls in the custom background and either

a) have more than one custom background, or
b) have it draw instead from a custom post type (for example)?

I'd also like to replace it on the homepage with an image changer... but I can't work out where the background/banner is hooked in to unhook it... any ideas??

Thanks, Andy

NB - apologies for the TERRIBLE temp picks & content on this draft build...

http://bol.andy-moore.com/

[nutsandbolts]

Here is a tutorial for changing that area on different pages: http://wpsites.net/web-design/display-different-after-header-images-in-beautiful-pro-theme/

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[AMCS]

Thanks - good tutorial. Still doesn't allow clients to change images after launch though...

[AMCS]

I could use something like

remove_action( 'genesis_after_header', 'beautiful_site_header_banner', 5 );

add_image_size( 'featured-banner', 2000, 300, TRUE );

function amcs_featured_img() {
	the_post_thumbnail('featured-banner');
}

add_action( 'genesis_after_header', 'amcs_featured_img', 5 );

to use the featured image to set the banner for each page... (I think)

but is there a way to still use the background image as default for when there is no featured image set?

[AMCS]

For anyone who's interested I solved the problem using the following

// Adding option to use featured image (if it exists)
// in place of background image

remove_action( 'genesis_after_header', 'beautiful_site_header_banner', 5 );

add_image_size( 'featured-banner', 2000, 300, TRUE );

function amcs_featured_img() {
	if ( has_post_thumbnail() )
	the_post_thumbnail('featured-banner');
	else {
	echo '<div class="site-header-banner"></div>';
}}

add_action( 'genesis_after_header', 'amcs_featured_img', 5 );

...partly thanks to the tutorial nutsandbolts referred to above

[giddymoon]

Hi AMCS,

I've tried your code and it works great except that the image is showing above the primary navigation not below.

How would I adjust the php to place the banner image below the primary nav bar?

Thanks!
Linda

[AMCS]

Hi giddymoon

The banner image and the primary nav bar are both pulling from the 'genesis_after_header' hook, so to make the image appear below the nav bar you just need to change the number on the last line of the code there...

So instead of
add_action( 'genesis_after_header', 'amcs_featured_img', 5 );

you have

add_action( 'genesis_after_header', 'amcs_featured_img', 15 );

That should do it 🙂

Andy

[giddymoon]

Hi Andy,

Magic! The new code works beautifully.

Thanks so much.

Linda

[Author]

Posts