ToolBox -

The Global Page Template consists of three different areas:  The HEAD, BODY, and FOOTER sections.

Global Page Template

Each section allows HTML, Javascript, and CSS for your site customizations.  The JavaScript can be included directly in the GPT within < script > tags within any of the 3 fields, or you can reference an externally hosted JS file.  Similarly, with CSS, you can reference an external CSS file within the Head area of the GPT, or input your CSS directly with < style > tags.

HEAD:  This section should be used for either CSS or JavaScript.  Anything input into this box will appear within the < head > of the HTML Document.

BODY:  Any code that you enter within the BODY section of the GPT will go directly before the Kickapps main container div #ka_mainContainer.  The KickApps #ka_mainContainer wraps all Kickapps HTML within a div including the navigation, all site content (list pages, video play pages, profile pages), and footer information.

FOOTER:  Any code that you enter within the FOOTER section of the GPT will go directly after the #ka_mainContainer div.

Quick Note:  If you plan on doing site customizations within the GPT, it’s usually easiest to completely disable the site styler so as to have complete control over your customizations.

1.)  HEAD TIPS

  • It’s best practice to include all of your CSS references directly in the head of the GPT so that your styles will load before any HTML input.

2.)  BODY TIPS

  • If you’re trying to achieve a 2 or 3 column layout on your site, it’s helpful to begin a div within the BODY of the GPT, and immediately close that div at the top of the FOOTER within the GPT.  This will essentially wrap the #ka_mainContainer with your own div; something like #leftColumn in the screen shot above.  Your middle/right column div(s) can be placed directly after this closing div.

3.)  FOOTER TIPS

  • It’s best practice to include your JavaScript references in the footer of the GPT when you’re doing any DOM manipulation to any KA code.  This way the JS will run after all HTML has been initiated.