Adding a "sliding doors" button to Wordpress theme

This might be complicated, I’m not sure.

Just trying to figure out what the hell to do here. It might help if you visit my site:

www.lushwebsites.com

I want a big SIGN UP button to show up IN the featured area and have the button stay in place even when the slide changes.

I think there is something in the CSS now that is preventing a button from even showing up.

I am following this tutorial for sliding buttons:

http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html

Can someone just tell me if this is going to be possible or just a total nightmare messing with the CSS?

Thanks

Here is the relevant CSS code, can someone tell me what I need to change for it to allow images/links to show up? As of now when I place a link, it just shows up as reg text.


#featured-area, #pagetop { background-color: #215b87; height: 418px; }
	#featured-area .container, #pagetop .container { background: url(images/featured-bg.jpg) no-repeat top left; position: relative; }
		
		#pagetop { height: 153px; }
			#pagetop .container { padding: 0px 30px; width: 900px; }
				#pagetop h1 { font-size: 48px !important; padding: 34px 0px 15px !important; text-transform: none !important; }
				#pagetop a { color:#1A3C56; }
				
		#breadcrumbs { color: #737272; font-style: italic; font-family: Georgia, sans-serif; padding: 25px 0px; background: #dfdfdf; border-top: 1px solid #fcfcfc; }
			#breadcrumbs .container { padding-left: 30px; width: 930px; }
		
		#header #search-form { position: absolute; bottom: -44px; right: -1px; background: url(images/search-bar.png) no-repeat; height:33px; padding:0px 10px 0 12px; width:170px; z-index:3; display: none; }
			#header #search-form input { background: none; border: none; font-family:Georgia,serif; font-size:12px; font-style: italic; color: #aad0ef; width: 165px; }
		
		.featitem { margin: 42px 90px 0 74px; width: 790px; }
			h2.feat-heading, #pagetop h1 { font-size: 60px; color: #ffffff; text-shadow: 1px 2px 2px #15588a; padding-bottom: 18px; text-transform: none; }
			#featured-slider { width: 960px !important; height: 417px; }
			
			#featured-slider p.tagline, #pagetop p.tagline { text-transform: uppercase; font-weight: bold; font-size: 14px; color: #1a3c56; text-shadow: 0px 1px 1px #5fa3ce; padding-bottom: 14px; }
			#featured-slider div.excerpt { color: #ffffff; text-shadow: 1px 2px 2px #0B4875; float: left; width: 415px; }
			#featured-slider p.tagline, #featured-slider div.excerpt { margin-left: 10px; }
			
			#featured-slider a.readmore { color: #ffffff; background: url(images/featured-readmore-right.png) no-repeat top right; display: block; height: 44px; padding-right: 20px; line-height: 38px; float: right; font-weight: bold; font-size: 14px; text-shadow: 1px 1px 1px #a45e00; margin-top: 18px; }
				#featured-slider a.readmore span { display: block; background: url(images/featured-readmore-left.png) no-repeat; padding: 0px 6px 7px 40px; }
			
			
			#featured-slider img.thumb { float: right; }
			
			a#prevlink, a#nextlink { position: absolute; top: 174px; display: block; text-indent: -9999px; width: 56px; height: 69px; }
			a#prevlink { left: 0px; background: url(images/prevlink.png) no-repeat; }
			a#nextlink { right: 0px; background: url(images/nextlink.png) no-repeat; }
			
