Custom Themes



The SquareHook team has worked hard to provide you with awesome templates that work out-of-the-box and provide you with enough features to meet your needs.  We do understand however, that we cannot meet every need of every customer and that there are those who want to totally customize their themes for their website. To do so, it does require that you have at least some understanding of HTML, CSS and JavaScript before you begin modifying the themes on your own.


Twitter Bootstrap

All of our themes are based on the Twitter Bootstrap framework. In order for your custom theme to work on our tool, you should incorporate this framework. For more information and to download Bootstrap, click on the link here:

Twitter Bootstrap


Mustache

Our themes on SquareHook are created using Mustache Logic-less templates.

We call it "Logic-less" because there are no if statements, else clauses, or for loops. Instead there are only tags. Some tags are replaced with a value, some nothing, and others with a series of values.

For further information on Mustache, go to this link:

Mustache Logic-less Templates

The most basic tag type is a variable, or double mustache. They are formatted like so: {{SiteTitle}}

This tag is a variable in our tool that reads as unescaped HTML and will output what you have entered for the variable if it exists on our tool.

There is also a triple mustache tag such as: {{{Body}}}

This tag triple mustache allows for HTML within the tag and will render the tag in HTML format.


Tags

The following tags are the specific tags we use for the themes on our tool. If you are planning on creating your own custom template, make sure you are including these tags in your HTML in order for them to render appropriately on the SquareHook tool.

  • {{Title}} - The page title of the page being rendered.

  • {{{Body}}} - The body content of the page being rendered.

  • {{PageURL}} - The current URL of the page encoded.

  • {{{Styles}}} -Renders all of the styles associated to the selected layout.

  • {{{Footer}}} - Render's the footer associated with the layout.

  • {{{Scripts}}} - Renders all of the scripts associated to the selected layout.

  • {{{CodeInjection}}} - Renders the page script for Code Injection in the page settings.

  • {{> navigation}} - Generates the site navigation.

  • {{SiteTitle}} - The site title of the site being rendered.

  • {{{Logo}}} -Outputs a specified logo or the Site Title if no logo is set.

  • {{TagLine}} - The tag line of the site being rendered.

  • {{{SiteDescription}}} - The description of the site being rendered.

  • {{Phone}} - The phone number of the site being rendered.

  • {{Address.Address1}} - The address field of the address of the site being rendered.

  • {{Address.City}} - The city field of the address of the site being rendered.

  • {{Address.Country}} - The country field of the address of the site being rendered.

  • {{SocialMedia.Twitter}} - Reference to the site Twitter information.

  • {{SocialMedia.Instagram}} - Reference to the site Instagram information.

  • {{SocialMedia.Facebook}} - Reference to the site Facebook information.

  • {{SocialMedia.Tumblr}} - Reference to the site Tumblr information.

  • {{> header}} - This is a partial layout tag that makes modifying repeatable regions easier.
  • {{> footer}} - This is a partial layout tag that makes modifying repeatable regions easier.

Here is an example of our House of Bakin' template using the mustache tags

Notice how the Tags {{ }} and {{{ }}}  have replaced elements of the code in places where our tool will renders these tags.
 

<preclass="brush: html; syntaxhlighter">
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="utf-8">
<title>{{Title}} | {{SiteTitle}}</title>
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<metaname="description"content="">
<metaname="author"content="">
 
<linkhref="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css"rel="stylesheet"/>
{{{Styles}}}

<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->


 

</head>
 
<body>
<header>
 
<divclass="navbar navbar-static-top">
<divclass="navbar-inner">
<divclass="container">
<aclass="logo"href="#">{{{Logo}}}
</a>
<buttontype="button"class="btn btn-navbar"data-toggle="collapse"data-target=".nav-collapse">
<h5class="upup">NAVIGATION</h5>
</button>
<divclass="nav-collapse collapse">
{{{Navigation}}}
</div><!--/.nav-collapse -->
</div>
</div>
</div>
</header>
<divclass="container">
{{{Body}}}
</div><!-- /container -->




<footer>
{{{Footer}}}
<divclass="row">
 

CSS and LESS

When creating your own custom theme, our tool will allow you to attach a .CSS file to your HTML for your stylesheet.  Our layout designer has been created to read .LESS files, however.  Using a .LESS file will allow you to use our layout designer to modify your site's colors, heights and more within the tool and adds to the usability and ease of modification of your sites styling properties.

Here is a link for more information on .LESS stylesheets:

.LESS


 

/* general colors */
@PrimaryColor:#55BCC1;
@SecondaryColor:#222222;
 
