PowerThru Consulting » CSS http://powerthruconsulting.com Sat, 18 May 2013 01:48:43 +0000 en-US hourly 1 http://wordpress.org/?v=3.5.1 Adding a custom button to your Salsa petition using CSS http://powerthruconsulting.com/blog/adding-a-custom-button-to-your-salsa-petition-using-css/ http://powerthruconsulting.com/blog/adding-a-custom-button-to-your-salsa-petition-using-css/#comments Fri, 01 Jul 2011 02:36:04 +0000 Drew http://wp.powerthruconsulting.com/?p=194 We get a lot of requests to make Salsa actions look a little different. And the most common thing people want, is bigger, more beautiful buttons. So here's a quick tutorial on how to add any button you want to your salsa petition using some grab and go CSS and a little PowerThru trick.

The post Adding a custom button to your Salsa petition using CSS appeared first on PowerThru Consulting.

]]> We get a lot of requests to make Salsa actions look a little different. And the most common thing people want is bigger, more beautiful buttons. So here’s a quick tutorial on how to add any button you want to your Salsa petition using some grab’n'go CSS and a little PowerThru technology.

Unable to display content. Adobe Flash is required.

Here’s the CSS code you need (pay special attention to the parts in italics):

<style type=”text/css”>
#submitSignPetition {
width: 235px;
height: 90px;
margin: 0;
padding: 0;
border: 0;
background: transparent url(http://www.theurlofyourphotohere.jpg) no-repeat center top;
text-indent: -1000em;
cursor: pointer; /* hand-shaped cursor */
cursor: hand; /* for IE 5.x */
}
</style>

What you need to do is 3 simple steps:

  1. Upload your image somewhere – on your Salsa center, a WordPress site, Flikr, wherever. Just put the image online and copy the link.
    1. Also make a note of your image’s dimensions (width and height) because you’ll need that in step 3.
  2. Copy and paste the sample CSS code above into the source view of the first tab of your action (the one called “petition information”) Make sure you are looking at the “source” view when you do this and make sure you copy the intro and exit tags <style type=”text/css”> and </style>
  3. Replace the URL http://www.theurlofyourphotohere.jpg with the URL of your button from step 1. Then replace the width and height with the correct dimensions of your button from 1.1

That’s it!

 

Have more questions or need help making this happen for your organization? Contact PowerThru today!

The post Adding a custom button to your Salsa petition using CSS appeared first on PowerThru Consulting.

]]> http://powerthruconsulting.com/blog/adding-a-custom-button-to-your-salsa-petition-using-css/feed/ 0