Ultimate Skin Object is a Dotnetnuke 5.4.2+ extension that will allow you to easily change your skins doc type, remove unneeded css files, inject extra css files, inject extra javascript files & load JQuery in your skin quickly & easily ;)
These instructions will walk you through how to install & remove the "Dotnetnuke 5.4.2+ Ultimate Skin Object".
CODEPLEX PROJECT URL: http://ultimateskinobject.codeplex.com/
SKIN OBJECT REQUIREMENTS:
-DNN 5.4.2+
NOTE: INJECTING JAVASCRIPT FILES BEFORE DNN 5.4.2 WILL CAUSE THE INJECTED JAVASCRIPT FILES TO BE LOADED BEFORE JQUERY (THIS BUG WAS FIXED IN DNN 5.4.2)
SKIN OBJECT ATTRIBUTES:
| ATTRIBUTE NAME: |
DEFAULT VALUE: |
OTHER VALUES: |
DESCRIPTION: |
| MySkinDocType |
HTML 4.01 Transitional |
HTML 5
XHTML 1.0 Transitional
XHTML 1.0 Strict
XHTML 1.1
HTML 4.01 Strict
HTML 4.01 Transitional
|
MySkinDocType will allow you to set the skin doc tpe for your page. By leaving the value empty it will use the legacy "HTML 4.01 Transitional" doc type by default. |
| RemoveCssFiles |
|
Examples:
- "Default.css" to not load Default.css
- "DesktopModules/SomeModule/Module.css" to not load a specific modules.css
- "Module.css" to not load any Modules.css file
- "/" will not load any CSS files
- "Default.css,Portal.css" will not load Default.css & Portal.css
|
RemoveCssFiles will exclude a comma seperated list of css files that will automatically be unloaded from your skin to help improve proformance of your website & will also stop those annoying default DNN style from loading. |
| AddCssFiles |
|
Examples:
- "mynewcssfile1.css" will add your css file to your skin
- "mynewcssfile1.css,portals/0/mynewcssfile2.css" will add two new css files to your skin
|
AddCssFiles allows you to easily inject a comma seperated list of css files to your skin. |
| AddJsFiles |
|
Examples:
- "mynewjsfile1.js" will add your js file to your skin
- "mynewjsfile1.js,js/mynewjsfile2.js" will add two new js files to your skin
|
AddJsFiles allows you to easily inject a comma seperated list of css files to your skin. |
| LoadJQueryScripts |
No |
Yes |
If you set the LoadJQueryScripts value to "Yes" then it will load the JQuery library that you defined in your host settings page. |
INSTALLATION INFORMATION:
STEP 1 - INSTALL THE SKIN OBJECT:
-Install this skin object using the extension installer (HOST > EXTENSTIONS > INSTALL EXTENTSION WIZARD)
STEP 2 - ADD THE SKIN OBJECT TO YOUR SKIN (JUST CHOOSE THE METHOD THAT SUITS YOUR SKINNING METHOD FROM BELOW):
-METHOD 1: ASCX Skin Object Example
(RECOMMENDED - Supported in all DNN versions)
<%@ Register TagPrefix="dnn" TagName="MWD_ULTIMATESKINOBJECT" Src="~/DesktopModules/MWD/Skin Objects/UltimateSkinObject/UltimateSkinObject.ascx" %>
<dnn:MWD_ULTIMATESKINOBJECT runat="server" id="MWD_ULTIMATESKINOBJECT" MySkinDocType="XHTML 1.0 Transitional" RemoveCssFiles="Default.css,Portal.css" AddCssFiles="mynewcssfile1.css,portals/0/mynewcssfile2.css" AddJsFiles="mynewjsfile1.js,js/mynewjsfile2.js" LoadJQueryScripts="Yes" />
-METHOD 2: HTML Skin Object Example
(Only supported in DNN 5+)
<object id="MWD_ULTIMATESKINOBJECT" codetype="dotnetnuke/server" codebase="MWD_ULTIMATESKINOBJECT">
<param name="MySkinDocType" value="XHTML 1.0 Transitional" />
<param name="RemoveCssFiles" value="Default.css,Portal.css" />
<param name="AddCssFiles" value="mynewcssfile1.css,portals/0/mynewcssfile2.css" />
<param name="AddJsFiles" value="mynewjsfile1.js,js/mynewjsfile2.js" />
<param name="LoadJQueryScripts" value="Yes" />
</object>
-METHOD 3: HTML Skin Token & XML File Example
(Depreciated method that was being used in DNN 4.9x versions & below)
[MWD_ULTIMATESKINOBJECT]
You will also need to create an XML file in your skin directory called "skin.xml" with the following code in it:
<Object>
<Token>[MWD_ULTIMATESKINOBJECT]</Token>
<Settings>
<Setting>
<Name>MySkinDocType</Name>
<Value><![CDATA[XHTML 1.0 Transitional]]></Value>
</Setting>
<Setting>
<Name>RemoveCssFiles</Name>
<Value><![CDATA[Default.css,Portal.css]]></Value>
</Setting>
<Setting>
<Name>AddCssFiles</Name>
<Value><![CDATA[mynewcssfile1.css,portals/0/mynewcssfile2.css]]></Value>
</Setting>
<Setting>
<Name>AddJsFiles</Name>
<Value><![CDATA[mynewjsfile1.js,js/mynewjsfile2.js]]></Value>
</Setting>
<Setting>
<Name>LoadJQueryScripts</Name>
<Value><![CDATA[Yes]]></Value>
</Setting>
</Settings>
</Object>
STEP 5 - CLEAR YOUR BROWSERS CACHE & REFRESH THE PAGE:
-Now you should see the be able to see the changes that have been made to your skin - view the souce code of the page and look at the doc type, look for css style sheets that you have excluded from your skin & tcheck to see if the JQuery scripts were loaded.
REMOVAL INSTRUCTIONS:
STEP 1 - REMOVE THE SKIN OBJECT FROM YOUR SKIN (JUST REMOVE THE CODE THAT WAS ORGINALLY USED WHEN YOU ADDED THE OBJECT TO YOUR SKIN):
-METHOD 1: ASCX Skin Object Example
(RECOMMENDED - Supported in all DNN versions)
<%@ Register TagPrefix="dnn" TagName="MWD_ULTIMATESKINOBJECT" Src="~/DesktopModules/MWD/Skin Objects/UltimateSkinObject/UltimateSkinObject.ascx" %>
<dnn:MWD_ULTIMATESKINOBJECT runat="server" id="MWD_ULTIMATESKINOBJECT" MySkinDocType="XHTML 1.0 Transitional" RemoveCssFiles="Default.css,Portal.css" AddCssFiles="mynewcssfile1.css,portals/0/mynewcssfile2.css" AddJsFiles="mynewjsfile1.js,js/mynewjsfile2.js" LoadJQueryScripts="Yes" />
-METHOD 2: HTML Skin Object Example
(Only supported in DNN 5+)
<object id="MWD_ULTIMATESKINOBJECT" codetype="dotnetnuke/server" codebase="MWD_ULTIMATESKINOBJECT">
<param name="MySkinDocType" value="XHTML 1.0 Transitional" />
<param name="RemoveCssFiles" value="Default.css,Portal.css" />
<param name="AddCssFiles" value="mynewcssfile1.css,portals/0/mynewcssfile2.css" />
<param name="AddJsFiles" value="mynewjsfile1.js,js/mynewcssfile2.js" />
<param name="LoadJQueryScripts" value="Yes" />
</object>
-METHOD 3: HTML Skin Token & XML File Example
(Depreciated method that was being used in DNN 4.9x versions & below)
[MWD_ULTIMATESKINOBJECT]
You will also need to create an XML file in your skin directory called "skin.xml" with the following code in it:
<Object>
<Token>[MWD_ULTIMATESKINOBJECT]</Token>
<Settings>
<Setting>
<Name>MySkinDocType</Name>
<Value><![CDATA[XHTML 1.0 Transitional]]></Value>
</Setting>
<Setting>
<Name>RemoveCssFiles</Name>
<Value><![CDATA[Default.css,Portal.css]]></Value>
</Setting>
<Setting>
<Name>AddCssFiles</Name>
<Value><![CDATA[mynewcssfile1.css,portals/0/mynewcssfile2.css]]></Value>
</Setting>
<Setting>
<Name>AddJsFiles</Name>
<Value><![CDATA[mynewjsfile1.js,js/mynewjsfile2.js]]></Value>
</Setting>
<Setting>
<Name>LoadJQueryScripts</Name>
<Value><![CDATA[Yes]]></Value>
</Setting>
</Settings>
</Object>
STEP 2 - REMOVE THE DNN SKIN OBJECT:
-Delete this skin object using the from extension page (HOST > EXTENSTIONS)
STEP 3 - CLEAR YOUR BROWSERS CACHE & REFRESH THE PAGE:
-The skin object should now be completely removed :)