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 support@salsalabs.com

Questions?

CONTACT INFO

Phone: 866.796.8345

Web: www.salsalabs.com

Email: info@salsalabs.com

Twitter: @salsalabs

THANK YOU!