Layout templates

Layouts are typically stored in your extension template folder:

 

inc/template/<extensionKey>/

 

Examples:

 

inc/templates/th_myTheme/layout_default.tpl

inc/templates/th_myTheme/layout_startpage.tpl

inc/templates/th_myTheme/layout_default_without_subnavi.tpl

 

Good practice is to start the filename with layout_, so that other can detect layout files with the first sight.

 

In your layouts should be the HTML part between the <body> tags.

 

Kryn.cms use doctype XHTML 1.0 Transitional as default and build the <head> automatically. To manipulate the <head> part (add CSS or JS files) you can use the Kryn core methods in your extension class or in the template itself via the framework template functions. You have in your templates also access to all global template variables.

 

The doctype can be changed in version 0.9.

 


Example layout

{addCss file="th_krynDemo/base.css"}


<div class="header">
    <div class="wrapper">
        <div class="header-top">
            {navigation level="1" template="th_krynDemo/navigation_top.tpl"}
        </div>
        
        <div class="header-logo">
            <a href="{$path}">
                <img src="{$publicProperties.logo}" align="left" />
                <span class="header-logo-title">{$publicProperties.title}</span><br />
                <span class="header-logo-slogan">{$publicProperties.slogan}</span>
            </a>
        </div>
        
        <div class="header-subnavi">
            {navigation level="2" template="th_krynDemo/navigation_subnavi.tpl"}
        </div>
        
        <div class="header-search">
            <form action="{$publicProperties.search_page|realUrl}" method="get">
                <input type="text" name="q" value="\Keyword ..." onfocus="if(this.value == '\Keyword ...')this.value=''" onblur="if(this.value=='')this.value='\Keyword ...'"/>
                <input type="submit" class="submit" value="\Search" />
                <input type="hidden" name="searchDo" value="1" />
            </form>
        </div>
    </div>
</div>

<div class="content">
    <div class="wrapper">
        <table width="100%" cellpadding="0" cellspacing="0">
            <tr>
                <td valign="top">
                    <div class="content-main">
                        
                        <div class="content-main-padding">
                            {slot id="1" name="\Main content" picturedimension="640x1000"}
                        </div>
                    </div>
                </td>
                <td valign="top">
                    {if $admin}
                        <div class="content-sidebar">
                            {slot id="2" name="\Sidebar" assign="sidebar"}
                        </div>
                    {else}
                        {slot id="2" name="\Sidebar" assign="sidebar"}
                        {if $sidebar ne ""}
                            <div class="content-sidebar">
                                {$sidebar}
                            </div>
                        {/if}
                    {/if}
                </td>
            </tr>
        </table>
    
    </div>
</div>


<div class="footer">
    <div class="wrapper">footer-box
        <div class="footer-box">
            <div class="footer-box-padding">
                <table width="100%">
                    <tr>
                        <td valign="top">
                            {if $publicProperties.footer_deposit eq ""}
                                \Please set "Footer deposit" under Domain » Properties » Kryn Demo
                            {else}
                                {page id=$publicProperties.footer_deposit}
                            {/if}
                        </td>
                        <td align="right" valign="top">
                            {navigation id=$publicProperties.footer_navi template="th_krynDemo/navigation_footer.tpl"}
                        </td>
                    </tr>
                </table>
                
            </div>
        </div>
    </div>
</div>