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.
List of variables that can be used
Sub-components of the site object can be used as follows.
Code
{{ site.logo }}Code
{{ site.domain }}Code
{{ site.subdomain }}Code
{{ site.name }}Code
{{ site.favicon.url }}Code
{{ site.favicon.mime }}Code
{{{ self.body }}}Code
{{ self.title }}Code
{{ self.created }}Code
{{ self.modified }}Code
{{ theme_url }} or /theme<link rel ="stylesheet" href="{{ theme_url }}/css/my_style.css" />
<link rel ="stylesheet" href="/theme/css/my_style.css" />
Code
{{ css }}
Code
{{ style }}Code
{{ banner_{banner_name} }}
orname
, 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{{# 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}}
Code
{{ menu_{menu_name} }}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.{{# 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}}
Code
{{ breadcrumb }}{{active}}
:true/false indicates the active link. {{url}}
contains the url and {{label}}
is the text to display.<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>
<!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>
This is a png file used to display image for the theme. The filename should be thumbnail.png.
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 ThemeYou can include a preview of your theme using this special filename. Note: Make sure to include your own data and content.