Hide

YetaWF Documentation

Display
Print

Skin Definition

Each skin is part of a skin collection, which is implemented by a Skin Package. A skin collection is composed of multiple pages and popups. For example, the Bootstrap Skin, which is included in a standard YetaWF site offers two page skins, Default and Plain, and three popup skins (Small Popup, Medium Popup and Popup (Default)). This set of skins is called a skin collection.

When creating your own skin (see Create A New Skin) you can define any number of pages and popups by providing the necessary *.cshtml files in the Pages and Popups folders.

The Skin.txt file defines the usage of these pages and overall skin attributes.

Example:

FirstBootstrapSkin Skin (MyStuff)
UsingBootstrap false
UseDefaultBootstrap true
PartialFormCss well
MinWidthForPopups 0
::Pages::
Main (Default);Default.cshtml;Standard page with a header, footer and a main pane;pageSkinDefault;12;16
Plain;Plain.cshtml;** not used **;pageSkinPlain;12;16

Default;Default.cshtml;Standard page (optional jumbotron, multi-column, footer);pageSkinDefault;8;16
Plain;Plain.cshtml;Simple page for just one module;pageSkinPlain;8;16
::Popups::
Popup (Default);Popup.cshtml;Standard popup window (1000 x 700 pixels);popup;1000;700;0;8;16
Medium Popup;PopupMedium.cshtml;Medium popup window (700 x 500 pixels);popupMedium;700;500;0;8;16
Small Popup;PopupSmall.cshtml;Small popup window (500 x 300 pixels);popupSmall;500;300;0;8;16
::Modules::
Standard (Default);modStandard;Standard module;8;16

The first line defines the skin name as it is displayed to the user.

The following lines are each required and define attributes for the skin collection which apply to each page and popup.

KeywordAllowable ValuesDescription
UsingBootstraptrue or falseDefines whether the skin uses Bootstrap. Based on this setting, YetaWF enables Bootstrap support.
UseDefaultBootstraptrue or falseDefines whether the skin uses the default Bootstrap implementation provided by YetaWF. Based on this setting, YetaWF injects its Bootstrap implementation, which supports Bootswatch. A skin can provide its own implementation (complete copy of Bootstrap) if it needs a customized Bootstrap version. This property is ignored if UsingBootstrap is false.
PartialFormCssCss classDefines the Css class added to a partial form. The css class is optional.
MinWidthForPopupsintegerDefines the smallest window width (in pixels) that can support popup windows. Set to 0 to always allow popup windows.

The ::Pages:: section maps each *.cshtml file in the Pages folder to a name and description as it would be displayed to a user. The ::Popups:: section does the same for the Popups. Finally, the ::Modules:: defines the possible module skins (a Css class) that is added to a module when it is used with the skin.

Skin.txt Syntax

skin description
::Pages::
page_name;filename.cshtml;page_description;pagecss;average_charwidth;average_charheight
::Popups::
popup_name;filename.cshtml;popup_description;pagecss;average_charwidth;average_charheight
::Modules::
module_name;cssClass;module_description;pagecss;average_charwidth;average_charheight

Line 1

The first line skin description contains the skin description. This may be shown in dropdown lists or other places where the skin collection is shown to the user.

::Pages::

The ::Pages:: section defines all skin names, mapping them to the *.cshtml file in the Pages folder.

::Pages::
page_name;filename.cshtml;page_description;pagecss;average_charwidth;average_charheight
page_name

The name of the page skin. This may be shown in dropdown lists or other places where the skin name is shown to the user.

filename.cshtml

The *.cshtml file that is used to render the page.

page_description

Contains the skin description. This may be shown in dropdown lists or other places where the skin name is shown to the user. It is recommended to give a short summary of the page, such as available panes or other special features.

pagecss

Defines the Css class that is added to the <body> tag when the page skin is used.

average_charwidth

Defines the average character width in pixels. This is only used to scale items somewhat based on the expected character width. You can check the actual character dimensions using Tests > Module Skin Info (standard YetaWF site) which displays the actual character dimensions. These should be similar to the values entered in Skin.txt so items can scale (such as grid columns widths).

average_charheight

Defines the average character height in pixels. This is only used to scale items somewhat based on the expected character width. You can check the actual character dimensions using Tests > Module Skin Info (standard YetaWF site) which displays the actual character dimensions. These should be similar to the values entered in Skin.txt so items can scale (such as grid columns widths).

::Popups::

The ::Popups:: section defines all skin names, mapping them to the *.cshtml file in the Popups folder.

::Popups::
popup_name;filename.cshtml;popup_description;popupcss;width;height;maximize;average_charwidth;average_charheight
popup_name

The name of the popup skin. This may be shown in dropdown lists or other places where the skin name is shown to the user.

filename.cshtml

The *.cshtml file that is used to render the page.

popup_description

Contains the skin description. This may be shown in dropdown lists or other places where the skin name is shown to the user. It is recommended to give a short summary of the popup, such as actual popup dimensions or other special features.

popupcss

Defines the Css class that is added to the <body> tag or <div> tag when the popup skin is used. When using Single Page Applications, the popup window is rendered within a <div>. Otherwise, a popup is rendered in an <iframe> and the <body> tag receives the popupcss class.

width

Defines the overall width of the popup window (in pixels).

height

Defines the overall height of the popup window (in pixels).

maximize

Defines whether the popup window's Maximize button is enabled. Specify 1 to enable, 0 to hide the Maximize button.

average_charwidth

Defines the average character width in pixels. This is only used to scale items somewhat based on the expected character width. You can check the actual character dimensions using Tests > Module Skin Info (standard YetaWF site) which displays the actual character dimensions. These should be similar to the values entered in Skin.txt so items can scale (such as grid columns widths).

average_charheight

Defines the average character height in pixels. This is only used to scale items somewhat based on the expected character width. You can check the actual character dimensions using Tests > Module Skin Info (standard YetaWF site) which displays the actual character dimensions. These should be similar to the values entered in Skin.txt so items can scale (such as grid columns widths).

::Modules::

The ::Modules:: section defines all module skin names, mapping them to Css classes. Based on the module skin name, the specified Css class is added to the module <div> when the module is rendered.

::Modules::
module_name;cssClass;module_description;average_charwidth;average_charheight
module_name

The name of the module skin. This may be shown in dropdown lists or other places where the skin name is shown to the user.

cssClass

The Css class that is added to the module <div> when the module is rendered.

module_description

Contains the skin description. This may be shown in dropdown lists or other places where the skin name is shown to the user. It is recommended to give a short summary of the skin such as any special features it offers.

average_charwidth

Defines the average character width in pixels. This is only used to scale items somewhat based on the expected character width. You can check the actual character dimensions using Tests > Module Skin Info (standard YetaWF site) which displays the actual character dimensions. These should be similar to the values entered in Skin.txt so items can scale (such as grid columns widths).

average_charheight

Defines the average character height in pixels. This is only used to scale items somewhat based on the expected character width. You can check the actual character dimensions using Tests > Module Skin Info (standard YetaWF site) which displays the actual character dimensions. These should be similar to the values entered in Skin.txt so items can scale (such as grid columns widths).