Getting started
Sections
Help

HTML to Snowfire

From Snowfire Wiki

Jump to: navigation, search

File:html-to-snowfire.jpg


This tutorial is also available as video in swedish -> HTML to Snowfire video

Contents

Before we get started

I assume you have a HTML document and its assoicated CSS and/or Javascript. My example webpage has the following files (File:Static-html-for-snowfire.zip).

  • index.html
  • screen.css
  • image.jpg

Create your Snowfire account

Open http://getsnowfire.com/themes/base to create a developer account. Once you've logged in, go to "Site" in the top right corner and click "Users & settings". Now look for the "Enable web designer toolkit". This will tell Snowfire that you are a web designer and provide you with all the tools you need.

File:ftp-settings.jpg


FTP

Once the web designer toolkit is enabled, the same screen will show your login details. Open your favorite FTP client and connect to Snowfire. I will use Coda, but any FTP client works. (Have a look at recommended clients)

Inside the FTP, the following folders are available:

File:Ftp-struct.jpg

I guess you recognize some of the folders.

  • screen.css goes into /styles
  • Layout images such as backgrounds goes into /images

A quick explanation before we get our hands dirty. First, we have to divide the page into two separate files.

This is a basic example of a HTML structure. If you think about it, the only thing that will change between different pages on your website is the contents inside the <body> tag (displayed above in blue). Knowing this, we can put everything that isn't going to change inside the /containers/container.liquid (your <head> tag and an empty <body>)

Snowfire looks at the container like this:

On every page load, it will load the container and then insert your page specific HTML in the spot where you have written
{{ snowfire.content }}

Time to start coding

Replace everything inside /containers/container.liquid with the contents of your <head> tag and then add the following <body> tag:

<body>{{ snowfire.content }}</body>

Now, your container.liquid should look something like this:

<!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" lang="en" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
	<title>My webpage</title>
	<link rel="stylesheet" type="text/css" media="all" href="screen.css" />
</head>
<body>{{ snowfire.content }}</body>
</html>

Make <head> dynamic

We need to add a few things to make this a valid Snowfire container. Put the following code after <head> and before </head>

Required to tell the web browser where we have our assets (images, css etc):

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

Dynamic meta tags (this will let the user modify the META tags inside Snowfire):

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

Tell Snowfire to include the screen.css we uploaded to /styles earlier:

{{ 'screen.css' | css }}

Tell Snowfire where it can find obfuscate.js: (used to hide email addresses from search robots)

{{ '/js/obfuscate.js' | javascript }}

That's it. This is how my container.liquid looks:

<!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" lang="en" xml:lang="en">
<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>
 
	{{ '/js/obfuscate.js' | javascript }}
	{{ 'screen.css' | css }}
 
</head>
<body>{{ snowfire.content }}</body>
</html>

Create the first layout

Save the container.liquid, we will come back to it later. A layout contains all HTML but the pieces we put into the container. Go into the /layout/layouts folder in the FTP, create a new file called mypage.tpl and fill it with all HTML code you have inside <body> in your static HTML.

This is how mypage.tpl looks with the example code

<div id="top">
	<div class="wrapper">
		<div class="logo">My webpage</div>
		<div class="menu">
			<ul>
				<li><a href="#" class="active">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
		</div>
		<div class="both"></div>
	</div>
</div>
 
<div class="wrapper">
	<div id="content">
 
		<h1>Welcome to my webpage</h1>
		<p>Hello World!</p>
		<img src="image.jpg" alt="An image" />
 
	</div>
</div>

Save the file and open Snowfire in your web browser. Locate "layouts" in the sidebar (Click the "Content" tab first, if you don't see it)

File:Locate-layouts.jpg

On the next screen, click "Install layout". Now the dropdown should contain mypage.tpl (the file we just created). Hit install and give it a name (e.g. "My Page").

File:layout-dropdown.jpg

Return to the content tab and create a new page with the "My Page" layout we just installed.

Wow. Snowfire displays our webpage inside Live edit!

Make it editable

I know it looks very nice, but we can't edit anything yet. Let's change that. The following code is based on the use of the example HTML, but it should be easy to adopt your specific code.

Open mypage.tpl (FTP).

<div class="logo">My webpage</div>

Change it to

<div class="logo">{ com_singlerow(id:'1', description:'Enter company name') }</div>

Save mypage.tpl and reload the page in your web browser. Now click the [Enter company name] Congratulations. You have created a dynamic layout which can be changed with Live edit.


Menu, image and body text

Replace

<div class="menu">
	<ul>
    		<li><a href="#" class="active">Home</a></li>
    		<li><a href="#">About</a></li>
    		<li><a href="#">Contact</a></li>
    	</ul>
</div>

with

<div class="menu">
{ com_menu ( 
    id:'2',
    description:'Menu',
    itemHtml:'<li><a href="%link%" %class%>%name%</a></li>' 
) }
</div>

and reload to create a editable menu.

Replace

<h1>Welcome to my webpage</h1>
<p>Hello World!</p>
<img src="image.jpg" alt="An image" />

with

{ com_singlerow(id:'3', description:'Heading', htmlElement:'h1') }
{ com_wysiwyg(id:'4', description:'Body text') }
{ com_image(id:'5', description:'Image') }

Final notes

Every editable thing in a layout is called a component. Every component has its own unique id. Use the developer toolbar to see which component IDs that are available.

File:developer-menu.jpg

A component has parameters like "id" and "description" above. Please have a look at Layout components to see them all.

Next step

Now that you got the basic, it's pretty easy to create multiple layouts and focus on what's important for you.

Views
Personal tools