Introduction

Theme Settings

Settings provides a way to change how the template looks in couple of different ways. It's possible to set whole template settings via javascript and override some of the pages via html data attributes. It is part of the template core and should be included in every page like rest of the js/base content.

Settings covers below properties.

  • Horizontal or vertical menu placement
  • Boxed or fluid layout
  • Rounded, standard or flat border radius
  • Theme color
  • Menu color
  • Menu pinning aka locking

Usage

const settings = new Settings({ 
  attributes: { 
    placement: 'horizontal',
    behaviour: 'pinned',
    layout: 'fluid',
    radius: 'rounded',
    color: 'light-blue',
    navcolor: 'default'
  }, 
  showSettings: true, 
  storagePrefix: 'acorn-docs-',
  carryParams: false 
});

Reference

Properties

NAME
TYPE
DEFAULT
DESCRIPTION
NAME
options.attributes.placement
TYPE
string
DEFAULT
'vertical'
DESCRIPTION
Menu type, accepted values are "vertical", "horizontal".
NAME
options.attributes.behaviour
TYPE
string
DEFAULT
'pinned'
DESCRIPTION
Menu pin behaviour, accepted values are "pinned", "unpinned".
NAME
options.attributes.layout
TYPE
string
DEFAULT
'fluid'
DESCRIPTION
Layout mode, accepted values are "boxed", "fluid".
NAME
options.attributes.radius
TYPE
string
DEFAULT
'rounded'
DESCRIPTION
Border radius of the whole template, accepted values are "rounded", "standard", "flat".
NAME
options.attributes.color
TYPE
string
DEFAULT
'light-blue'
DESCRIPTION
Theme color, accepted values are "light-blue", "light-green", "light-red", "light-pink", "light-purple", "dark-blue", "dark-green", "dark-red", "dark-pink", "dark-purple".
NAME
options.attributes.navcolor
TYPE
string
DEFAULT
'default'
DESCRIPTION
Navcolor override, accepted values are default, "light", "dark".
NAME
options.storagePrefix
TYPE
string
DEFAULT
'acorn-standard-'
DESCRIPTION
Local storage key.
NAME
options.showSettings
TYPE
boolean
DEFAULT
true
DESCRIPTION
Hides settings button and panel when set to false.
NAME
options.carryParams
TYPE
boolean
DEFAULT
false
DESCRIPTION
Modifies anchor tag clicks and carries parameters from the current url to the new one. It's here mostly for demo purposes.

Methods

NAME
DESCRIPTION
NAME
updateAttribute
DESCRIPTION
Receives an id, value and updates the attribute.
NAME
getAttribute
DESCRIPTION
Receives an id and returns attribute.

Caller

Settings.js is called in the scripts.js file.

Examples

Setting Theme Color 
// Via Javascript                      
const settings = new Settings({ 
  attributes: { 
    color: 'dark-blue',
  }
});

// Via Html
<html data-override='{"attributes": {"color": "dark-blue" }}'>
Setting Menu Direction 
// Via Javascript
const settings = new Settings({ 
  attributes: { 
    placement: 'vertical',
  }
});

// Via Html
<html data-override='{"attributes": {"placement": "vertical" }}'>
Overriding Nav Color 
// Via Javascript
const settings = new Settings({ 
  attributes: { 
    navcolor: 'light',
  }
});

// Via Html
<html data-override='{"attributes": {"navcolor": "light" }}'>
Changing Layout 
// Via Javascript
const settings = new Settings({ 
  attributes: { 
    layout: 'boxed',
  }
});

// Via Html
<html data-override='{"attributes": {"layout": "boxed" }}'>
Changing Border Radius 
// Via Javascript
const settings = new Settings({ 
  attributes: { 
    radius: 'flat',
  }
});

// Via Html
<html data-override='{"attributes": {"radius": "flat" }}'>