MatterTheme

"Matter" is a modern look & feel theme for NatSkin with a strong focus on simplicity yet still flexibility. With a few clicks pages can be customized to give them a unique touch and thus make content more memorizable. The theme is inspired by google's material and flat design but does not strictly follow the trend in full detail.

The theme is the default theme setting if not specified otherwise, or can be set using

   * Set NATSKIN_STYLE = matter

Variations

   * Set NATSKIN_VARIATION = topmenu

There is one variation called topmenu that can be enabled optionally to the matter theme. This will move the menu at the top to the far right making room for larger logos. Note that this will disable the "greeter" section that normally holds the authentication/registration links or a logged in user's avatar and link to the account page.

Parameter

This theme comes with a set of own preference settings that can be either set on a per topic base using on the "Settings" tab of the editor, or may be set in the WebPreferences, SitePreferences and a user's private settings. In addition to the usual preferences of NatSkin below settings mainly are used to customize a banner at the top of a topic.

Preference	Description	Default
NATSKIN_BANNERMODE	select the kind of banner to be displayed; possible values: off: no banner autocolor: compute a color automatically based on the banner title geopattern: an abstract pattern automatically computed based on the banner title gradient: a radial or linear gradient background image: an image background that may be animated optionally monochrome: a single color pixabay_image: an image background fetched from pixabay (requires Foswiki:Extensions/PixabayPlugin) pixabay_video: a video background fetched from pixabay (requires Foswiki:Extensions/PixabayPlugin) section: the content of a named topic section slideshow: a slideshow of image attachments or a set of named topic sections trianglify: an abstract pattern made if triangular shapes video: a video background; an mp4 file is recommended	off
NATSKIN_BANNERTOPIC	topic holding the image or video attachments usedin image or video mode	current topic
NATSKIN_BANNERIMAGE	name of an image attachment to be displayed; used in image mode	/pub/System/MatterTheme/images/bubbles.png
NATSKIN_BANNERVIDEO	name of a vide to be displayed; used in video mode	/pub/System/MatterTheme/videos/clouds.mp4
NATSKIN_BANNERVIDEOLOOP	boolean flag to specify whether the banner video should be looped or halted after being played once	on
NATSKIN_BANNERFOREGROUND	possible values: light, dark; specify the contrast of the font on the banner; use light when the banner background is dark, or dark otherwise	light
NATSKIN_BANNERCOLOR	this color is used in modes flat, image, gradient and pattern to specify the background color of the banner	%WEBBGCOLOR%
NATSKIN_BANNERCOLOR2	second color used in gradient mode	transparent
NATSKIN_BANNERGRADIENT	specifies whether the gradient should be radial or linear	radial
NATSKIN_BANNERTITLE	title text to be displayed on the banner	TopicTitle of the current topic
NATSKIN_BANNERSUBTITLE	subtitle to be displayed on the banner	Summary formfield of the current topic
NATSKIN_ENABLEBANNERTITLE	boolean switch that allows to show/hide the title on the banner	on
NATSKIN_BANNERANIMATION	boolean switch used in image mode to enable a kenburns-like animation of the background image	off
NATSKIN_BANNERPOSITION	vertical position in percent of the background image; only used in image mode; note that this parameter can be specified interactively by dragging the background image and the clicking on the "save" icon	50
NATSKIN_BANNERANIMATIONENABLED		off
NATSKIN_BANNERATTACHMENTS
NATSKIN_BANNERAUTOCOLORHUEFROM		0
NATSKIN_BANNERAUTOCOLORHUETO		359
NATSKIN_BANNERAUTOCOLORLIGHTNESS		[50,65,80]
NATSKIN_BANNERAUTOCOLORSATURATION		[50,65,80]
NATSKIN_BANNERAUTOCOLORSEED
NATSKIN_BANNERCOLOR2		%WEBBGCOLOR
NATSKIN_BANNERCOLOR		#B9DAFF
NATSKIN_BANNERCONNECTPARTICLES		true
NATSKIN_BANNERCONTENT		attachments
NATSKIN_BANNERHEIGHT
NATSKIN_BANNERMAXPARTICLES		70
NATSKIN_BANNERPARALLAXENABLED		off
NATSKIN_BANNERPARTICLESCOLOR		#ffffff
NATSKIN_BANNERPARTICLESENABLED		off
NATSKIN_BANNERPIXABAYCATEGORY
NATSKIN_BANNERPIXABAYEDITORSCHOICE
NATSKIN_BANNERPIXABAYIMAGETYPE		allimages
NATSKIN_BANNERPIXABAYQUERY
NATSKIN_BANNERPIXABAYRANDOM
NATSKIN_BANNERPIXABAYVIDEOTYPE		allvideos
NATSKIN_BANNERSECTION
NATSKIN_BANNERSEED
NATSKIN_BANNERSIZEVARIATION		3
NATSKIN_BANNERSLIDESHOWDELAY		5000
NATSKIN_BANNERSLIDESHOWDIRECTION
NATSKIN_BANNERSLIDESHOWEFFECT		slide
NATSKIN_BANNERSLIDESHOWNAVIGATIONENABLED		off
NATSKIN_BANNERSLIDESHOWPAGINATION
NATSKIN_BANNERSLIDESHOWSPEED		2000
NATSKIN_BANNERSLIDESHOWTOPIC		current topic
NATSKIN_BANNERSPEED		0.5
NATSKIN_BANNERTEXTALIGN
NATSKIN_BANNERTEXT
NATSKIN_BANNERTEXTEFFECT		off