Aa  Aa  Aa 

Aa

Aa

Aa

Thursday, November 14, 2019
Minimize
Readme

Welcome to the MySkins demo page:

  1. Select a skin or container package to edit from the skin package dropdown.
  2. Select the skin or container to edit from the skin or container dropdown. (Note that the skin or container dropdown is only visible if a skin package is selected.)
  3. Click on the edit button next to the skin or container dropdown to load the skin or container editor. (Note that the edit button is only visible if a skin or container is selected.)

Please note that for demo purposes the save buttons have been disabled on both the skin and container editor.

 
Minimize
MySkins
 

Select a Profile to Edit.
Select a Skin Package to edit.
Select a Skin to edit.
Select a Container to edit.
MySkins - Skin Editor
Creative Engine
Select a Profile.
The name of this Skin (Read-only).
 
Give the Skin an appropriate description.
Hide some of the more advanced controls to simplify editing common Skin features.
Themes - Color
Hide some of the more advanced controls on this Tab to simplify editing common features.
Select a Color Algorithm.
Select a Color Sorting Option to sort the Primary and Secondary Colors.
Select a Color Assignment Option.
Select a value for the Color Algorithm shading.
Select a value for the Color Algorithm tint.
Select a value for the Color Hue Increment. (This value has no effect on the Uni Color Synergy Algorithm.)
Select a value for the Color Hue Offset.
Select a Master Color.
Select Primary Colors. (Primary X, Primary Y, Primary Z)
Select Secondary Colors. (Secondary X, Secondary Y, Secondary Z)
Themes - Font
Hide some of the more advanced controls on this Tab to simplify editing common features.
Select a Text Object.
Select Text Colors. (Normal, Link, Hover)
Toggle the Text Decoration (Underline) On/Off.
Set the Text Alignment.
Set the Text Transformation.
Select a Font Family.
Select a Font Size.
Override the Font Line-Height.
Set the Font Line-Height.
Select the Font Options. (Bold, Italics, Small-caps)

Select a Text-Shadow.
Enable or Disable the Text-Shadow.
Set the Text-Shadow Blur.
Set the Text-Shadow Offset.
Select a Text-Shadow Color.

Set the Font Proportion for small font sizes. This proportion is used in conjunction with the Resize Bar.
Set the Font Proportion for large font sizes. This propotion is used in conjunction with the Resize Bar.
Icons
Hide some of the more advanced controls on this Tab to simplify editing common features.
When selecting one Icon, MySkins tries to sync the other icons with a similar name.
Select a User Icon.
Set the User Icon Background Dimensions. (Width, Height)
Select a Login Icon.
Set the Login Icon Background Dimensions. (Width, Height)
Select a Search Icon
Set the Search Icon Background Dimensions. (Width, Height)
Select a Breadcrumb Icon.
Set the Breadcrumb Icon Background Dimensions. (Width, Height)
Tokens
Hide some of the more advanced controls on this Tab to simplify editing common features.
Select a Token to edit.
Set the Token Margins. (Top, Bottom, Left, Right)
Set the Token Visibility.
Select an Area for the Token.
Set the Token Horizontal Alignment.
Set the Token Margins. (Top, Bottom, Left, Right)
Set the Logo Padding. (Top, Bottom, Left, Right)
Select a Logo Background Color.
Set the Logo Background Transparency.
Set the Search Padding
Select a Search Background.
Set the Search Background Border Padding.
Select a Search Icon
Set the Search Icon Background Dimensions. (Width, Height)
Set the Search Icon Horizontal Alignment.
Set the Search Text Box Dimensions. (Width, Height)
Select an Input Background Color.
Select a Search Background Color.
Set the Search Background Transparency.
Set the Login Padding. (Top, Bottom, Left, Right)
Select a Login Icon.
Set the Login Icon Background Dimensions. (Width, Height)
Select a Login Background Color.
Set the Login Background Transparency.
Set the User Padding. (Top, Bottom, Left, Right)
Set the User Item Separator Width.
Select a User Icon.
Set the User Icon Background Dimensions. (Width, Height)
Select a User Background Color.
Set the User Background Transparency.
Set the Breadcrumb Padding
Select Breadcrumb Background.
Set the Breadcrumb Background Border Padding. (Left, Right, Separator)
Select a Breadcrumb Icon.
Set the Breadcrumb Icon Background Dimensions. (Width, Height)
Set the Breadcrumb Text.
Set the Breadcrumb Text Visibility.
Set the Breadcrumb Separator Character Visibility (>). The Separator may not be required if a Breadcrumb Background is selected.
Select a Breadcrumb Background Color.
Set the Breadcrumb Background Transparency.
Set the Social Media Token Padding. (Top, Bottom, Left, Right)
Set the Social Media Network Items Padding. (Top, Bottom, Left, Right)
Select a Social Media Icons Theme.
Select a Social Media Network Item Icon Size.
Select a Social Media Token Background Color.
Set the Social Media Token Background Transparency.
Set whether the Token should be placed in a New Line.
Set the Token Visibility.
Social Networks
Hide some of the more advanced controls on this Tab to simplify editing common features.
Select a Social Network.
Set the Social Network Url.
Set the Social Network Target. (New Window or Current Window)
Set the Social Network Icon Visibility.
Main Menu
Hide some of the more advanced controls on this Tab to simplify editing common features.
Set the Main Menu Orientation.
Set the Menu Horizontal Alignment.
Select a Main Menu Background.
Set the Main Menu Background Border Padding. (Left, Right)
Set the Vertical Menu starting Position.
Set the Maximum Width of the Vertical Main Menu as a proportion of the Page Width.
Set the Vertical Menu Area Padding.
Select a Main Menu Background.
Set the Main Menu Background Border Padding. (Top, Bottom, Left, Right)
Select a Main Menu Color.
Set the Main Menu Background Transparency.
Set the Main Menu Padding. (Top, Bottom, Left, Right)
Set the Main Menu Visibility.

