Designing Theme

Designing Theme

Getting Started

Developers can create themes for levelupp sites to be published in the marketplace as a single zip file.
The zip file will contain template files, thumbnail and a README. These template files are composed of html files with data variables written in mustache style.


Template Variables

List of variables that can be used


Site

Sub-components of the site object can be used as follows.



Domain

Code

{{ site.domain }}

Description
This outputs the full domain of the site.

Attributes
None

How to use
<p>{{ site.domain }}</p>

Subdomain

Code

{{ site.subdomain }}

Description
This outputs the full subdomain of the site.

Attributes
None

How to use
<p>{{ site.subdomain }}</p>

Name

Code

{{ site.name }}

Description
This outputs the name of the site.

Attributes
None

How to use
<h1>{{ site.name }}</h1>

Favicon

URL

Code

{{ site.favicon.url }}

Description
This is used to output the url of the favicon uploaded from site settings.

Attributes
None

How to use
<link href="{{ site.favicon.url }}" type="{{ site.favicon.mime }}" rel="icon" />
MIME

Code

{{ site.favicon.mime }}

Description
Outputs the mime type of the favicon.

Attributes
None

How to use
<link href="{{ site.favicon.url }}" type="{{ site.favicon.mime }}" rel="icon" />



Page/Post



Body

Code

{{{ self.body }}}

Description
Contains combination of text and html elements specific to the page.

How to use
<div>{{{self.body}}}</div>

Title

Code

{{ self.title }}

Description
This outputs the title of the current page.

Attributes
None

How to use
<title>{{ self.title }} My site</title>

Created

Code

{{ self.created }}

Description
This outputs the created date of the current page.

Attributes
None

How to use
{{ self.created }}

Modified

Code

{{ self.modified }}

Description
This outputs the modified date of the current page.

Attributes
None

How to use
{{ self.modified }}

Theme URL


Code

{{ theme_url }} or /theme

Description
Outputs the URL of the current theme. This is especially usefull when referring to resources included with the theme (e.g. images, css files).

Attributes
None

How to use
<link rel ="stylesheet" href="{{ theme_url }}/css/my_style.css" />

<link rel ="stylesheet" href="/theme/css/my_style.css" />

CSS


Code

{{ css }}

Description
Outputs a link tag that uses site specific css styles.

Attributes
None

How to use
{{ css }}

STYLE


Code

{{ style }}

Description
Outputs a link tag that uses site specific css styles.

Attributes
None

How to use
{{ style }}

Code

{{ banner_{banner_name} }} or

Description
This is an object containing name, banner_items - array for displaying banner images for the site. Another variable single_banner true/false is included indicating wether the banner contains only single image

Attributes
None

Structure
banner_{banner_name}
  • name
  • banner_items
    • id
    • image_url
    • caption
    • title
    • background
    • background-alignment
    • font_color
    • slide_horizontal_alignment
    • slide_vertical_alignment
    • slide_class_name
    • slide_link
    • scale_to_aspect_ratio
    • order_id
  • single_banner
Attributes
None

