Getting started
Sections
Help

Tutorials:Create theme

From Snowfire Wiki

Jump to: navigation, search


This tutorial is old and out of date

Please have a look at http://wiki.snowfireapp.com/Category:Tutorials








In this guide I'll walk you through the creation of a new theme and layouts in Snowfire. This is a good start if you have a static HTML that you want to integrate with Snowfire. I'll create a new Snowfire account with the "Simplicity Marine" theme but it doesn't matter which theme you have since we'll remove all theme specific files.


Setup

Create a new Snowfire account (http://www.mimmin.com/snowfire) and make sure you can login to Snowfire with your browser and via FTP. Your welcome email includes login instructions.

I recommend to use an editor/IDE with built in FTP capabilities. We're using Coda (Mac), PhpEd (PC) and Zend Studio (PC/Mac)

Clean/Remove current theme

Clean/Remove theme

  • Open /styles (FTP) and remove all CSS files inside. Create a new CSS file called "screen.css".
  • Open /images and remove all files and folders inside.
  • Login to Snowfire and navigate to the "Pages" tab. Remove all pages.
  • Click "Layouts" and remove all layouts.
  • Jump to the "Menu" tab and remove all menus.
  • Jump to the "Forms" tab (if you got one) and remove all forms

Hello Snowfire

Open /layout/container/container.liquid (FTP) and replace all contents in the file with the default container. Remove all content inside except <body> {{ snowfire.content }} and replace it with "Hello Snowfire"

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

Save and close container.liquid.


In /layout/layouts (FTP) create an empty file called "page.tpl"
In /styles create "master.css" and add a default background and font color.

html, body {
    background: #fff;
    color: #333;
}


Open Snowfire and navigate to Pages -> Layouts -> Install/Upload new layout. Select "page.tpl" in the dropdown. Name your layout "Page" and go to the "Pages" tab. Create a new page named "Home" with your newly installed (empty) Page layout.

File:hellosnowfire.jpg

Wooaw. We're inside a page and it has rendered my empty layout and the container data.

A page with Live edit

Remove "Hello Snowfire" from container.liquid and open /layout/layouts/page.tpl. Let's add two Layout components.

{ com_singlerow ( id:'1', description:'Headline', htmlElement:'h1' ) }
{ com_wysiwyg ( id:'2', description:'Content' ) }

Save and reload Snowfire. Click and try out Live edit with your new components. Hit "Save & Return", go to "Website management" in the upper right corner and set your newly created page as start page. Navigate to http://your-webpage.snowfireapp.com to see your new webpage.

Add menu

Insert a menu above your current components in "page.tpl"

{ com_menu ( 
    id:'3', 
	description:'Insert menu',
    itemHtml:'<li><a href="%link%" id="menu-%nameSanitized%">%name%</a></li>' 
) }

Save, reload Snowfire and create a new menu.

Add image as logo

Let's add an image for a logo at the top of our "page.tpl".

{ com_image ( 
    id:          '4',
    description: 'Logo', 
    maxHeight:   '200',
    maxWidth:	 '300',
    syncId:    '1'
) }

The last parameter, syncId, is important since it will allow us to have multiple pages based on the "page.tpl" layout and still only have once instance of the logo. If I change the logo on one page it will change on all pages built with my layout.

Select an image as the logo and hit "Publish and Return". Now create a new page called "About" and look, our logo is already in place since it utilize the syncId parameter.

Views
Personal tools