Community Forums › Forums › Archived Forums › Design Tips and Tricks › Multiple custom backgrounds in Beautiful Pro
Tagged: background image, beautiful pro
- This topic has 7 replies, 3 voices, and was last updated 9 years, 6 months ago by giddymoon.
-
AuthorPosts
-
January 7, 2014 at 10:34 am #83822AMCSMember
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 eithera) 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/January 7, 2014 at 7:29 pm #83931nutsandboltsMemberHere 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+January 8, 2014 at 6:05 am #83963AMCSMemberThanks - good tutorial. Still doesn't allow clients to change images after launch though...
January 8, 2014 at 10:00 am #83999AMCSMemberI 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?
January 9, 2014 at 8:56 am #84167AMCSMemberFor 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
September 3, 2014 at 5:54 pm #122677giddymoonParticipantHi 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!
LindaSeptember 4, 2014 at 4:43 am #122725AMCSMemberHi 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
September 4, 2014 at 7:57 am #122741giddymoonParticipantHi Andy,
Magic! The new code works beautifully.
Thanks so much.
Linda
-
AuthorPosts
- The topic ‘Multiple custom backgrounds in Beautiful Pro’ is closed to new replies.