#featured-thumbs { background: #dfdfdf; border-top: 1px solid #fcfcfc; min-height: 68px; }
	#featured-thumbs .container { padding: 20px 0px 20px 53px; width: 907px; }
	#featured-thumbs img { float: left; margin-left: 30px; padding: 4px; background: #ffffff url(images/thumb-bg.png); border: 1px dashed #b0b0b0;  -moz-box-shadow: #c2c2c2 4px 4px 5px; -webkit-box-shadow: #c2c2c2 4px 4px 5px; }
		
	#featured-thumbs img.hover { border: none; margin: 1px 1px 0px 31px; }
	
	#featured-thumbs div#active_item { background: url(images/activethumb.png) no-repeat; width: 28px; height: 14px; position: absolute; top: -1px; left: 108px ; }
	
	.thumb_popup { display: none; background: url(images/popup-bottom.png) no-repeat bottom left; left:52px; position:absolute; bottom:97px; width:239px; z-index:11; font-family: Georgia, serif; padding: 0px 0px 31px; }
		.thumb_popup p { color: #9d9c9c; font-style: italic; background: #ffffff; padding: 0px 25px 14px; }
		.thumb_popup p.heading { color: #313131; font-size: 18px; font-style: normal; padding: 15px 25px 8px; }

And here is some relevant source code:



</div> <!-- end #header -->

	

		



<div id="featured-area">

	<div class="container clearfix">		

		<div id="featured-slider">

			

						

				<div class="featitem clearfix">

					<h2 class="feat-heading">Websites for $20/month</h2>

					<p class="tagline">No startup costs or contracts and a 30 day money back guarantee.</p>					

					<div class="excerpt">

						<p>We create custom websites that are not only beautiful and elegant, but are also incredibly easy to update and to manage.
Evertything you need to get started for only $20/month.
 
</p>

		

					</div> <!-- end .excerpt -->

					

					<a href="http://www.lushwebsites.com/professional-websites-for-25month/" title="Permanent Link to Websites for $20/month">

						<img width="330" height="220" src="http://www.lushwebsites.com/wp-content/uploads/2010/12/sites4-330x220.png" class="thumb wp-post-image" alt="Websites for $20/month" title="No startup costs or contracts and a 30 day money back guarantee." />					</a>

				</div> <!-- end .featitem -->

				

						

				<div class="featitem clearfix">

					<h2 class="feat-heading">No Setup Fee</h2>

					<p class="tagline">Avoid the steep fees normally associated with web design.</p>					

					<div class="excerpt">

						<p>Hiring a typical web designer can cost you thousands of dollars.  Hire us to save money and save time.  We will have your site up within a week.
</p>

		

					</div> <!-- end .excerpt -->

					

					<a href="http://www.lushwebsites.com/no-setup-fees/" title="Permanent Link to No Setup Fee">

						<img width="160" height="178" src="http://www.lushwebsites.com/wp-content/uploads/2010/12/Coding.png" class="thumb wp-post-image" alt="No Setup Fee" title="Avoid the steep fees normally associated with web design." />					</a>

				</div> <!-- end .featitem -->

												

		</div> <!-- div #featured-slider -->

		

		<a id="prevlink" href="#">Previous</a>

		<a id="nextlink" href="#">Next</a>	

	

</div> <!-- end .container -->



</div> <!-- end #featured-area -->





<div id="featured-thumbs">


Considering we don’t know how the javascript works, it’s possible to break the slider’s functionality.

But if it didn’t break the functionality, it shouldn’t be that hard.

add a

<div id="sign-up">Sign up</div>

inside of the div#featured-area div#container

Then style the button however you want. To remove it from the flow, you can float it or absolutely position it.


div#sign-up {
  position: absolute;
  top: 20px;
  right: 20px;

 /* Do whatever else you wanted to do here */
  width: /* */;
  height: /* */;
  background: /* */;
}

I thought I would test one out on a dummy site first,

but it doesn’t seem to be working… What’s wrong with this code?

www.pokerdrawings.com


<div class="clear">
<a href="/signup" class="button"><span>Sign Up</span></a>
</div>

and in CSS



.clear { /* generic container (i.e. div) for floating buttons */
    overflow: hidden;
    width: 100%;
}

a.button {
    background: transparent url('bg_button_a.jpg') no-repeat scroll top right;
    color: #444;
    display: block;
    float: left;
    font: normal 12px arial, sans-serif;
    height: 46px;
    margin-right: 6px;
    padding-right: 18px; /* sliding doors padding */
    text-decoration: none;
}

a.button span {
    background: transparent url('bg_button_span.jpg') no-repeat;
    display: block;
    line-height: 36px;
    padding: 5px 0 5px 18px;
}

a.button:active {
    background-position: bottom right;
    color: #000;
    outline: none; /* hide dotted outline in Firefox */
}

a.button:active span {
    background-position: bottom left;
    padding: 6px 0 4px 18px; /* push text down 1px */
}

I realize this is probably some total fundamental mistake, I’m just starting so I don’t really know sh**. Ie, I just learned what a class and id were yesterday, but I’m a quick learner… Have mostly just edited CSS, never wrote it from scratch…

Hmm, where did you place that HTML code?

Is there like a quick MS Paint ugly painting of what you want to see / where you want it to be?

Floating an anchor block link inside of a width: 100% div is going to make what looks like a button inside of a banner.

Since the div isn’t removed from the flow of the document, it’s going to screw with the layout of the rest of your elements.

Here’s a rough idea of what I’d like on my actual site.

on the other site (pokerdrawings.com) I just placed the code within the HTML portion of a wordpress post. Probably not right but I didn’'t know where else to put it.

Thanks so much for your help, I’m always kind of shocked when people take time to help others with this stuff, seems like you could be busy enough with your own crap…

lol I am busy enough with my own crap, I just a) enjoy helping people, b) learn more about CSS by teaching and doing, c) just enjoy css/design/puzzles.

