Jump to content
Sign in to follow this  
pmurphy

Replacing Pricing Col Button With Image

Recommended Posts

pmurphy

I'm using the Pricing Columns plugin here: http://www.synctasksoftware.com/pricing-test/ I'd like to replace the button (says Sign Up) with an image located here: buynow.png I tried css setting the button background to the image but the Sign Up span occurs on top of it and the hover image covers it. Can someone give me some custom CSS to put in my custom code section to have my button image show up (in default state and hover state) in place of the default button? Thanks! Phil

Share this post


Link to post
Share on other sites
Jenny
To help you change the image, here is the current CSS: Button, normal style: [code]#pagelines-pricing .action-link { background: url("images/bg-action-link.png") repeat-x scroll 0 0 #DDDDDD; border: 1px solid #CCCCCC; box-shadow: 0 1px 3px #DDDDDD; color: #777777; }[/code] Button, hover: [code]input[type="submit"]:hover, .submit:hover, input[type="button"]:hover, .button:hover, a.button:hover, input[type="reset"]:hover, .reset:hover { background: -moz-linear-gradient(center top , #F3F3F3 0%, #CFCFCF 100%) repeat scroll 0 0 transparent; border: 1px solid #AEAEAE; color: #000000; text-decoration: none; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); }[/code]

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
pmurphy
Thanks Jenny. This is what I came up with in the meantime: [code].pcol-link a.button{ background-image:url('/images/buynowsmall.png'); background-repeat:no-repeat; background-color:#ffffff; box-shadow:0px 0px 0px 0px #ffffff; border:0; } .pcol-link a.button span.action-link-pad{ background-image:url('/images/buynowsmall.png'); background-color:#ffffff; opacity: 0; }[/code] Would you suggest a different way to not show the text span that shows by default? Is there a function or something whereby I could null out the text span? Thanks!

Share this post


Link to post
Share on other sites
Jenny
Instead of having text there, can you just enter a space? If it needs html code, use [code] [/code]

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×