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 1 year, 10 months ago.

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

    Dorian Speed
    Participant
    Post count: 140

    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]
    <?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();
    [/php]
    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:
    [css]
    .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;
    }
    [/css]

    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
    Post count: 7712

    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
    Post count: 140

    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
    Post count: 1573

    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
    Post count: 140

    That was it! Thanks!


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

    #16543

    SoZo
    Moderator
    Post count: 1573

    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.