Add slider to Decor theme, with corners as background

[Dorian Speed]

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!

[Anita]

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.

---

Love coffee, chocolate and my Bella!

[Dorian Speed]

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!

[SoZo]

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

[Dorian Speed]

That was it! Thanks!

---

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

[SoZo]

You're welcome 🙂

---

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

[Author]

Posts