The Skin Config allows designers to control many aspects of the of mojoPortal from within their skin. The general purpose is to provide designers with as much control over the look and feel of the site as possible.

Note This feature was introduced in mojoPortal 2.9, prior versions relied mostly on web.config and theme.skin settings for this functionality.

Key Points

1. The config file is saved as JSON to <skin folder>/config/config.json.
2. Each skin has its own config.json file. There is no way to share files.
3. This file is not currently required but that is likely to change in the future. 
4. Any properties listed with WebConfigSettings. as their default get their default value from the web.config. You cannot use this value in your json; to use a default, simply do not include the property in your json.

Configurable Properties

Display

MenuOptions

SkinContentTemplate

EditorStyle

EditorConfig

To include editor configuration, you must set the value of this property to an array of named EditorConfig objects. Documentation on individual editor configuration files can be found with each editor.

Example

"EditorConfig": {
   "all": {
       "CssPath": "$SkinPath$/css/editor.css",
       "UseSkinCss": true,
       "ContainerCssClass": "wysiwygeditor modulecontent bloop"
   },
   "CkEditor": {
       "ConfigPath": "$SkinPath$/config/ckeditor.js",
       "CssPath": "$SkinPath$/css/ckeditor.css",
       "UseSkinCss": true,
       "Theme": "moono-lisa"
   },
   "TinyMCE": {
       "ConfigPath": "$SkinPath$/config/tinymce.json",
       "CssPath": "$SkinPath$/css/tinymce.css",
       "UseSkinCss": true
   }
}, 

PanelOption

This property replaced the LayoutOptions control, which was used in theme.skin to set CSS classes and display options for layout panels used in the layout. Master.

Example

"Panels": [
  {
  "Name": "RightOnlyCss",
  "Class": ""
  },
  {
  "Name": "CenterNoLeftSideCss",
  "Class": "col-md-9 center-right foo"
  },
  {
  "Name": "CenterNoRightSideCss",
  "Class": "col-md-9 center-left"
  },
  {
  "Name": "CenterNoLeftOrRightSideCss",
  "Class": "col-md-12 nomargins"
  },
  {
  "Name": "CenterWithLeftAndRightSideCss",
  "Class": "col-md-6 center-left-right"
  },
  {
  "Name": "EmptyCenterCss",
  "Class": ""
  },
  {
  "Name": "HideEmptyCenterIfOnlySidesHaveContent",
  "Bool": false
  },
  {
  "Name": "ShowLeftColumnOnSearchResults",
  "Bool": false
  },
  {
  "Name": "ShowRightColumnOnSearchResults",
  "Bool": false
  }
]

DisplaySettings

mojoPortal has long supported customizing control display using "DisplaySettings" controls in the theme.skin file. This worked fine for all included controls but any controls added by plugins could not be added to the theme.skin until the plugins are installed otherwise errors would be thrown, preventing use of the site entirely.

With mojoPortal 2.9.1, all DisplaySettings controls now inherit from BaseDisplaySettings class, which looks for its settings in the skin config folder. This is a major improvement because skin designers can include plugin related display settings with their skins without worrying whether or not the sites using their skins have the plugins. Likewise, plugin developers can include their related display settings in their plugin releases without worrying about overwriting those settings made by skin designers. 

The properties of individual DisplaySettings controls varies greatly so we haven't listed them in this document. You can easily find these on GitHub by searching for BaseDisplaySettings and BasePluginDisplaySettings.