Theme Structure

You can view the available structures here.

Selecting a structure will copy its files into your sites theme files. These will include:

Base Files

config.txt.inc - a basic file used for configuring the template. These are the default settings and should then be configured from inside the 'Site Theme Config'
email_template.inc.html - a html file used for the email template.
template.inc - The basic template of your site

splash.inc - if this file exists it will be used as the splash page (home page) template for your site.

js

css

a.css - small font
aa.css - normal sized font
aaa.css - larger font
custom.css - any custom css you wish to apply
editor_only.css - css apoplied only to tinyMCE editor
styles.css - the base template/structure css styles
print.css - any print styles
ie*.css - any IE only styles (see bottom of page for more clarity)

Once you have chosen a structure you can edit it to suit your site.

Available Vairables

A structure can have two menus, both display as many children as needed.
[-MENU-] Will be replaced with MENU 1 or the main menu
[-SECONDARY-MENU-] The Sites secondary menu if you are using one

You can also display just the children from an active parent.

[-MENU-CHILDREN-] Will display the children from the main menu of the parent page.
[-SECONDARY-MENU-CHILDREN-] Will display the children associated with the secondary menu of the parent page.

eg: Main menu

About Us
Wellington Office
Auckland Office
Contact

If you have clicked on 'Wellington Office' and have [-MENU-CHILDREN-] in you template, this will be replaced with the items, 'Wellington Office' AND 'Auckland Office'. As these are children of 'About us', the parent of 'Wellington Office'.

Clicking on 'Contact' will leave this variable empty as it has no children.

Another example of this is the RH menu on this site.

A theme can also utilise variable content (not counting the main page content. This is displayed internally). These areas must be turned on in your 'Site Theme Config' settings so that the Flightdec Admin area knows to display it for your administrators.
[-CONTENT-TOP-] The sites top content, like a full width page banner or similar.
[-CONTENT-BOTTOM-] Content for the bottom of the page, could also be full width.
[-CONTENT-EXTRA-] Extra content that may be needed. Like a blurb for ontop of a banner or in a footer.
[-BANNER-ROTATOR-] Content to be placed in the banner to rotate, since dynamic content cannot be run

In addtion you may wish to reference the site itself
[-SITENAME-] will be replaced with the Site Name
[-SEARCH-] is replaced with the search term
[-THEME-] is replaced with the theme location
[-SUBSITE-] is replaced with the file location of the Subsite upload directory for access images and files
[-SITE_URL-] is replaced with the sites URL

Site Theme Config

You can also set the type of theme you are using and how the end user views the Flightdec options. Defaults are in bold.

Layout

Left Column = yes - does the theme have a left column, load AJAX modules to panel
Right Column = yes - does the theme have a right column, load AJAX modules to panel
Top Content = no - is the Top content enabled
Bottom Content = no - is the Bottom content enabled
Extra Content = no - is the Extra content area enabled

By default a rotating banner will look in /files/banners/default unless the current/loaded page has a directory created for it. This allows users to create special pages that have their own banners. eg: files/banners/home/

Banner Rotating = no - Does the banner rotate and do we need to load dynamic content for it
Banner Order = random - the banner order is random, aplha - the banner order is in alphabetical order (ascending, numbers first)
Banner Play = 0 - the banner changes by screen refresh if set to 0 or timed in seconds, ie 5
Banner Crossfade = yes - the banner will crossfade when changing or slide (push) when off
Banner Pagination = no - display the pagination buttons
Banner Buttons = no - display the next previous buttons

Allow Search = yes - Does the theme use a search feature, should the search form be printed
Display Flightdec Logo = yes - Does the theme display the Flightdec logo

Join Children = no - This will join all the Children of the page, on to this parent page to create a single page with sections
Join Children Menu = header - Place the created sectional menu at the head of each section like a header,
none - Don't create a sectional menu
left - Add the created sectional menu into the left column
top - Place the created sectional menu in the top only

Join Children Activation = click or hover to display children
display to always display children, children are not hidden,
hover-no-click to display on hover with no click through to parent section
display-no-click to display the parent with no affect and display the children

Main Menu