I have to do some work now, but I will definitely come back and try to help some more.

So I’m unsure of what you have access to to change your design.

Ideally, you want to place something like


<div id="featured-area">
	<div class="container clearfix">		
		<!-- everything else that's already in the HTML -->

          <a id="sign-up"><span>Sign Up</span></a>
     </div> <!-- end .container -->
</div> <!-- end #featured-area -->

Then style it with


#sign-up {
		position: absolute;
		bottom: 20%;
		left: 10%;
		z-index: 7;
		
		display: block;
		padding: 10px;
		
		background: #efefef;
		
		font-size: 175%;
		line-height: 1.5em;
		color: #ADC1A8;
		
                -webkit-border-radius: 5px;
		-moz-border-radius: 5px;
                border-radius: 5px;
	}

Of course you can remove the border-radius, and use the sliding doors technique.
The above code should get you positioning & basic coloring.

you’re a smart son of a…

That placement is perfect. I’ll work on the sliding doors now, likely might have another issue.

Thanks again

Ok here’s what I have:



</div> <!-- div #featured-slider -->
		
		<a id="prevlink" href="#"><?php _e('Previous','TheCorporation'); ?></a>
		<a id="nextlink" href="#"><?php _e('Next','TheCorporation'); ?></a>	
<a id="sign-up" class="button"><span>Sign Up</span></a>
	
</div> <!-- end .container -->

</div> <!-- end #featured-area -->


And CSS:



/*------------------------------------------------*/
/*-------------------[custom]------------------*/
/*------------------------------------------------*/

#sign-up {
        position: absolute;
        bottom: 20%;
        left: 10%;
        z-index: 7;
        
        display: block;
        padding: 10px;
        
        background: #efefef;
        
        font-size: 175%;
        line-height: 1.5em;
        color: #ADC1A8;
        
                -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
                border-radius: 5px;

a.button {
	background: url(http://www.lushwebsites.com/wp-content/uploads/2010/12/signup.jpg) no-repeat 0 0;
	width: 166px;
	height: 191px;
	display: block;
	text-indent: -9999px;
background-position: 0 -126px;
}

a.button:hover { background-position: 0 -63px; }

a.button:active { background-position: 0 0px; }


What am I doing wrong? What do I need to change? Button is all in one image, no text link, just image link.

Thanks!!

I had time to look at your code.

1st) remove everything from #sign-up except for the positioning


#sign-up {
        position: absolute;
        bottom: 20%;
        left: 10%;
        z-index: 7;
        
        display: block;
}

2nd) You need to change the height of your .button. You currently have it set to width: 166px, height: 191px, but the physical buttons themselves are only 166px by 63px. If you want to make the effect, you have to make the element be only the size of the physical button, not the whole sprite.

You also need to tweak the background-positioning


a.button {
	background: url(http://www.lushwebsites.com/wp-content/uploads/2010/12/signup.jpg) no-repeat 0 0;
	width: 166px;
	height: 63px;
	display: block;
	text-indent: -9999px;
	background-position: 0 -127px;
}

3rd) Tweak the background positioning for the :hover and :active events to make only the correct button show. This part is mostly guess and check work with firebug.


a.button:hover { background-position: 0 -65px; }

a.button:active { background-position: 0 -2px; }

And there is your sign-up button!

Also, you started this thread talking about sliding doors technique. You ended up using CSS sprites :slight_smile:

Because of this, you can remove the inside span from your <a id="sign-up></a>

Listen, before today I didn’t know that sliding doors was anything other than a gwyneth paltrow movie and that sprite didn’t just mean a little faerie creature.

Thank you SO much. Really, thanks.

hahaha! No problem. I am always happy to help someone who seems to be interested, vested, and willing/able to learn vs regurgitate.

I don’t think sliding doors technique and CSS sprites are mutually exclusive! :slight_smile:

But, what puzzles me is, that for a “professional design” site… things are a bit strange. Who havean’t heard about the sliding-doors or about sprites but designs a site for a professional design business?

Also, in IE8 you’ll get a horizontal scrollbar with an ugly overflow to the right of the page, due to the shifting of images in the slide.

And this second “Sign up” button: “Get started” should have a proper text in it, instead of “&gt”.

The accesibility is suffering also.

Again, it puzzles me: how can a site like this offer professional design services? Since the front site for the services looks and loads like… a son of a… :slight_smile: I’m sorry, I don’t mean to offend anybody, it’s just that it doesn’t sit well with me. It’s an honest question.