Salsa tip - adding a custom button to your Salsa petition using CSS

Salsa tip - adding a custom button to your Salsa petition using CSS

We get a lot of requests to customize Salsa actions to make them look a little different, so that people can improve the completion rate on their actions or petitions and also stand out from the crowd. The most common thing people want is bigger, more beautiful custom buttons. So here’s a quick tutorial on how to add any custom button you want to your Salsa petition using some grab’n’go CSS and a little PowerThru technology.

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() no-repeat center top;
text-indent: -1000em;
cursor: pointer; /* hand-shaped cursor */
cursor: hand; /* for IE 5.x */

What you need to do is 3 simple steps:

  1. Upload your image somewhere – on your Salsa center, a WordPress site, Flickr, 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  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!

Note if you want to read up on some online organizing theory to make your actions the most effective they can be, read our post about best practices in online advocacy for non-profits and political campaigns. Also be sure to read our guide to using online advocacy to grow your email list.

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