Fixed Navigation = no - does the theme use a navigation system we should leave alone (hard coded menu, so cant assign pages hide in admin)
Allow Secondary Menu = yes - Does the theme have a secondary menu we can assign pages to
Menu Display Activation = click - The way to activate children,
click or hover to display children
display to always display children,
hover-no-click to display on hover with no click through to page
display-no-click to display the parent with no affect and display the children
Print Children = no - does the theme have space to print main menu children, grab pages in menu
Menu Spacer = blank - the spacer used between elements if required

Secondary Menu

Print Secondary Children = no - Print the children in the secondary menu
Secondary Menu Spacer = blank - the spacer used between elements if required
Secondary Display Activation = click or hover to display children
display to always display children,
hover-no-click to display on hover with no click through to page
display-no-click to display the parent with no affect and display the children

Child Menu, Main Menu

Child Menu Display Activation = display -
Child Menu Children Spacer = blank - the spacer used between elements if required
Child Menu Print Children = no - Print the children in the secondary menu

Child Menu, Secondary Menu

Secondary Child Menu Display Activation = display -
Secondary Child Children Spacer = blank - the spacer used between elements if required
Secondary Child Menu Print Children = no - Print the children in the secondary menu

Special Cases

These variables are controlled by Flightdec and updated as required. When this happens the basic templates will generally follow suite but if you need to control your version in the theme you can put in the full url of the source of each file or 'NONE' if you wish to remove it.

jQuery = '//ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js' //will use jQuery version 1.12.3 from googles APIS
jQuery UI ='//ajax.googleapis.com/ajax/libs/jquery/1.11.4/jquery.min.js' //will use jQuery version 1.11.4 from googles APIS
jQuery UI CSS = '/js/jqueryUI-custom/css/custom-theme/jquery-ui-1.11.4.custom.min.css'
Bootstrap CSS = '//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'
Bootstrap JS = '//netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'
Fontawesome = '//netdna.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css'

This one is slightly different in that it requires a full string so we can attach more if required
Additional CSS Includes = '<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome-ie7.min.css" rel="stylesheet">' //will load ie7s compatiblity css sheet from bootstraps CDN

The fallback versions for older templates are: jQuery = 1.10.2, jQueryUI = 1.10.3, bootstrap = 2.3.2, fontawesome = 3.2.1

Custom Layouts

Page Templates

Flightdec will use a set of pre-defined templates that you can select to change the layout. If these do not suit you may create your own.

These must be placed inside the "template_page" directory inside the "Site Theme Editor" page. If this is not created you must create this.

Module Templates

The default layout for modules can also be altered. You can click "Modify Template" at the top of the "Site Theme Editor" page. This will copy the existing template into your sites theme directory to modify it. This will override the default layout for your site.

You can also create a new style for the modules. These must be placed inside the "template_module" directory inside the "Site Theme Editor" page. If this is not created you must create this.

Included Flightdec Features

Flightdec itself will run a few features that may be useful and also include some well know libraries you may wish to use.

Javascript

Flightdec utilises Twitter Bootstrap. Unfortuanlty this currently conflicts with a few functions inside jQueryUI. As such Flightdec will use jQuery and loads its library from //ajax.googleapis.com/ajax/libs/jquery. It will then extend that with a custom jQueryUI library that has buttons and a few other conflicts removed for bootstrap.

A few custom functions are also loaded. See /js/functions if you wish to utilise these. Of note is:

fd_ajax ( parameters, updateID )
A function to call an ajax request and update an element as loading. The ajax request will process the returned javascript and put a loading icon on the element found by updateID while processing the request. This url will get appended with fd-ajax=1 to identify it as an ajax request.
This function maya also be used to process forms by passing in a variable of form=1
eg : onclick=" fd_ajax( { run: 'my_ajax_function', ID:'my_update_id', var2 :'second_var' }, 'update_me' ) ;"

ajaxQ ( ajaxOpts )
This has also been extended with a queable function where it will que up all the requests and run them one after another. This is for functions that require the order to be precise. If you also pass in a variable with "lock_element" then then the function will lock it to prevent updatding or submitting again.
eg : onclick=" ajaxQ ( { run: 'my_ajax_function', ID:'my_update_id', var2 :'second_var', 'lock_element' : 'update_me' } ) ;"

