=====================================================
MOC Pivot Documentation
=====================================================

This package contains the MOC Pivot implementation for Neos. The package implements the 1.5 version of Pivot HTML
templates.


Customization and configuration
=====================================================

The Pivot http://pivot.mediumra.re/ template provides different customzation options like, color-theme, navigation
and footer. In this Neos Package this is controlled using Settings under the MOC.Pivot namespace. Not all configuration
from the template builder on http://pivot.mediumra.re/ is available.

Choosing different Navigation concepts
--------------------------------------
The navigation concept can be changed using Settings MOC.Pivot.navigation.type. Possible values are

* topbar
* fullscreen
* simplebar
* containedbar
* centeredlogo
* offscreen

Depending on which navigation type is selected, different parts of the navigation component can be changed. For. instance
the address is controlled with MOC.Pivot.navigation.address and logo is controlled with MOC.Pivot.navigation.logoDark
and MOC.Pivot.navigation.lightDark

Some of the navigation concepts contains social icons. This is controlled with the MOC.Pivot.navigation.social

Yaml (Settings.yaml) ::

  MOC:
    Pivot:
      navigation:
        social:
          facebook: https://www.facebook.com/csis.dk
          twitter: https://twitter.com/peterkruse/

Possible icons are

* facebook
* twitter
* instagram
* linkedin
* pinterest

Additional TypoScript is required to add more social icons.

Overriding the rendering of the navigation component
----------------------------------------------------

The rendering of the Topbar navigation component can be changed by modifying the MOC.Pivot:Navigation.Topbar
TypoScript Object. Ie. to change how the buttons in the top of the navigationcomponent "Topbar" behaves, change this
TypoScript:

Yaml (Root.ts2) ::

  prototype(MOC.Pivot:Navigation.Topbar) {
  buttons >
  	buttons = TYPO3.TypoScript:Array {
		emergency = TYPO3.TypoScript:Tag {
			tagName = 'a'
			content = 'Emergency assistance'
			attributes {
				class = 'btn btn-primary btn-white btn-xs'
				href= TYPO3.Neos:NodeUri {
					node = ${q(node)}
				}
			}
		}

		englishFlag = TYPO3.TypoScript:Tag {
			tagName = 'img'
			attributes {
				src = TYPO3.TypoScript:ResourceUri {
					package = 'MOC.Pivot'
					path = 'img/english.png'

				}
			}
			@process.aTag = ${'<a href="#" class="language">' + value + '</a>'}
		}

		danishFlag = TYPO3.TypoScript:Tag {
			tagName = 'img'
			attributes {
				src = TYPO3.TypoScript:ResourceUri {
					package = 'MOC.Pivot'
					path = 'img/denmark.png'
				}
			}
			@process.aTag = ${'<a href="#" class="language">' + value + '</a>'}
		}
 	}

}

If more customzation is needed, a new template for this might be required by changing
MOC.Pivot:Navigation.Topbar.templatePath, the default is located here
resource://MOC.Pivot/Private/Templates/TypoScriptObjects/Navigation/Topbar.html



Overriding Color Scheme of the theme
------------------------------------

To change the color of the theme to one of the following you need to open the Settings.yaml file.
This is controlled by the MOC.Pivot.theme setting.

Settings.yaml:

 MOC:
  Pivot:
    theme: 'theme'

Possible values are:
* theme
* theme-aquatica
* theme-aspirin
* theme-blues
* theme-buddha
* theme-campfire
* theme-cobalt
* theme-dusk
* theme-eco
* theme-matte
* theme-mustang
* theme-rocklobster
* theme-sunset
* theme-tronic
* theme-zest


To change the font to one of the following you need to open the Settings.yaml file.
This is controlled by the MOC.Pivot.font setting.

Settings.yaml:

 MOC:
  Pivot:
    theme: 'theme'
    font: 'opensans'

Possible values are:
* opensans
* roboto
* lato
* titillium
* helvetica
* cardo
* libre