In This Article:

    Web Templates

    In This Article:

      Overview

      When to use it

      Webpage templates are used to wrap the content you create in Salsa with your own site's images, menus, buttons, and general look-and-feel. While the level of automation available in a template file is limited to Javascript (or another client side scripting language), you can essentially include anything in a web template that you could otherwise put in a webpage anywhere on the Internet.

      How to get there

      The ability to create templates is found in the Website Package under Templates:

      Temp3.png

      Building a Template from Scratch

      Salsa makes creating templates easy with the Template Extractor tool. However, if you know HTML and CSS you might want to build a template from scratch. You can either write content directly into the textarea, or copy and paste HTML from your favorite editor such as Dreamweaver.

      Click the button and select the create your own option.

      template10.png

      A Salsa template is essentially a standard HTML document and can include links to files, images, scripts and forms. It must have two specific codes to indicate where the content of pages you create in Salsa will be placed.

      <!-- TemplateBeginEditable name="content" --> <!-- TemplateEndEditable -->

      As a sample of where the content tags go, this would apply a template to a page without any styling:

      temp11.png

      Create a Basic Web Template from a Banner Image

      To create a basic web template, all you need is a 700x100-pixel banner image in .png, .jpg, or .gif format.

      1. Upload your banner image to your Salsa account under website management -> images and files and copy the URL of the uploaded image, as described here.

      2. Click the button and then choose the Select from template library option.

      temp12.png

      3. Enter an internal reference name for the template and click .

      temp13.png

      4. Banner text will placed over your banner image (optional), Banner Redirect will link out to an external URL if the banner is clicked (optional), Banner Image will be the image you uploaded in step 1 of this process. Click to get to the last step of this process.

      template14.png

      5. Simply click the button on this last tab to finish the process.

      temp15.png

      Editing a template

      Here are some steps that you can use if you need to edit a template:

      1. Navigate to the Templates section of Website Management.

      Temp3.png

      1. Choose the template from the array of templates, then click the Edit link just above the thumbnail:
      2015-06-18_1111.png
      1. When the template window opens, you should see HTML like this:

      2015-06-18_1129.png

      1. If there's not a window of HTML, then the best way to edit the template is to copy it, then make your changes to the copy. Please click here to learn more about copying a template.

      Template Tips

      Adding your own CSS, with styles specific to the Salsa tools, is very powerful in making your pages custom. Add a style sheet to your template via HTML, using either this method:

      <style type="text/css">your css code here</style>

      or this method:

       <link rel="stylesheet" type="text/css" href="URL of your stylesheet">

      When thinking about styling Salsa pages it's important to keep a few things in mind. Salsa adds its own style sheet directly before it adds the HTML for its tools, meaning these are the last styles in your document. To override Salsa styles you'll need to make use of the Specificity Rules of CSS. Since Salsa styles come last, you'll need to be more specific with your selectors then Salsa is. An easy way to do this is to simply add 'body' as the starting selector to selectors used on Salsa styles. This will add one point of specificity to your selector, and that's all you need.

      The more you know about CSS, the more power you'll have to radically change the default layout of the Salsa tools. If you don't know CSS or need to freshen up, we highly recommend HTMLDog as it has clear guides and an attention to doing things the valid way.

      Applying Templates

      The template builder is not the section of Salsa where you'll actually affiliate particular templates with particular pages. In general, any Salsa page you create will give you the option to assign that page a specific template.

      Salsa pages will use your Default template unless specified. Click the button to change your template:

      temp17.png

      Once the publishing tools are expanded click the Change link next to the currently template:

      Temp16.png

      Once you click the link to change the template, select the template you want to use by clicking on the preview image. The image will then have a red border. Then click the button to apply the template.

      temp18.png

      Template Best Practices

      DOCTYPE declarations

      Your templates should begin with a doctype declaration, which informs browsers how to render the page it is loading. The doctype declaration should be the very first line of code in your template.

      For web template purposes you can use this code (if you are familiar with doctypes, you are welcome to utilize others):

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

      Frames

      While technically you can force Salsa to work on a website built with Frames, the Template Generator tool cannot parse a site with frames. The bottom line is that if your site uses frames, you'll be happiest reworking your layout to work without them. We don't provide template support for templates that use frames.

      Forms

      Salsa works fine in a template with forms, provided the forms are properly closed. A malformed form in your template will interfere with the forms of Salsa's tools.

      Relative links and the <base> tag

      Salsa will not work with a template that uses relative links. The reason for this is that when you use Salsa, your pages will not be in your existing document structure; they won't be in the right place to be relative.

      Similarly the <base> tag, which specifies the base url to which relative links should be mapped, will misroute Salsa features' relative links. Luckily, the Template Generator will convert your relative links to absolute links for you - but for troubleshooting purposes, and especially when creating from scratch, this is something to watch out for.

      Secure Templates

      Salsa’s pages are “secure”—meaning that transactions are made through an encrypted connection. However, browsers will display a warning or an icon to caution users when they visit a secure page that contains non-secure elements, such as an image or stylesheet residing at an address beginning with http://, rather than https://. You don't have to worry about links, only images, videos, or files that are used to render the page itself.

      More often than not, the image or stylesheet is being called to the donation page by your template. The templates section of your Salsa HQs (found in the Website Management tab) provides the option to "Download Template" – this one-click option will often handle the problem in one stroke.

      "Download Template" takes a Salsa template that you've created, stores the images and stylesheets in Salsa's directory, and rewrites the links to those elements so that the template uses the versions stored in Salsa, rather than those stored on your site.

      In addition to images and files embedded in your template, images saved in a donation page Header, Footer, or other custom text area of the page will also need to be secure. To secure such images, be sure to press the button before clicking choosing the image in Salsa’s WYSIWYG-editor. Doing so will add the necessary “s” to the http://

      After taking these steps, you can check the HTML by hand for any " http://" elements still persisting, and change or replace them by hand. You can upload your stylesheets or images individually to the file directory under the Website Management tab and replace the necessary links in your template by hand. Any image or file you upload to Salsa will have a secure " https://" equivalent.

      Web Templates CSS - how to override Salsa's CSS

      When editing a template you'll notice a input field labeled: "Template (optional) Replace our default styles with this stylesheet"

      This is an advanced features only to be used by those with an advanced understanding of CSS. This field accepts a URL of a CSS style sheet. It will completely remove all default Salsa styles and use only your own. Many Salsa tools depend on these default styles to work properly, so overriding it can break tools.

      temp20.png

      That being said, this option is available for those who would rather recreate any necessary styles than style over a select few. It is important to note, we cannot provide any template support for those using this option.

      In some cases you might find you want or need to override Salsa's default CSS. What we recommend in these cases is that you take advantage of CSS's built in specificity rules and override particular styles in your header. This page has great info about CSS specificity: http://htmldog.com/guides/cssadvanced/specificity/

      So for example if you wanted to change the style of an LI- Salsa's default style is:

      .salsa li {
      list-style:none;
      clear:both;
      text-align:left;
      }

      To override that, you'll want to be more specific with your selectors. Adding a simple body selector does the trick.

      body .salsa li {
      list-style:disc;
      }
      Was this article helpful?
      1 out of 1 found this helpful
      Have more questions? Submit a request

      Comments

      8 comments
      • I need to edit a css file and add some other files to a "secure template" folder. How do I access it? I looked in "images and files" under "web management" and it does not show the folder of assets created by using download template option.

      • Is there documentation for the Options section of the web template creation process? I'm trying to figure out how the "Base HTML" and "Options" can be used and I'm not finding anything on Commons about it.

      • **Ricky: **we had someone from Support respond to your inquiry, but posting the response here for the benefit of others:

        Templates are snapshots of the web page that you take them from. So, if you update the css in the web page you'll need to update the css file saved in the template. You can either create a new template altogether, or upload the new stylesheet using Website management - images and files and then insert the link for it in place of the other file path in the template. (Did you know that you aren't limited to images with that tool? Nearly any file under 2.3 mb in size can be uploaded and linked to.)

        After uploading a new stylesheet, you can link to it in your template code. Try to stick to absolute rather than relative links for consistency. 

      • I am trying to create a new webpage template.  The new 700 x 100 px header image is saved and appears in my library. However, the image will not appear in the template.  I have tried several times and continue to have the same issue (yes, I hit save on every page).   Now what?

      • If I delete a template that is in use on some advocacy pages, will those pages then automatically use our default template instead?

      • I'm having the same the same problem as Jennifer.

      • Neil - My apologies that it took so long to respond to this comment, but yes, it should go to the default template in that situation.

         

        Jennifer and Carolyn - If you are having specific template issues please do let us know at support@salsalabs.com and we'll take a look!

      • ^^ Mikes question from 2013 - Is there documentation for the Options section of the web template creation process? I'm trying to figure out how the "Base HTML" and "Options" can be used and I'm not finding anything on Commons about it.

        Can anyone point me in the direction of the documentation for the "Base HTML" section and how it relates to the main "Source" section when setting up a website template manually?

        thanks,

        Ed

      Please sign in to leave a comment.