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, 7 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

    Anita
    Participant
    Post count: 7562

    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.


    When asking for help, please provide a link or screen shot showing your problem!
    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me!

    #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.