In This Article:

    Editing the text on optional group names and descriptions

    In This Article:


      Optional group lists in Salsa let your supporters join groups (which can be thought of as email lists in this example) that match their interests.  It's also a good way to attract supporters that may be on the fence, since a group can have both a name and a description to explain the nature of the group.

      However, when optional groups are displayed in Salsa, there's not a way to use CSS to decorate the two elements, name and description, differently from each other. This article shows how that can be done.


      Campaign managers that modify HTML/CSS in pages and templates.



       Salsa lets you configure optional groups on various pages.  Here's a sample of some optional groups from a signup page:

      Sample of optional groups from a signup age.\

      If you view the source for a page with optional groups, you'll find that the name and description are not separated in the code. Those parts cannot be divided to decorate or change separately:

      Source showing that optional groups are a long, indivisible string.


      The solution is to change the HTML so that the name and the description are two separate HTML entities. When that is done, then they can be decorated separately:

      Sample of HTML for optional groups that have separate names and descriptions.


      The solution is to add some Javascript and some CSS to your page so that the names and descriptions in optional groups can be decorated separately. This article presumes that the optional groups appear in a signup page, so you'll see that the steps are aimed that way. If you have trouble adapting these steps to another type of Salsa page, then please contact Salsa Support, and we'll be glad to help out.

      • Edit the signup page.
      • Navigate to the "Other Text" tab.
      • Copy this text:
      <script type="text/javascript">
      $(function() {
      // SalsaStaff 76322: Split group labels into a name span and a description span
      // These can be decorated using CSS.
      $('label[for^=add_to_groups]').each(function() {
      var t = $(this).text().replace(RegExp("[\n\r]+"), '');
      var m = t.split(' - ');
      if (m.length == 2) {
      $(this).html('<span class="group-name">' + m[0].trim() + '</span>'
      + ' - '
      + '<span class="group-description">' + m[1].trim() + '</span>');
      • Paste the text in the bottom of the "Pre Submit Footer" field.
      • Save the page.
      • Test your page to ensure the CSS classes are now appearing.

      Now the name and description can be decorated separately using CSS for the .group-name and .group-description classes.  For example, to get the red description shown above, you can use CSS like this:

      <style type="text/css">
      .group-name {
      width: 200px,
      font-weight: bold
      .group-description {
      color: #FF2400;


      Using some Javascript and your own CSS, you can change optional groups to make them more attractive, eye-catching and effective.  If you find that using this idea is not to your liking, or you have some other things you'd like to do, then please get in touch with your Salsa Account Manager, and discuss your ideas.  If you need help getting in touch with your Account manager, then email Salsa Support, and we'll be glad to help out.

      Was this article helpful?
      1 out of 1 found this helpful
      Have more questions? Submit a request



      Please sign in to leave a comment.