Getting started
Sections
Help

Container

From Snowfire Wiki

Jump to: navigation, search

The container is the frame for your site; all content will load inside it. This is where you put your <head> and sometimes a menu or a footer.

Note that nothing in the container is editable in Live edit.

Containers use Liquid syntax.

Contents

Managing containers

All containers are stored in the container directory on the account FTP. A container file has the extension .liquid.

Filters

CSS

Generates the HTML code to include a CSS file. If the file doesn't exist, no code is generated.

This filter appends the file modification date to the URL, to remedy any cache problems.

Example

{{ '/styles/reset2.css' | css }}
{{ 'master.css' | css }}

Output

<link rel="stylesheet" type="text/css" media="all" href="/styles/reset2.css?t=2010-08-10-10-52-32" />
<link rel="stylesheet" type="text/css" media="all" href="/accounts/1234/styles/master.css?t=2010-10-11-10-26-23" />

Javascript

Generates the HTML code to include a Javascript file. If the file doesn't exist, no code is generated.

This filter appends the file modification date to the URL, to remedy any cache problems.

Example

{{ '/js/jquery/jquery-1.4.2.min.js' | javascript }}
{{ '/js/obfuscate.js' | javascript }}
{{ 'script.js' | javascript }}

Output

<script type="text/javascript" src="/js/jquery/jquery-1.4.2.min.js?t=2010-06-29-09-47-51"></script>
<script type="text/javascript" src="/js/obfuscate.js?t=2010-06-29-09-48-00"></script>
<script type="text/javascript" src="/accounts/1234/js/script.js?t=2010-10-11-10-26-23"></script>

Variables

Wrap the variable name with double curly brackets, like {{ snowfire.content }}

snowfire.page.path

Renders the domain and protocol part of the URL. Always use this tag to render the base href inside <head>.

Code

<base href="{{ snowfire.site.path }}" />

Example output

<base href="http://mimmin.snowfireapp.com/" />

snowfire.page.title
snowfire.page.description
snowfire.page.keywords

Add these tags inside your <head> to set dynamic meta tags inside Snowfire.

Code

<title>{{ snowfire.page.title }}</title>
{{ snowfire.page.description }}
{{ snowfire.page.keywords }}

Example output

<title>mimmin -  turning ideas into brands, websites and applications</title>
<meta name="description" content="Snowfire, the quickest way to design and maintain a business website." />

snowfire.page.css
snowfire.page.javascript
snowfire.page.extra

Required in <head>

snowfire.account.path

This will render your account path where your styles, images etc. can be found. Use this when including images.

This is your root directory of the FTP.

<img src="{{ snowfire.account.path }}/images/logo.png" alt="Logotype" />

{{ snowfire.content }}

Will render your page content (layout) and is required. Use inside <body>.

{{ snowfire.google.analytics }}

Includes Google Analytics tracking code. You need to setup your Google Analytics integration inside Snowfire before this variable generates any output. Include before </body>

Example container

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<base href="{{ snowfire.site.path }}" />
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	{{ snowfire.page.description }}
	{{ snowfire.page.keywords }}
	<title>{{ snowfire.page.title }}</title>
 
	{{ '/styles/reset2.css' | css }}
	{{ 'master.css' | css }}
 
	{% comment %}
	<!--[if lte IE 6]>{{ 'ie6.css' | css }}<![endif]-->
	<!--[if IE 7]>{{ 'ie7.css' | css }}<![endif]-->
	{% endcomment %}
 
	{{ snowfire.page.css }}
 
	{{ '/js/jquery/jquery-1.4.2.min.js' | javascript }}
	{{ '/js/obfuscate.js' | javascript }}
	{{ 'script.js' | javascript }}
 
	{{ snowfire.page.javascript }}
	{{ snowfire.page.extra }}
</head>
<body>
 
<div id="main">
	{{ snowfire.content }}
</div>
 
{{ snowfire.google.analytics }}
 
</body>
</html>
Views
Personal tools