How to use
 
            {{# banner_my_banner}}
            <div class="banner"> 
              <div id="page-banner" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                  {{^ single_banner}}
                    {{# banner_items}}
                      <li data-target="#page-banner" data-slide-to="{{ id }}"></li>
                    {{/ banner_items}}
                  {{/ single_banner}}
                </ol>
                
                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                  {{# banner_items}} 
                      <div class="item"> 
                        <img src = "/{{image_url}}" > 
                        <div class="carousel-caption"> 
                   
                        </div> 
                      </div> 
                    </div> 
                  {{/ banner_items }} 
                </div> 
                  
                <!-- Controls --> 
                {{^ single_banner}} 
                  <a class="left carousel-control" href="#page-banner" role="button" data-slide="prev"> 
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
                    <span class="sr-only">Previous</span> 
                  </a> 
                  <a class="right carousel-control" href="#page-banner" role="button" data-slide="next"> 
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
                    <span class="sr-only">Next</span> 
                   </a> 
                {{/ single_banner}} 
              </div> 
            </div> 
            {{/ banner_my_banner}}

MENUS


Code

{{ menu_{menu_name} }}

Description
Object containing name and menu_items from the specified menu. Each item may also contain {{child_ menu_items}} for multi-level menus. The presence of child_menu_items can be determined using {{has_child_items}}.  menu_items contains {{url}} the url and {{label}} is the text to display. child_menu_items can also contain child_menu_items depending on the level of your menu hierarchy.

Attributes
None

Structure
menu_{menu_name}
  • menu_items
    • label
    • url
    • has_child_items
    • child_menu_items
      • label
      • url
      • child_menu_items

How to use
 
            {{# menu_navbar_top}}
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav navbar-right">
                {{# menu_items}}
                    {{^ child_menu_items }}              
                    <li><a href="{{url}}">{{label}}</a></li>
                    {{/ child_menu_items }}
                    {{# has_child_items }}
                    <li>
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                         {{label}}
                        <span class="caret"></span>
                        <span class="sr-only">Toggle Dropdown</span>
                      </a>                
                      <ul class="dropdown-menu">
                      {{# child_menu_items }}  
                        <li><a href="{{url}}">{{label}}</a></li>                  
                      {{/ child_menu_items }}
                      </ul>
                    </li>
                    {{/ has_child_items }}                    
                  {{/ menu_items}}    
              </ul>
            </div>
            {{/ menu_navbar_top}}

BREADCRUMB


Code

{{ breadcrumb }}

Description
Array containing breadcrumb links for the current page. {{active}}:true/false indicates the active link. {{url}} contains the url and {{label}} is the text to display.

Attributes
None

Structure
breadcrumb
  • active
  • url
  • label
How to use
 
            <ol class="breadcrumb">
            {{# breadcrumb}}
              {{^ active}}
                <li><a href = "{{url}}" class="breadcrumb">{{label}}</a></li>
              {{/ active}}
              {{# active}}
                <li><span class="breadcrumb">{{label}}</span></li>
              {{/ active}}
            {{/ breadcrumb}}
            </ol>

BASIC TEMPLATE


        <!DOCTYPE html>
        <html lang="en">
          <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>{{title}}</title>
            <link rel="stylesheet" type="text/css" href="{{theme_url}}/css/bootstrap.min.css">
            <link rel="stylesheet" type="text/css" href="{{theme_url}}/css/font-awesome.min.css">
            <link rel="stylesheet" type="text/css" href="{{theme_url}}/css/style.css">
            {{# css }}
            <link rel="stylesheet" type="text/css" href="{{ . }}" />
            {{/ css }}
            <style type="text/css">
                {{style}}
            </style>
          </head>
          <body>
            <!--header-->
            <header class="main-header" id="header">
              <div class="bg-color">
                <!--nav-->
                <nav class="nav navbar-default navbar-fixed-top">
                  <div class="container-fluid">
                    <div class="col-md-12">
                      <div class="navbar-header">
                      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar" aria-expanded="false" aria-controls="navbar">
                        <span class="fa fa-bars"></span>
                      </button>
                        <a href="/" class="navbar-brand">{{site.name}}</a>
                      </div>
                      <div class="collapse navbar-collapse navbar-right" id="mynavbar">
                        <ul class="nav navbar-nav">
                          {{# menu_items}}
                            {{^ child_menu_items }}              
                            <li><a href="{{url}}">{{label}}</a></li>
                            {{/ child_menu_items }}
                            {{# has_child_items }}
                            <li>
                              <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                 {{label}}
                                <span class="caret"></span>
                                <span class="sr-only">Toggle Dropdown</span>
                              </a>                
                              <ul class="dropdown-menu">
                              {{# child_menu_items }}  
                                <li><a href="{{url}}">{{label}}</a></li>                  
                              {{/ child_menu_items }}
                              </ul>
                            </li>
                            {{/ has_child_items }}                    
                          {{/ menu_items}}
                        </ul>
                      </div>
                    </div>
                  </div>
                </nav>
                <!--/ nav-->
                <div class="container text-center">
                  <h3 class="title">{{title}}</h3>
                </div>
              </div>
            </header>
            <!--/ header-->
            {{{page_body}}}
            <!---->
            <footer class="" id="footer">
              {{footer}}
            </footer>
            <!---->
            <script src="{{theme_url}}/js/jquery.min.js"></script>
            <script src="{{theme_url}}/js/jquery.easing.min.js"></script>
            <script src="{{theme_url}}/js/bootstrap.min.js"></script>
            <script src="{{theme_url}}/js/wow.js"></script>
            <script src="{{theme_url}}/js/custom.js"></script>
            
          </body>
        </html>

THUMBNAIL

This is a png file used to display image for the theme. The filename should be thumbnail.png.

README

This is a text file containing information about the theme. UseREADME.md filename. The file should containname,description,version,author and tags of the theme. Tags should be words separated by, or space.

Example

Name:My Theme
Description: Elegant theme for your e-commerce website.
Version: 1.0.0
Author: John Doe
Tags: shopping, ecommerce, business, products


DEMO.html

You can include a preview of your theme using this special filename. Note: Make sure to include your own data and content.