When to use it
How to get there
The ability to create templates is found in the Website Package under Templates:
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.
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.
- When the template window opens, you should see HTML like this:
- 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.
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:
or this method:
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.
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:
Once the publishing tools are expanded click the Change link next to the currently template:
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.
Template Best Practices
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">
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.
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
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.
<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.
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.
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.