December 15, 2012 at 8:59 am #5402
There is one element I was wondering about -- in one of my client sites http://www.thejewelboxonline.com that I am currently developing -- I want a background image to be included [that fills 100% width of the viewable screen] where the CONTENT starts - ie: below where the slider stops on the home page and below the top nav on any inner page.
There doesn't seem to be a full width DIV in the code at this point so can I insert a call to a CSS style [a DIV] using the GENESIS SIMPLE HOOKS and the box for genesis_before_content_sidebar_wrap ?
Am I able to add a 100% width DIV in there that will allow me to place a background image in there that will run from that point down to the footer?
How do I add that code there in the genesis_before_content_sidebar_wrap box?
Or is there some other way to do it?
PhilDecember 18, 2012 at 12:23 pm #5964
Here's how I'd do it:
1. Move the .page-title box outside of #inner, to just below the header. I don't have your theme code so I'm not sure exactly what it looks like (and I'm not doing all the work for you 🙂 ), but it would be something like this:
remove_action( 'genesis_before_content_sidebar_wrap', 'page_title_area' );
add_action( 'genesis_after_header', 'page_title_area' );
2. Since you've moved it outside of #inner .wrap, you'll need to modify the function so it has its own wrap. Hop into the function responsible for the page title area, and add <div class="wrap"> at the top and </div> at the bottom (you could also add this inside the .page-title div, but then you might need to modify some styles since right now it's expecting the .page-title to be inside a wrap)
3. Now the content is the first thing inside of #inner, so apply your full width styling to #inner.December 18, 2012 at 12:30 pm #5967
I think a couple of CSS changes will do the trick. For starters, you'll want to remove the background color from your main #wrap
background: url("images/bg.png") repeat-x scroll 0 0 #FFFFFF; //Just get rid of the #FFF
That'll free you up to use another background for your #inner.
Add your custom background image to your #inner tag and set the overflow to hidden, like this:
December 18, 2012 at 2:43 pm #5992
Can you just add a background image to #content-sidebar-wrap?
SelenaDecember 18, 2012 at 3:11 pm #5996
Sorry - I reread your post - what I suggested won't give you 100% width. In which case I think Bill is right and you have to move your slider in the functions file.December 19, 2012 at 4:26 pm #6267
Thanks Bill, Selena, Carrie
i am going to try out these options to see which one works best
You must be logged in to reply to this topic.