Select a Menu Item.
Set the Main Menu Type.
Select a Main Menu Bar Theme.
Select a Main Menu Button Theme.
Select a Main Menu Tab Theme.
Set the Main Menu Item Background Padding.
Select a Menu Item Text Color.
Select a Menu Item Color.
Set the Main Menu Item Background Transparency.
Set the Menu Item Text Alignment.
Set the Main Menu Item Text Transformation.
Toggle the Menu Item Text Decoration (Underline) On/Off.
Select a Menu Item Font Family.
Select a Menu Item Font Size.
Select the Main Menu Font Options

Enable or Disable the Text-Shadow.
Set the Text-Shadow Blur.
Set the Text-Shadow Offset.
Select a Text-Shadow Color.

Set the Main Menu Item Separator Height/Width.
Set the Menu Item Padding. (Top, Bottom, Left, Right)
Sub Menu
Hide some of the more advanced controls on this Tab to simplify editing common features.
Select the Type of Sub Menu.
Select a Sub Menu Background.
Select Sub Menu Color.
Set the Sub Menu Background Transparency.
Set the Number of Mega Menu Columns.
Set the Width of a Mega Menu Column.
Set the Mega Menu Item Indent.
Toggle Mega Menu Full Screen On/Off.
Set the Mega Menu Node (Island) Padding. (Top, Bottom, Left, Right)
Set the Sub Menu Margins. (Top, Bottom, Left, Right)
Set the Sub Menu Padding. (Top, Bottom, Left, Right)
Set the Sub Menu Alpha.
Set Sub Menu Visibility.

Select a Menu Item.
Set the Sub Menu Type.
Select a Sub Menu Bar Theme.
Select a Sub Menu Button Theme.
Select a Sub Menu Tab Theme.
Set the Sub Menu Item Background Padding.
Select Sub Menu Text Colors. (Normal, Active, Hover)
Select Sub Menu Item Color.
Set the Sub Menu Item Background Transparency.
Set the Sub Menu Item Text Alignment.
Set the Sub Menu Item Text Transformation.
Toggle the Menu Item Text Decoration (Underline) On/Off.
Select a Sub Menu Font Family.
Select a Sub Menu Font Size.
Select the Sub Menu Font Options. (Bold, Italics, Small-caps)

Enable or Disable the Text-Shadow.
Set the Text-Shadow Blur.
Set the Text-Shadow Offset.
Select a Text-Shadow Color.

