Upload
salsa-labs
View
258
Download
3
Tags:
Embed Size (px)
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?”
Citation preview
USING JQUERY AND CSS TO CUSTOMIZE YOUR SALSA FORMS
Chris Vaughn,
Director of Client Services
• 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:
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>
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>
Syntax for adding JQuery and CSS
CSS JQuery
<style type="text/css">selector {attribute: value;}</style>
<script type="text/javascript">$('selector').function();</script>
Let’s change this Sign Up page
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:
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();
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:”
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
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>
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.
How to test CSS in Firebug
How to test JQuery in Firebug
How to test JQuery in Firebug
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
Now, for some examples..
• 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?
CONTACT INFO
Phone: 866.796.8345
Web: www.salsalabs.com
Email: [email protected]
Twitter: @salsalabs
THANK YOU!