Add slider to Decor theme, with corners as background

[Dorian SpeedParticipant Post count: 100]

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?

---

Web designer and avoider of chores.
Bringing websites Up to Speed! Follow me on Twitter!

[anitacModerator Post count: 2702]

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.

---

Twitter Handles: @thecre8tivediva | Website: Cre8tiveDiva.com | LinkedIn Group: http://goo.gl/nNe1m
Why Not Take The Challenge! – Help us answer some of the unanswered posts

[Dorian SpeedParticipant Post count: 100]

Ack! I keep doing that (forgetting the URL, I mean). patgohn.convolare.com

---

Web designer and avoider of chores.
Bringing websites Up to Speed! Follow me on Twitter!

[SoZoModerator 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

[Dorian SpeedParticipant Post count: 100]

That was it! Thanks!

---

Web designer and avoider of chores.
Bringing websites Up to Speed! Follow me on Twitter!

[SoZoModerator Post count: 1573]

You’re welcome

---

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

[Author]

Posts