Set the Sub Menu Item Separator Height.
Set the Sub Menu Item Padding. (Top, Bottom, Left, Right)
Background
Hide some of the more advanced controls on this Tab to simplify editing common features.
Select a Background Layer to edit.
Select the Type of Background Layer.
Select a Non-Transparent Background Image.
Select a Transparent Background Image.
Select a Background Pattern.
Select a Background Overlay Image.
Select a Background Fill Color.
Set Layer Transparency.
Set the Layer Horizontal Position.
Set the Layer Vertical Position.
Set the Layer Position.
Set whether the Background Layer Image should repeat horizontally.
Set whether the Background Layer Image should repeat vertically.
Make the Background Layer Fixed or Scrollable.
Banner
Hide some of the more advanced controls on this Tab to simplify editing common features.
Toggle Custom Banner On/Off.
Set the Type of Banner Image.
Select a Jumbo Banner Image.
Select a Banner Image (Full Non-Transparent).
Select a Banner Image (Full Transparent).
Select a Banner Image (Left).
Select a Banner Image (Right).
Make the Banner Image Fixed or Scrollable.
Select a Banner Overlay Pattern.
Reverse the order of the Image and Overlay Layers.
Select a Banner Border.
Set the Banner Border Padding. (Top, Bottom, Left, Right)
Set the Banner Background Color.
Set the Banner Background Transparency.
Set the Banner Horizontal Alignment.
Set the Banner Vertical Alignment.
Set the Banner Height.
Set the Banner Padding. (Top, Bottom, Left, Right)
Set the Image Pane Position and Dimensions. (Top, Left, Height, Width)
Page
Hide some of the more advanced controls on this Tab to simplify editing common features.
Set the Page Width Type.
Set the Page Width.
Set the Page Width.
Set the Page Width. (Small)
Set the Page Width. (Large)
Toggle Page Full Height.
Set the Page Margins. (Top, Bottom)
Set the Page Horizontal Alignment.
Set the Page Horizontal Offset.
Select a Page Background Pattern.
Select a Page Border.
Set the Page Border Padding. (Top, Bottom, Left, Right)
Select Page Color.
Set the Page Transparency.
Header
Hide some of the more advanced controls on this Tab to simplify editing common features.
Select a Header Area.

Set the Area Padding. (Top, Bottom, Left, Right)
Override the Page Color with the Header Area Background Color.
Select a Header Area Background Color.
Set the Header Area Background Transparency.
Override the Page Background Pattern with the Header Area Background Pattern.
Select a Header Area Background Pattern.
Override the Page Border with the Header Area Border.
Select a Header Area Border.
Set the Header Area Border Padding. (Top, Bottom, Left, Right)
Disconnect Area Top from Page.
Set the Area Top Margin.
Disconnect Area Bottom from Page.
Set the Area Bottom Margin.
Set the Header Area to Full Screen Mode.
Set the Header Area Background to Full Screen Mode.
Show Area Border.
Set Area Visibility.

Select a Header Background Pattern Overlay.
Select a Header Background Color.
Set the Header Background Transparency.

