Login
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.
| Keyword | Allowable Values | Description |
| UsingBootstrap | true or false | Defines whether the skin uses Bootstrap. Based on this setting, YetaWF enables Bootstrap support. |
| UseDefaultBootstrap | true or false | Defines 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. |
| PartialFormCss | Css class | Defines the Css class added to a partial form. The css class is optional. |
| MinWidthForPopups | integer | Defines 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 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
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.
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
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.
The *.cshtml file that is used to render the page.
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.
Defines the Css class that is added to the <body> tag when the page skin is used.
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).
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).
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
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.
The *.cshtml file that is used to render the page.
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.
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.
Defines the overall width of the popup window (in pixels).
Defines the overall height of the popup window (in pixels).
Defines whether the popup window's Maximize button is enabled. Specify 1 to enable, 0 to hide the Maximize button.
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).
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).
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
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.
The Css class that is added to the module <div> when the module is rendered.
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.
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).
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).
On
Off