Community Forums › Forums › Archived Forums › Design Tips and Tricks › Add slider to Decor theme, with corners as background
- This topic has 5 replies, 3 voices, and was last updated 10 years, 8 months ago by
SoZo.
-
AuthorPosts
-
January 30, 2013 at 4:13 pm #16532
Dorian Speed
MemberI know I could do this a different way - by making a background image for the slider that included the left-hand and right-hand corners - but I want to figure out how to make this work the way it does for the posts and pages in the Decor theme.
Here's my home.php right now:
<?php /** Add slider wrap */ add_action( 'genesis_before_content', 'decor_start_slider_wrap' ); function decor_start_slider_wrap() { /** Do nothing on page 2 or greater */ if ( get_query_var( 'paged' ) >= 2 ) return; echo '<div class="slider-wrap">'; echo '<div class="left-corner">'; echo '</div>'; echo '<div class="right-corner">'; echo '</div>'; if ( is_active_sidebar( 'home-featured' ) ) { echo '<div class="home-featured">'; dynamic_sidebar( 'home-featured' ); echo '</div><!-- end .home-featured -->'; } echo '</div><!-- end .slider-wrap -->'; } genesis();
which is probably an inelegant way of doing things but does create the div regions for the corners.
When I try to apply the same styling to the corners for the slider-wrap region, though, the corners end up at the top right and left corners of my screen. So I'm thinking I need to tell it "hey, the slider-wrap isn't full-width" but I tried a fixed width of 1140px and that didn't seem to do anything.
Here's the CSS I have right now - which does make the corners show up, just not in the right place:
.page .page .wrap .left-corner, .page .page .wrap .right-corner, .post .wrap .left-corner, .post .wrap .right-corner, .search .page .wrap .left-corner, .search .page .wrap .right-corner, .slider-wrap .left-corner, .slider-wrap .right-corner { height: 47px; position: absolute; top: -8px; width: 47px; } .page .page .wrap .left-corner, .post .wrap .left-corner, .search .page .wrap .left-corner, .slider-wrap .left-corner { background: url(images/left-corner.png) no-repeat; left: -8px; } .page .page .wrap .right-corner, .post .wrap .right-corner, .search .page .wrap .right-corner, .slider-wrap .right-corner { background: url(images/right-corner.png) no-repeat; right: -8px; }
Has anyone had any luck with making something similar work?
Bringing websites Up to Speed
Firebug will light the way to understanding the secrets of the Internet!January 30, 2013 at 4:24 pm #16536Anita
KeymasterIt's really much easier for you to post the URL to your site. We can look at it in Firebug and get the exact location and code.
Love coffee, chocolate and my Bella!
January 30, 2013 at 4:26 pm #16537Dorian Speed
MemberAck! I keep doing that (forgetting the URL, I mean). patgohn.convolare.com
Bringing websites Up to Speed
Firebug will light the way to understanding the secrets of the Internet!January 30, 2013 at 4:27 pm #16538SoZo
MemberThe position property applies the parameters in relation to the next parent container with positioning applied so it sounds like you need to add something like
.slider-wrap { position: relative; }
John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography
January 30, 2013 at 4:32 pm #16541Dorian Speed
MemberThat was it! Thanks!
Bringing websites Up to Speed
Firebug will light the way to understanding the secrets of the Internet!January 30, 2013 at 4:34 pm #16543SoZo
Member -
AuthorPosts
- The topic ‘Add slider to Decor theme, with corners as background’ is closed to new replies.