Logo Area
Banner Area
Menu Area
Breadcrumb Area
Content
Hide some of the more advanced controls on this Tab to simplify editing common features.
Set the Content Area Padding. (Top, Bottom, Left, Right)
Override the Page Color with the Content Area Background Color.
Select a Content Area Background Color.
Set the Content Area Background Transparency
Override the Page Background Pattern with the Content Area Background Pattern.
Select a Content Area Background Pattern.
Override the Page Border with the Content Area Border.
Select a Content Area Border.
Set the Content Area Border Padding. (Top, Bottom, Left, Right)
Disconnect Area Top from Page.
Set the Area Top Margin.
Disconnect Area Bottom from Page.
Set the Area Bottom Margin.
Set the Content Area to Full Screen Mode.
Set the Content Area Background to Full Screen Mode.
Show Area Border.
Pane Layout - Content
Hide some of the more advanced controls on this Tab to simplify editing common features.
Select a Content Layout Configuration.
Select a Splash Content Layout.
Select a Simple Content Layout.
Select a Complex Content Layout.
Set the Content Layout Panes Padding. (Top, Bottom, Left, Right)
Set the Left and Right Sidebar Proportions.
Select a Content Layout Row.
Select which column has a fluid/responsive width. (Left, Right)
Select which column has a fluid/responsive width. (Left, Middle, Right)
Set the width Proportions for the fixed Row Column. (Left or Right)
Set the width Proportions for the fixed Row Columns. (Left, Middle or Right)
Resize Bar
Hide some of the more advanced controls on this Tab to simplify editing common features.
Set the Resize Bar Orientation.
Select a Resize Bar Horizontal Theme.
Set the Resize Bar Background Border Padding. (Left, Right)
Set the Resize Bar Horizontal Alignment.
Set the Resize Bar Horizontal Offset.
Select a Resize Bar Vertical Theme.
Set the Resize Bar Background Border Padding. (Top, Bottom)
Set the Resize Bar Vertical Offset.
Select a Resize Bar Color.
Set Resize Bar Background Transparency.
Select Resize Bar Text Colors. (Normal, Active, Hover)
Select a Resize Bar Font Family.
Select a Resize Bar Font Size.
Select the Resize Bar Font Options
Set the Resize Bar Padding. (Top, Bottom, Left, Right)
Set the Resize Bar Item Padding. (Top, Bottom, Lef, Right)
Set Resize Bar Visibility.
Borders
Hide some of the more advanced controls on this Tab to simplify editing common features.
Select a Border.
Override the Page Border Settings.
Set the Borders Individually. (Top-left, Top-right, Bottom-left, Bottom-right)
Select a Border Style.
Select a Border Color.
Set the Border Width.
Set the Horizontal and Vertical Border Radius.
Select a Top Border Style.
Select a Bottom Border Style.
Select a Left Border Style.
Select a Right Border Style.
Select Border Colors. (Top, Bottom, Left, Right)
Set the Border Width. (Top, Bottom, Left, Right)
Set the Border Horizontal Radii. (Top-Left, Top-Right, Bottom-Left, Bottom-Right)
Set the Border Vertical Radii. (Top-Left, Top-Right, Bottom-Left, Bottom-Right)
Set the Skin CSS Border Padding. (Top, Bottom, Left, Right)


Enable or Disable the Box-Shadow.
Set the Box-Shadow Blur.
Set the Box-Shadow Offset. (X-Offset, Y-Offset)
Set the Box-Shadow Color.
Set the Box-Shadow Inset.
Color Gradients
Hide some of the more advanced controls on this Tab to simplify editing common features.
Select a Color Gradient.
Select a Background Layer to edit.
Enable or Disable the Color Gradient.
Set the Color Gradient Repetition On or Off.
Set the Size of a single Gradient Repeating Section.
Set the Type of Gradient.
Select a Linear Gradient Direction.
Set the Linear Gradient Direction Angle.
Set the Radial Gradient Shape.
Select a Radial Gradient Position.
Set the Radial Gradient Position Offset. (X-Offset, Y-Offset)
Select the Radial Gradient Fade Type.


Select a Color Stop.
Select a Color.
Enable or Disable the Color Stop Starting Position.
Set the Color Stop Starting Position.
Enable or Disable the Color Stop Width.
Set the Color Stop Width.
HTML Elements
Hide some of the more advanced controls on this Tab to simplify editing common features.
Select an HTML Element to edit.
   Cancel
MySkins - Container Editor
Creative Engine
Select a Profile.
The name of this Container (Read-only).
 
Give the Container an appropriate description.
Hide some of the more advanced controls to simplify editing common Container features.
Color
Hide some of the more advanced controls on this Tab to simplify editing common features.
Select a Color Algorithm.
Select a Color Sorting Option to sort the Primary and Secondary Colors.
Select a Color Assignment Option.
Select a value for the Color Algorithm shading.
Select a value for the Color Algorithm tint.
Select a value for the Color Hue Increment. (This value has no effect on the Uni Color Synergy Algorithm.)
Select a value for the Color Hue Offset.
Select a Master Color.
Select Primary Colors. (Primary X, Primary Y, Primary Z)
Text
Hide some of the more advanced controls on this Tab to simplify editing common features.
Select a Text Object.
Set whether the Container Text Object will override the Skin Text Object.
Select Text Colors. (Normal, Link, Hover)
Toggle the Text Decoration (Underline) On/Off.
Set the Text Alignment.
Set the Text Transformation.
Select a Container Font Family.
Select a Container Font Size.
Override the Font Line-Height.
Set the Font Line-Height.
Select the Font Options. (Bold, Italics, Small-caps)

