MySkins is a DotNetNuke (DNN) module that lets you create and manage your own skin packages (themes) on a DNN installation. MySkins is not an editable skin, it is a skin package creator, a skin and container editor, a template importer, or exporter, and it is a resource manager.
Some key features include:
- Skin Package Creator with intelligent Save & Sync
- Template Importer
- Skin Package / Template Exporter (Server License Only)
- Skin & Container Editors including our Color Engine
- Resource Manager
- Firefox, Chrome, Safari, Opera, IE9+ Browser Support
- DNN 5.x, 6.x, 7.x Support
Extras that come with MySkins are:
Watch the MySkins introduction video, and then try it for yourself.
Skin Package Creator
MySkins functions as a skin package creator.
- Name & Description
- Color Versions - The number of color versions of each skin and container in the skin package.
- Skin Package Scope - Host or Local
You can select how many instances of each skin type should be included (per color version) in the skin package. Skin types include:
- Splash Skins - A splash skin has no visible header or footer and the content area consists of a splash pane structure.
- Simple Skins - A simple skin has a simplified pane structure.
- Simple Skins (Custom Banner) - Similar to a simple skin but with a banner pane for custom banners.
- Complex Skins - A complex skin has a more complex pane structure.
- Complex Skins (Custom Banner) - Similar to a complex skin but with a banner pane for custom banners.
- Mobile Skins - A mobile skin has a responsive width, a banner pane for custom banners, and a splash pane structure.
- No Preset Skins - No preset skins have no predetermined settings or options. Changes to these skins will not be synchronized throughout the rest of the skin package if they are updated.
You can select how many instances of each container type should be included (per color version) in the skin package. Container types include:
- Enclosed Titled Containers - An enclosed titled container has a border and title.
- Enclosed Header Titled Containers - An enclosed header titled container has a border and title inside a header.
- Enclosed Titleless Containers- An enclosed titleless container has a border, but no header or title.
- Borderless Titled Containers - A borderless titled container has a title, but no border.
- Borderless Header Titled Containers - A borderless header titled container has a title inside a header, but no border.
- Borderless Titleless Containers- A borderless titleless container has no border, title or header.
- Footer Titled Containers - A footer container with a title.
- Footer Header Titled Containers - A footer container with a title inside a header.
- Footer Titleless Containers- A footer container with no header or title.
- No Preset Containers - No preset containers have no predetermined settings or options. Changes to these containers will not be synchronized throughout the rest of the skin package if they are updated.
Importing & Exporting
MySkins has a skin package template importer. A skin package template is an .xml document that contains one or more skin package definitions. Find a template that you like, import the template and edit the skin package thereafter as required.
MySkins also has a skin package and skin package template exporter. The skin package exporter creates a .zip file that can be installed as an extension in DNN. MySkins is not required for these skin packages to be installed. The skin package template exporter creates an .xml document that can be imported as a template by other MySkins modules.
Important! The MySkins export functionality is only available with a server license.
Skin & Container Editors
MySkins has powerful skin and container editors that require no programming or other technical expertise to use.
The editors use standard dragging & dropping, drop downs, check boxes, radio buttons, sliders, color selectors and carousels to make changes to your skins or containers. All changes are reflected on screen in real time, and the changes are made permanent after saving.
MySkins uses intelligent sync with its saving to update all other skins and containers in the skin package when changes are made to one skin or container. The type of skin or container, color version and instance of the skin or container type determine which changes are synced and which ones aren't.
The skin and container editor controls are grouped together into logical sections. This makes it easier to edit one specific area of your skin or container at a time.
The skin editor is sub divided into the following sections:
- Colors - Use our color engine to create a color theme with a master color, three primary colors and three secondary colors which can be applied to your skin.
- Font - Select the font options for different element on your skin, including CSS3 text-shadows.
- Icons - Select icons for search, breadcrumb, login/logout or register/user.
- Tokens - Edit tokens on your skin, including the visibility and location of each token. Tokens include skin elements such as your logo, footer links, breadcrumb, etc...
- Social Networks - Setup links to all your social networks, including your Facebook and Twitter page, or YouTube channel.
- Main Menu - Edit your main menu and menu items, including selecting a horizontal or vertical menu.
- Sub Menu - Edit your sub menu and sub menu items, including selecting a standard or mega menu.
- Background - Edit your background. A background can consist of between 0 and an unlimited number of background layers.
- Banner - Edit your banner, including selecting a custom banner.
- Page - Set page settings, including responsive or fixed width and page margins.
- Header - Create a header, including setting the visibility and view order of the four header areas.
- Footer - Create a footer, including setting the visibility and view order of the three footer areas.
- Content - Change the content area, including attaching or detaching from the header and footer.
- Content Pane Layout - Select a content pane layout, including splash, simple or complex.
- Footer Pane Layout - Select a footer pane layout including none, simple or complex.
- Borders - Set CSS3 borders and box-shadows for different skin elements.
- Color Gradients - Set CSS3 color gradients for different skin elements.
The container editor is sub divided into the following sections:
- Colors - Use our color engine to create a color theme with a master color and three primary colors, which can be applied to your container.
- Font - Select the font options for different elements on your container if you want to override the skin options, including CSS3 text-shadows.
- Title - Set the container title and icon options.
- Header - Set the container header options.
- Footer - Set the container footer options.
- Content - Set the container content area options.
- Actions - Set the container action options, including visibility and location.
- Borders - Set CSS3 borders and box-shadows for different container elements.
- Color Gradients - Set CSS3 color gradients for different container elements.
Advanced controls can be hidden in each section to simplify editing basic features, such as colors.
MySkins can use resource packages to add resources to skins or containers. Resources include background images, banners, overlays, patterns, borders, icons and more. The collection of resources in a specific folder structure that follows a given naming convention is considered a resource package.
Our standard resource package is included free with every purchase of the MySkins module. When importing skin package templates downloaded from our website, it is assumed that the standard resource package is already installed and available.
You can also create and use your own resource packages with MySkins. Learn more here.