modal_delete ()
A modal window can also be activated with a confirm button for processing ajax requests. Any element with the class .modal-delete or .modal-confirm will generate an associated modal window. The attributes for the ajax request should be stored in data-run = "", modal title in data-title and the confirm text in the title tag.

During processing if the run attribute is found to be an object the ajaxQ function will be fired with those attirbutes passed. If it is not an object, then it will look for a data-click attribute and if found then run script associated with this. The fall back this will cause the window.location to change upon confirming to and location found in data-href.

eg: <a href="javascript:;" data-title="Delete this page" title="Do you wish to delete this page. You cannot undo this action." class="modal-delete" data-run='{ "run" : "delete" , "passedID" : "123"} '> </a>

<a href="javascript:;" data-title="Add New Setting" title="Enter the title of the new setting?" data-run='{"run":"insert"}' class="modal-prompt btn blue f-right" >New field </a>

<p class="tips" title="Extra domains that your visitors may enter into their browser to visit your site. eg Flightdec.co.nz These will be redirected to your main domain. " data-href="/flightdec sites#secondary-domains">Additional site domains you wish to assign to this site

click_tracker ( )
The click tracker function utilises the google analytices event tracker feature. Taking any anchor tag with http in the href or the class .download-track ( jQuery('a:external, .download-track') ) and attaching a class of tracked and an event to prevent going forward while the track_event function is run. Pushing the clicked event through to Google Anayltics for tracking then setting the timeout to open the link 200 milliseconds later. If the link has a class of 'pop' the link is not opened as the event will be in a new window. To prevent local events. use relative URLS.

required_tracker ( )
Attach the font awesome asterisk to required form elements. Using jQuery('.required') to get a list of elements and appending the fa-asterisk element and class

CreateTimer( timer_el, target, start )
Create a timer, where the timer_el is the element to store the timer, target is the time to count to and start is where to count from.

equalHeights(el, minWidth, minHeight, maxHeight )
An extension to jQuery to create equal height columns on a set of elements. Will use javascript to calculate the highest column and set each element in the passed list to be that height +20px. If the column has a class of 'equalHeights-nopad' then no padding will be added.
eg: equalHeights('.fixed-equalHeights' );

process_openers()
Will search the page for any sliders or hover openers and associate them with their targets. Relys on the correct amount of elements.
Searched elements include:

Hovers - .hover-opener and .hover-slider

Sliders - .details-opener and .details-slide

Modals - .bootstrap-modal-btn and .bootstrap-modal-content

eg en element with .hover-opener will be associated with the next element with .hover-slider

image_hover_check ( )
An image with a class of .hover-swap will be targeted for an event listener of hover. It will then swap the source image out with an alternative by appending -hover to the file name.

eg: src="my-image.jpg" will become src="my-image-hover.jpg" when hovered over.

CSS

Flightdec will check each directory if special files exists and include them in the HTML.

IE cases:

<!--[if IE]> - css/ie_only.css
<!--[if lte IE 6]> - css/ie6.css
<!--[if IE 7]> - css/ie7.css
<!--[if IE 8]> - ie8.css
<!--[if lte IE 9]> - LTE-ie9.css
<!--[if lte IE 8]> - LTE-ie8.css

Font Sizer:

normal - css/aa.css
small - css/a.css
large css/aaa.css

General

Theme styles : css/styles.css
Print styles : css/print.css
Custom styles : css/custom.css

Flightdec utilises Bootstrap and fontawesome icons. This means that you can apply simple icons and features from both to create an interactive simple to use site. Flightdec will also scan a generated page for many classes and attach events or features that are relevent.

Classes to note:

a.pop Any anchor tag with a class of 'pop' will open in a new window _poped with a width and height of 800px.

a.tips A anchor tag with a class of 'tips' will have a hover tip attached to with and a ? icon. To use these a tip should look like :
<a href="javascript:;" class="tips" title="Tip title :: Tip description for window ">help with form</a>

Also note that the TOP and text size icons are fixed features of Flightdec using ScrollSpy by David Walsh (http://davidwalsh.name) and a javascript styleswitcher using a.css, aa.css, aaa.css changing the text size.