Select a Text-Shadow.
Enable or Disable the Text-Shadow.
Set the Text-Shadow Blur.
Set the Text-Shadow Offset.
Select a Text-Shadow Color.
Title
Hide some of the more advanced controls on this Tab to simplify editing common features.
Set the Container Icon Horizontal Alignment.
Set Container Icon Visibility.


Select a Container Title Text Color.
Toggle the Title Text Decoration (Underline) On/Off.
Set the Container Title Text Alignment.
Set the Container Title Text Transformation.
Select a Title Font Family.
Select a Title Font Size.
Select the Title Font Options. (Bold, Italics, Small-caps)

Enable or Disable the Text-Shadow.
Set the Text-Shadow Blur.
Set the Text-Shadow Offset.
Select a Text-Shadow Color.

Set the Container Title Visibility.
Header
Hide some of the more advanced controls on this Tab to simplify editing common features.
Select a Container Header Background.
Set the Container Header Background Padding. (Top, Bottom, Left, Right)
Select Container Header Color.
Set Container Header Transparency.
Set the Container Header Padding. (Top, Bottom, Left, Right)
Set Container Header Visibility.
Content
Hide some of the more advanced controls on this Tab to simplify editing common features.
Select a Container Background Pattern.
Select a Container Border.
Set the Container Border Padding. (Top, Bottom, Left, Right)
Select a Container Fill Color.
Set the Container Transparency.
Set the Container Padding. (Top, Bottom, Left, Right)
Set the Container Margins. (Top, Bottom, Left, Right)
Select a Container Visibility Icon. (Expand/Collapse)
Set the Container Collapsibility.
Action Layout
Hide some of the more advanced controls on this Tab to simplify editing common features.
Set the Container DropDown Action Horizontal Alignment.
Set the Container Quick Action Location.
Set the Quick Actions Area Padding. (Top, Bottom, Left, Right)
Set the Quick Action 'Add Content' Horizontal Alignment.
Set the Quick Action 'Syndicate Module' Horizontal Alignment.
Set the Quick Action 'Print Module' Horizontal Alignment.
Set the Quick Action 'Module Settings' Horizontal Alignment.
Set Quick Action 'Add Content' Visibility.
Set Quick Action 'Syndicate Module' Visibility.
Set Quick Action 'Print Module' Visibility.
Set Quick Action 'Module Settings' Visibility.
Borders
Hide some of the more advanced controls on this Tab to simplify editing common features.
Select a Border.
Set the Borders Individually. (Top-left, Top-right, Bottom-left, Bottom-right)
Select a Border Style.
Select a Border Color.
Set the Border Width.
Set the Horizontal and Vertical Border Radius.
Select a Top Border Style.
Select a Bottom Border Style.
Select a Left Border Style.
Select a Right Border Style.
Select Border Colors. (Top, Bottom, Left, Right)
Set the Border Width. (Top, Bottom, Left, Right)
Set the Border Horizontal Radii. (Top-Left, Top-Right, Bottom-Left, Bottom-Right)
Set the Border Vertical Radii. (Top-Left, Top-Right, Bottom-Left, Bottom-Right)
Set the Container CSS Border Padding. (Top, Bottom, Left, Right)


Enable or Disable the Box-Shadow.
Set the Box-Shadow Blur.
Set the Box-Shadow Offset. (X-Offset, Y-Offset)
Set the Box-Shadow Color.
Set the Box-Shadow Inset.
Color Gradients
Hide some of the more advanced controls on this Tab to simplify editing common features.
Select a Color Gradient.
Enable or Disable the Color Gradient.
Set the Color Gradient Repetition On or Off.
Set the Size of a single Gradient Repeating Section.
Set the Type of Gradient.
Select a Linear Gradient Direction.
Set the Linear Gradient Direction Angle.
Set the Radial Gradient Shape.
Select a Radial Gradient Position.
Set the Radial Gradient Position Offset. (X-Offset, Y-Offset)
Select the Radial Gradient Fade Type.


Select a Color Stop.
Select a Color.
Enable or Disable the Color Stop Starting Position.
Set the Color Stop Starting Position.
Enable or Disable the Color Stop Width.
Set the Color Stop Width.
HTML Elements
Hide some of the more advanced controls on this Tab to simplify editing common features.
Select an HTML Element to edit.
Set whether Container HTML Elements will override Skin HTML Elements.
   Cancel

 
Copyright 2019 by Dyamme Web Solutions