Working with Templates - Sageframe · On the next page the template manager page prompts the settings for templates which contain 4 tabs – Basic Settings, Themes, Presets and Layout

Templates

Copyright ©2010-2012 SageFrame.com. All Rights Reserved.

Working with Templates

SageFrame is easy to theme and totally flexible; it lets you customize each page layout without any restriction; hence, it reduces time to design the same layout for a number of pages.

You can design different page layout for different pages in the website with the following features:-

XML layout Multiple Layouts Supports handheld devices Dynamic positions Changeable layouts and themes Drag and drop modules

Selecting a template

Step1.On the SageFrame cPanel, click the option to select a template from the list of available ones.

Step2. Click on the button to use the desired template.

Changing the Layout and Themes of the template Follow the below mentioned steps to change the layout and the themes:-

Templates


Step1. On the ‘Template Manager’ page click on the name of the desired template.

Step2. On the next page the template manager page prompts the settings for templates which contain 4 tabs – Basic

Settings, Themes, Presets and Layout Manager.

(a)Basic Settings: Displays some basic information about the templates that is currently in use such as Template name,

Template author’s name, description of the template and the website address.

Templates


(b)Themes: Displays the themes that are available for a selected template.

(c)Presets:

Presets lets you set and assign different layout for pages in your website. The Layout pane in SageFrame lists all the

layouts that are available in a particular template. In the figure below you can see

the Default andtwoColumnLayout which are the templates in use. The Default layout is

used in Home page twocolumnlayout is used in the rest of the pages of template.

Templates


Setting different layout for different pages

Follow the steps below to assign the different layout to page/pages:-

Step1.Choose the layout you want to use from the associated drop down list.Example below shows the ‘default layout’:-

Templates


The dropdown lists3 options to choose from: –

None: Choose this option if you do not want to apply this layout to any pages.

All: Choose this option to apply the particular layout to all pages in a site.

Custom: Choose this option to apply Layout only to the selected pages in a site.

Step2. Click on Custom from the dropdown.

Step3. Click on icon. Select pages overlay appears which lists all the pages available in the site.

Step4.Select pagesand click on link to apply the layout.

Templates


Step5.The pages that you selected to be applied with new layout will now appear in the Layout pane.

Simultaneously, youcan use the other layouts for various other pages in the site. Simply select the layout and use the

options from the drop down.

Pages to be applied

with the default layout

Templates


Step6. In the similar way, you can also choose screen style for the pages from Wide screen, Narrow screen and Fluid

screen as shown below:-

Step7. Once you are done with all the Preset setting, click on option to save the settings.

(d)Layout Manager: The SageFrame Layout manager lets you manage website page design or create a

separate wireframe for each page. You can place multiple modules in a position and decide width and height of each

position.

Layout Wireframe:

Below is the wireframe of this particular layout showing the various positions that are in use. Layout comprises

of layout units. Each unitis given a position inside the layout: Logo, Search, Navigation, Banner, Pos1, Pos2,

Copyright, etc. Layout unit is where you will add the modules to render a page. The layout units are highly

customizable through the various configurable options.

Templates


Adding a New Layout

Follow the steps below to add a new layout in a template:-

Step1.On SageFrame ‘Layout Manager’ page; Click on the template on which you want to add a layout.

Templates


Step2. Click on the option to add a new layout.

Step3 .On the ‘Add Layout’ page, choose a clone from the dropdown if you want to copy any previous layout. However

if you wish to create a new layout leave ‘Clone from’ as none and enter a layout name.

Step4. Click on the option to create the specified layout.

Editing a Layout

SageFrame creates a layout using XML which makes it easier for you to edit layout without much hassle.

Follow the steps below to edit a layout:-

Step1. On ‘Layout Manager’ page, select a layout that you want to edit from the drop down.

Templates


Step2. Click on the link.

Step3. Next up you get prompted with ‘Layout Markup Creator’ of the selected layout.

Templates


A layout in SageFrame consists of three sections i.e. sfHeader, sfContent and sfFooter. Each section contains

<placeholder>and the each placeholder contains the <position>.

a. sfHeader

This section is capable of holding multiple placeholders and each placeholder can hold multiple positions. You

can also add or delete placeholder depending on your website needs.

Layout hierarchy: <Section>

<Placeholder>…..</Placeholder>

<Position>…..</Position>

</Section>

Templates


b. sfContent

This section has fixed positions meaning you cannot add placeholders but only delete them. However you can

always add multiple positions to available placeholders depending on your needs.

Adding a position in sfContent placeholders:-

c. Sffooter

This section is also capable of holding multiple placeholders and each placeholder can hold multiple positions.

You can also add or delete placeholder depending on your website needs.

Here we have used Mode=”fixed”

attribute to give fixed width

position for the’Lefta ‘placeholder

Templates


Adding positions in a placeholder

Adding a position means having different units in the placeholder. In order to have different width for each

position, we will need to add the width attribute in the placeholder.

In the example below we will be adding a position to sfheader sections ‘header’ placeholder:-

It already has two positions ‘Logo’ and ‘Search’ i.e.

Step4.Once you are done with editing layout, click the option to save the changes made to the layout.

Note: You can either define the width of each position or simply use mode as fixed.

You can also use the <wrapper> to wrap the placeholders or positions into one <div>.

Templates


Wrapper attributes:

Type: Type is a part to wrap which can be a position, placeholder or a block.

Class: Class attribute specifies one or more classnames for an element.

Depth: Depth attribute specifies the number of <div> to be created to wrap the position. The additional <div> tags will

have class =”sfBlockwrap leftrightwrap”, class=”sfBlockwrap leftrightwrap sf2”, class=”sfBlockwrap leftrightwrap sf3 as

shown in an image as below:-

Creating a Template To create a template, navigate to SageFrame cPanel and follow the steps as mentioned below:-

Step1. Click the button which prompts you with a text box to specify the template name. So, enter

the template name and click the button.

After the template has been successfully created, acopy of default template is created with a name ‘Layoutstest’as

shown below:-

Templates


The Layoutstesttemplate will copy all the files that the Default Template has. View the containing files and folders by

navigating to the main SageFrame folder where it was placed during the installation.

In the image below we can see the Layoutstest folder which is a clone of the Default template.

E:\SageFrame\Templates.

The Layoutstest contains all the required files that are needed in a template.

Templates


One can add the CSS files, images, modules etc., to the respective folders and can also edit the existing files.

Documents

Working with Templates - Sageframe · On the next page the template manager page prompts the settings for templates which contain 4 tabs – Basic Settings, Themes, Presets and Layout