/* default font */
@FontFamily:'Arial', sans-serif;
 
 
/* menu colors */
@MenuBackgroundColor:transparent;
@MenuTextColor:@PrimaryColor - #666;
@MenuHoverBackgroundColor:transparent;
@MenuHoverTextColor:@PrimaryColor;
 
/* footer colors */
@FooterBackgroundColor:@SecondaryColor;
@FooterTextColor:@PrimaryColor;
@FooterLinkColor:@PrimaryColor;
@FooterLinkHoverColor:#959595;
 
/* site name fonts */
@SiteNameFontSize:12px;
@SiteNameLineHeight:12px;
@SiteNameLetterSpacing:inherit;
@SiteNameFontFamily:@FontFamily;
@SiteNameFontBold:normal;
@SiteNameFontItalic:normal;
@SiteNameFontUnderline:none;
 
/* Default Paragraph LESS Settings */
@DefaultFontBold:normal;
@DefaultFontItalic:normal;
@DefaultFontUnderline:none;
@DefaultFontSize:inherit;
@DefaultLineHeight:inherit;
@DefaultLetterSpacing:normal;
@DefaultFontFamily:@FontFamily;
 
/* Default Header LESS Settings */
@HeaderFontBold:normal;
@HeaderFontItalic:normal;
@HeaderFontUnderline:none;
@HeaderLetterSpacing:normal;
@HeaderFontFamily:@FontFamily;
 
 
Here is a list of .LESS parameters that can be modified with our tool
 

Once you click on the edit button, a new menu will open on the left that gives you access to the Layouts, Styles, Javascripts and Layout Images of the theme.

Layouts

These are the HTML files that use our mustache tags as explained above.  Paste in your own code here and save (using the floppy-disk icon) to make your own custom theme.  Each page will use "layout" theme by default, but can you can specify to use another theme in the page settings.

There are also specific layout's that you can modify to override the existing formatting of your layout.

These are defined in two different ways: Full Layout & Partials

Full vs. Partial Layouts

  • Full

- A full layout is going to be specifically attributed to a page and can be applied depending on the page layout you want.  For example, you may want your Home Page to have a different layout than the rest of your site.  Our themes come with multiple layouts installed such as a blog layout that you can use to tie your Tumblr or Blogger blog feeds directly into a blog page on your site.


  • Partial

- Partial layouts are used to override specific parts of a theme such as the navigation or subnavigation.  By default, our tool builds the HTML of your navigation and subnavigation for you using the {{> navigation}} tag.  The tool has been developed to create the navigation according to the fields you enter in our tool.  If for any reason you would need to override the formatting of the default navigation you can create a new partial layout to accommodate your specific needs.

Note: Our tool will look for partial layouts such as navigation and subnavigation and override the existing layout.  These partial layouts should never be applied as a page's layout.

Using the Header and Footer as partial layouts.

To make changes to your header and footer easier, we have now added partials to the header and footer areas of each theme. Now when you need to make a change to these areas, you will only have to make the change in one area of the html. i.e. the header or footer partials. When you make these changes in the header and footer areas of your site.

These areas are placed into your layout by adding the {{> header}} and {{> footer}} tags in replacement of where you would find them in your layout.

Note: The {{> header}} partial contains all of the html that comes before the body contents including the elements found in your <head> tag, references to your style sheets etc.. 

Note: The {{> footer}} contains the html found from the start of the <footer> tag to the end of the document.

Note: Some themes may have certain layouts in which the header and footer vary from the pages on the rest of your site. In this case, for example your Home page has a different navigation bar than the rest of your site, you will keep the html as it is in the layout and not use the {{> header}} or {{> footer}} tags.



Below is an example of a partial layout to override the {{> navigation}} tag in the default layout.

 

<preclass="brush: html; syntaxhlighter">
<ulclass="nav">
{{#Items}}
{{^HasSubNavigation}}
<li{{#IsActive}}class="active"{{/IsActive}}><ahref="{{PageUrl}}">{{PageName}}</a></li>
{{/HasSubNavigation}}
{{#HasSubNavigation}}
<liclass="dropdown {{#IsActive}}active{{/IsActive}}">
<ahref="{{PageUrl}}"data-toggle="dropdown">{{PageName}} <bclass="caret"></b></a>
<ulclass="dropdown-menu"role="menu"aria-labelledby="dLabel">
<li><ahref="{{PageUrl}}">{{PageName}}</a></li>
{{#SubItems}}
<li{{#IsActive}}class="active"{{/IsActive}}><ahref="{{PageUrl}}">{{PageName}}</a></li>
{{/SubItems}}
</ul>
</li>
{{/HasSubNavigation}}
{{/Items}}
</ul>
 
</pre>