Skip to Content search facebook instagram pinterest twitter youtube

Skins

Website skins are used to define the design, layout, and functionality of your site.

Skins are stored as sub-directories in the skins directory. You can switch your website between displaying these different skins, allowing you to instantly change the style of your website. If you are using subsites (a feature where a single CMS powers multiple sites) then each subsite can use a different skin.

Choosing a skin

You can select which skin your website is using within the subsites area of SproutCMS.

subsites-dropdown

Installing a theme

If you wish to install a ready-made theme provided to you by someone else, simply copy the root folder of your skin to the skin directory. Then just set your site to display the new theme in the subsites area.

Included themes

A fresh SproutCMS install includes two skins called default and unavailable.

Default skin

This is included as an example of a functioning skin. If you wish to use this skin and modify it to your liking, then duplicate the default folder as a new skin as any changes made to this directory will be overwritten by future SproutCMS updates.

Unavailable

This special skin directory can be used to temporarily disable a website, e.g. for maintenance. Unlike a regular skin, this is activated via a config option in config/sprout.php.

By default this option is disabled like so: $config['unavailable'] = ''; You can activate the unavailable skin by setting this config to the name of the template you'd like to display. For example if you wish to display unavailable/coming_soon.php  you would set the config to $config['unavailable'] = 'coming_soon';.

When active, all pages will be redirected to the template set in the config; however you can bypass this by being logged into SproutCMS admin area.

Structure

Each skin is comprised of multiple files including:

  • Home page template - home.php
  • Inner page templates - inner.php, wide.php, etc
  • Exception template - exception.php
  • Email template - email.php
  • CSS - inside the css directory
  • JavaScript - inside the js directory
  • Images - typically in an images directory

It's also possible to further organise the template into partials, using the php function require, if desired. As well as this, additional templates (e.g. product.php or blog_post.php) can be defined to fulfill operational or modular requirements.

Skin configuration

Configuration options of skins are set in {skin-directory}/config/sprout.php. Some options include your website title, template assignment, and locales.

For example, to set the title of your website you would use $config['site_title'] = 'Your title here';.

Data passed to templates 

The framework does not impose any requirements to the data passed to the skin views, although the cms features (such as pages, search, etc) will pass the following values into the inner page templates:

  • $page_title - the name of the page, typically used in the main <h1> tag
  • $browser_title - the value to use in the <title> tag; if not provided this should be derived from $page_title
  • $main_content - the main HTML content
  • $post_crumbs - additional breadcrumb segments, as an array; not always provided
  • $tags - array of content tags; not always provided