using css and j query to customize your salsa forms
DESCRIPTION
You don't have to be a coding ninja to make changes to Salsa pages. In this workshop, you’ll learn just how easy it is to use CSS or JQuery to make a form look and act the way you want. You might leave asking yourself, “Who knew that super awesome thing took only 5 lines of simple code?”TRANSCRIPT
![Page 1: Using css and j query to customize your salsa forms](https://reader036.vdocuments.us/reader036/viewer/2022062513/554ed70fb4c905d1158b4703/html5/thumbnails/1.jpg)
![Page 2: Using css and j query to customize your salsa forms](https://reader036.vdocuments.us/reader036/viewer/2022062513/554ed70fb4c905d1158b4703/html5/thumbnails/2.jpg)
USING JQUERY AND CSS TO CUSTOMIZE YOUR SALSA FORMS
Chris Vaughn,
Director of Client Services
![Page 3: Using css and j query to customize your salsa forms](https://reader036.vdocuments.us/reader036/viewer/2022062513/554ed70fb4c905d1158b4703/html5/thumbnails/3.jpg)
• Understand the basics of CSS and JQuery, including when and how to use them on a webpage
• Create and test your own CSS or JQuery on a Salsa form using Firebug, Firefox’s dev tool
• Execute some cool modifications to a Salsa donation page or, if you prefer, on all your pages in Salsa
Learning objectives
By the conclusion of this session, participants will be able to:
![Page 4: Using css and j query to customize your salsa forms](https://reader036.vdocuments.us/reader036/viewer/2022062513/554ed70fb4c905d1158b4703/html5/thumbnails/4.jpg)
Demystifying techno-speak: CSS
CSS stands for "Cascading Style Sheets". It is a markup language that allows web designers to change the styling of HTML. It's what gives an item on the page its look and feel--for instance, making a paragraph red or a certain width.
<p>This is a boring block of text.</p>
V.
<p> I’m in Arial, maroon, and center aligned</p>
<style type=“text/css”>p {font-family: Arial;color: #800000text-align: center;}</style>
![Page 5: Using css and j query to customize your salsa forms](https://reader036.vdocuments.us/reader036/viewer/2022062513/554ed70fb4c905d1158b4703/html5/thumbnails/5.jpg)
Demystifying techno-speak: JQuery
JQuery is a javascript library that is commonly used across the web. Javascript is a scripting language that tells your browser how to sing and dance. JQuery is designed to make writing javascript easier.
Salsa pages allow you to use JQuery (version 1.3.2)
V.
<script type=“text/javascript”>$('#add_to_groups_KEY123246_checkbox').attr('checked','checked‘);</script>
![Page 6: Using css and j query to customize your salsa forms](https://reader036.vdocuments.us/reader036/viewer/2022062513/554ed70fb4c905d1158b4703/html5/thumbnails/6.jpg)
Syntax for adding JQuery and CSS
CSS JQuery
<style type="text/css">selector {attribute: value;}</style>
<script type="text/javascript">$('selector').function();</script>
![Page 7: Using css and j query to customize your salsa forms](https://reader036.vdocuments.us/reader036/viewer/2022062513/554ed70fb4c905d1158b4703/html5/thumbnails/7.jpg)
Let’s change this Sign Up page
![Page 8: Using css and j query to customize your salsa forms](https://reader036.vdocuments.us/reader036/viewer/2022062513/554ed70fb4c905d1158b4703/html5/thumbnails/8.jpg)
Key is to use the right selector
Selectors are patterns used to select the element(s) you want to style. Let’s say I want to change the font of this line on a sign up page.
<div id="salsa-optional-groups-header" class="salsa-checklist-header">Add me to the following list(s):</div>
Here’s the HTML:
![Page 9: Using css and j query to customize your salsa forms](https://reader036.vdocuments.us/reader036/viewer/2022062513/554ed70fb4c905d1158b4703/html5/thumbnails/9.jpg)
Look for “id” or “class” in the HTML
Both CSS and JQuery use almost exactly the same selectors. So, you can use them interchangeably.
Id=“foo” class=“foo”This should only appear once in the HTML so the CSS or Jquery you use will apply to just that one object.
Use a “#” before the selector:
CSS: #foo {color: red;}Jquery: $(‘#foo’).function();
This will appear possibly multiple times in the HTML, so the CSS or Jquery you use will apply to all.
Use a “.” before the selector:
CSS: .foo {color: red;}Jquery: $(‘.foo’).function();
![Page 10: Using css and j query to customize your salsa forms](https://reader036.vdocuments.us/reader036/viewer/2022062513/554ed70fb4c905d1158b4703/html5/thumbnails/10.jpg)
Now going back to our example…
<div id="salsa-optional-groups-header" class="salsa-checklist-header">Add me to the following list(s):</div>
Here’s the HTML:
I can use CSS to change the color to blue and use Jquery to replace the text to “Please subscribe me to:”
![Page 11: Using css and j query to customize your salsa forms](https://reader036.vdocuments.us/reader036/viewer/2022062513/554ed70fb4c905d1158b4703/html5/thumbnails/11.jpg)
CSS Order and Precedence
CSS styles are applied in a particular order, some of which take precedence over styles applied to the same item. This matters if you’re going to try to override something that Salsa is adding to the form.
<div id="salsa-optional-groups-header" class="salsa-checklist-header">Add me to the following list(s):</div>
-Rule of Thumb: The more specific your selector is, the higher the precedence:#salsa .salsa-checklist-header > .salsa-checklist-header
-Rule of Thumb: Id’s are the most specific selector, so if you want to be sure you’re going to change something, use an Id over a class:#salsa-optional-groups-header > .salsa-checklist-header
![Page 12: Using css and j query to customize your salsa forms](https://reader036.vdocuments.us/reader036/viewer/2022062513/554ed70fb4c905d1158b4703/html5/thumbnails/12.jpg)
Code for changing group header
CSS JQuery
<style type="text/css">#salsa-optional-groups-header {color: #0000FF;}</style>
<script type="text/javascript">$('#salsa-optional-groups-header').text('Please subscribe me to:');</script>
![Page 13: Using css and j query to customize your salsa forms](https://reader036.vdocuments.us/reader036/viewer/2022062513/554ed70fb4c905d1158b4703/html5/thumbnails/13.jpg)
Here’s the Results….
Using Firebug or Chrome’s Dev Tools, you can modify CSS directly on the page or you can test your Jquery using the Console option.
![Page 14: Using css and j query to customize your salsa forms](https://reader036.vdocuments.us/reader036/viewer/2022062513/554ed70fb4c905d1158b4703/html5/thumbnails/14.jpg)
How to test CSS in Firebug
![Page 15: Using css and j query to customize your salsa forms](https://reader036.vdocuments.us/reader036/viewer/2022062513/554ed70fb4c905d1158b4703/html5/thumbnails/15.jpg)
How to test JQuery in Firebug
![Page 16: Using css and j query to customize your salsa forms](https://reader036.vdocuments.us/reader036/viewer/2022062513/554ed70fb4c905d1158b4703/html5/thumbnails/16.jpg)
How to test JQuery in Firebug
![Page 17: Using css and j query to customize your salsa forms](https://reader036.vdocuments.us/reader036/viewer/2022062513/554ed70fb4c905d1158b4703/html5/thumbnails/17.jpg)
This is just a test. To make it stick…
In your Web Template for all Pages Source of a Text Field for a single page
![Page 18: Using css and j query to customize your salsa forms](https://reader036.vdocuments.us/reader036/viewer/2022062513/554ed70fb4c905d1158b4703/html5/thumbnails/18.jpg)
Now, for some examples..
![Page 19: Using css and j query to customize your salsa forms](https://reader036.vdocuments.us/reader036/viewer/2022062513/554ed70fb4c905d1158b4703/html5/thumbnails/19.jpg)
• Check out Salsa Commons at help.salsalabs.com• CSS and Jquery in Salsa:• https://help.salsalabs.com/entries/21516444-jQuery-in-tem
plates• https://help.salsalabs.com/entries/23149852-CSS-Tips-and
-Tricks• Snippets from Salsa Staff:• https://help.salsalabs.com/forums/21473267-Salsa-Solutio
ns• Or, send us a an email at [email protected]
Questions?
![Page 20: Using css and j query to customize your salsa forms](https://reader036.vdocuments.us/reader036/viewer/2022062513/554ed70fb4c905d1158b4703/html5/thumbnails/20.jpg)
CONTACT INFO
Phone: 866.796.8345
Web: www.salsalabs.com
Email: [email protected]
Twitter: @salsalabs
![Page 21: Using css and j query to customize your salsa forms](https://reader036.vdocuments.us/reader036/viewer/2022062513/554ed70fb4c905d1158b4703/html5/thumbnails/21.jpg)
THANK YOU!