Add slider to Decor theme, with corners as background

Community Forums Forums Design Tips and Tricks Add slider to Decor theme, with corners as background

This topic is: resolved

Tagged: ,

This topic contains 5 replies, has 3 voices, and was last updated by  SoZo 2 years, 3 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #16532

    Dorian Speed
    Participant

    I 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!

    #16536

    AC
    Blocked

    It’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.

    #16537

    Dorian Speed
    Participant

    Ack! 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!

    #16538

    SoZo
    Moderator

    The 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

    #16541

    Dorian Speed
    Participant

    That was it! Thanks!


    Bringing websites Up to Speed
    Firebug will light the way to understanding the secrets of the Internet!

    #16543

    SoZo
    Moderator

    You’re welcome :)


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Add slider to Decor theme, with corners as background’ is closed to new replies.