Website Template
From Support - DLCC Web
Return to Website Management Tab
Contents |
Defining and Managing your Website Template in DLCCWeb
Selecting your website template is a three step process. Start by accessing the Website Template Editor.
The first choice you will need to make is what layout you'd like to use. You can always change this later, so don't worry too much about this decision. There are currently two different options available, one is a horizontal navigation layout and the other is a vertical navigation layout. For more information and advice on differently layouts go to our Layout Selection page.
To select a layout just click on your preferred one and then click on the 'continue to next step' button underneath the layouts.
From here you will be taken to a page where you can select the color scheme for your layout. Again, you can change this later, so just select whichever one you like best and then click on the 'continue to next step' button underneath the color schemes.
The final step involves selecting your website header image and then the text that will appear on your header. We currently have three different standard header images available and in the future we'll be adding state specific headers, as well as giving you the ability to upload your own header image. For now you will need to select one of these three header images.
Once you have selected a header image you will need to choose what you want written on your header, for example:
Primary text: Jane Doe Secondary text: For Maryland State Senate
Further customization of your website header
If you would like to upload a custom header or background image to your DLCCWeb account, please email the header to DLCCWeb. Your headers should be sized to exactly 800 pixels by 160 pixels. Depending on what design you have selected, the edges of you header image might be obscured by design elements.
Setting up a custom template for websites hosted outside of DLCCWeb
The template management page includes both Webpage and Email templates. Web templates are located on the left, email templates display on the right.
Web Templates
Webpage templates are used to wrap the content you create in Salsa with your own site's branding. Creating a template is easy, and templates can range from very simple to enormously complex. 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.
There are two primary ways to create templates: using our template generator (which allows you to base your template on an existing site, without ever having to write any HTML), and creating a template from scratch. Below, we'll go through both methods.
Template Generator
One of your options in creating a new template is to have our Template Generator create one from your current website. To do so, simply enter the URL of your site into the field at the top of the template management page, and click the "Create from URL" button.
You'll be presented with a version of your webpage, with a number of "CONTENT HERE" links. These outline the different sections of your current website. Simply click the CONTENT HERE link where you'd like you'd like the Salsa tools to appear.
Make sure to pick the location in the document that won't interfere with relevant menus and images, but which will not bring unnecessary content along with it.
Once you've chosen a content area, you'll be able to preview your choice, and assign a name to your template. Make sure you give your templates a reasonable name, one that will be meaningful when you use your templates in the future. There is also a check box to indicate your template is the default template. A default template will be used when no other template is selected.
Once you click the Create Template button, your new template will appear in the list of webpage templates.
Creating a New Template from Scratch
Salsa makes creating templates easy with the Template Generator 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 text editor.
A Salsa template is essentially a standard HTML document, with two additional pseudo-codes, stored in our databases. Like any HTML document you can link to files and scripts.
Develop and design your template just as you would for any webpage. Salsa uses two pseudo-codes to indicate where tools and content should be inserted. For web templates, these codes have to be place together (special instructions for email templates are below). These pseudo-codes are:
{html}<!-- TemplateBeginEditable name="content" --> <!-- TemplateEndEditable -->{html}
Once you've finished you're template and included the pseudo-codes, click the 'Update Template' button to make your edits permanent.
Advanced Options, Tips, and Best Practices
Tips
Salsa depends on CSS to give each organization the power to customize the look of their pages. With out it each Salsa tool would look the same on every page, for every organization. With CSS the Salsa tools can be dramatically altered to suit each group.
Adding your own CSS, with styles specific to the Salsa tools, is very powerful in making your pages. Add a style sheet to your template via HTML, using either the {html}<link> or the <style>{html} method (*do not* use the optional input box, I'll cover that below).
When thinking about styling Salsa pages it's important to keep a few things in mind. Salsa adds it's own style sheet directly before it adds the HTML for its tools, meaning these are the last styles in your document. To over-ride Salsa styles you'll need to make use of the {html}<a href="http://htmldog.com/guides/cssadvanced/specificity/">Specificity Rules</a>{html} of CSS. Again as 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 thats 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 I highly recommend {html}<a href="http://www.htmldog.com/">HTMLDog</a>{html} as it has clear guides and an attention to doing things the valid way.
Best Practices
Salsa doesn't try to 'help' or 'fix' your template, we trust that you know what you're doing. Standard best practices of HTML and CSS carry over to templates in Salsa. Try to use valid code, make your HTML documents well-formed, try to use table-less layouts, etc. There are however a couple things that don't work well or can be problematic if done incorrectly.
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. Bottom line is if your site uses frames I highly recommend reworking your site to work with out 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 overrides what a page would normally be relative to, will cause the links in Salsa to be incorrectly relative. Luckily the Template Generator will convert your relative links to absolute links for you.
Overriding Salsa's default CSS
When editing a template you'll notice a input field labeled: "(optional) Replace our default styles with this stylesheet:(use only if you really can't stand our styles)." 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 over riding it can break tools. That being said this option is available for those who would rather recreate any necessary styles, then style over a select few. It is important to note, *we cannot provide any template support for those using this option*.
