On @mircosoftfeed was a #Metro7 Skin packages provided that was made by Ali Nawaz Adil an Parkistan Designer. The Skin was made for DNN 5 and I found out some issues on using it with DNN 6 and fixed it.

Unfortunately, the license terms of the agreement agree on the blog from # microsoftfeed.com and not the package delivered in the skin. It must therefore be presumed license of the package included in the skin. This allows me not to publish my changes in a new package. For this reason, I've decided to post the changes here in my blog. 

About I think there is a big interesting internationaly I post this blog in english and not in german. If there is a great interesting to want this blog also in german, plese feel free to contact me.

The code on this Blog I provide under the MIT or GPL license, if it is used to a Code that would be distributed or redistributed you have to provide the distribution on the MIT or GPL license! 

Now to the Metro7 style DotNetNuke skin. 

Initially the skin for DotNetNuke 5 was developed and is older and own jQuery and jQuery UI versions shipped. In this way there is at least 6 in DotNetNuke modules with some conflicts. Furthermore, does not the banner slider. Other problems I have discovered in connection with the DNN blog module in the display in the CSS. In the blog module the content of Blog_List and Blog_Categories is not readable because of the color. I found the solution by changing the skin.css and index.ascx files.  Also I re-moved the jQuery.js and jquery-ui.js file from the banner folder and registered the jQuery and jQuery-ui that is shiped with the DotNetNuke package.  Also I changed the source to a Visual Studio DNN-Skin project so I could add sourcecontrol and ship all 4 colors of the skin in one package.  On this blog I want share the changes without Visual Studio DNN Skin package changes.

Here are now the change to become the #Metro7 DNN Skin running on DNN 6 !

On the fist delete the jQuery.js and jQuery-ui.js files from the Banner folder.

Then open the index.ascx files with an Editor and search about

On the line 14 and 15 of the index.ascx file I replaced the registration of the jQuery from


to

<script runat="server">

 

     Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

 

    DotNetNuke.Framework.jQuery.RequestRegistration()

    DotNetNuke.Framework.jQuery.RequestUIRegistration()

 

    End Sub

script>

 
This will test whether jQuery is loaded and registered jQuery and jQuery-ui from DotNetNuke (look at the system settings of DNN) if it is not already registered.

The 2nd changes is then on the line 16 to 20 on the javascript code from

<script type="text/javascript">

        $(document).ready(function(){

            $("#JBanner > ul").tabs({fx:{opacity: "toggle"]).tabs("rotate", 5000, true);

        });

script>

to

<script type="text/javascript">

    jQuery(function() {

        jQuery("#JBanner").tabs({ fx: { opacity: "toggle"} }).tabs("rotate", 10000, true);

    });   

script>

I changed here also the speed of the rotation from 5000 to 10000 for my need, you are free to change this also for your need.

The last changes we have to do on the index.ascx file are now from line 47 to 62 of the original code and we changed

<div class="banner_index">

        <div id="JBanner">

        <ul class="banner_item">

          <li><a href="#banner-1">a>li>

                <li><a href="#banner-2">a>li>

                <li><a href="#banner-3">a>li>

                <li><a href="#banner-4">a>li>

                <li><a href="#banner-5">a>li>

          ul>

            <div id="banner-1" style=""><img alt="" src="banner/Banner_1.jpg" />div>

            <div id="banner-2" style=""><img alt="" src="banner/Banner_2.jpg" />div>

            <div id="banner-3" style=""><img alt="" src="banner/Banner_3.jpg" />div>

            <div id="banner-4" style=""><img alt="" src="banner/Banner_4.jpg" />div>

            <div id="banner-5" style=""><img alt="" src="banner/Banner_5.jpg" />div>

        div>

        

to

<div class="banner_index">

        <div id="JBanner">

<ul class="banner_item">

          <li class="banner_item li.ui-tabs-selected" id="nav-banner-1" ><a href="#ui-tabs-1">a>li>

          <li class="banner_item li ul.banner_item" id="nav-banner-2"><a href="#ui-tabs-2">a>li>

          <li class="banner_item li ul.banner_item" id="nav-banner-3"><a href="#ui-tabs-3">a>li>

          <li class="banner_item li ul.banner_item" id="nav-banner-4"><a href="#ui-tabs-4">a>li>

      <li class="banner_item li ul.banner_item" id="nav-banner-5"><a href="#ui-tabs-5">a>li>

          ul>

        

         

            <div class="ui-tabs-panel" id="ui-tabs-1" style=""><img alt="" src="banner/Banner_1.jpg" />div>

            <div class="ui-tabs-panel ui-tabs-hide" id="ui-tabs-2" style=""><img alt="" src="banner/Banner_2.jpg" />div>

            <div class="ui-tabs-panel ui-tabs-hide" id="ui-tabs-3" style=""><img alt="" src="banner/Banner_3.jpg" />div>

            <div class="ui-tabs-panel ui-tabs-hide" id="ui-tabs-4" style=""><img alt="" src="banner/Banner_4.jpg" />div>

            <div class="ui-tabs-panel ui-tabs-hide" id="ui-tabs-5" style=""><img alt="" src="banner/Banner_5.jpg" />div>

 

        div>

        

with this changes the banner slider should now run without any issues on other modules. 

Who missed now the language features could add the language control registration and Placeholder I added the registration
 

<%@ Register TagPrefix="dnn" TagName="LANGUAGE" Src="~/Admin/Skins/Language.ascx" %>

to the line 11 of the index.ascx file and added the placeholder to line 27 to add the flags of the languages:

<div class="LogoCell"><dnn:LOGO runat="server" id="dnnLOGO" /><br /><br /><dnn:LANGUAGE runat="server" id="dnnLANGUAGE"  showMenu="False" showLinks="True" />div>

This are all changes to become the #Metro7 skin running on DNN 6.x versions.  To fix now some issues with the view of the dnn blog module you must done the following changes on the skin.css file:

Found the "Links css" section and change the color of

/*-- Default links                     --*/ a:link, a:visited, a:active { color: #999999; font-family: Calibri, "Segoe UI"; font-weight: normal; font-size: 14px; text-decoration: none; }

to

/*-- Default links                     --*/ a:link, a:visited, a:active { color: #1BA0E1; font-family: Calibri, "Segoe UI"; font-weight: normal; font-size: 14px; text-decoration: none; }

and

/*-- Default links hover               --*/ a:hover { color: #1BA0E1; font-family: Calibri, "Segoe UI"; font-size: 14px; text-decoration: underline;  font-weight: normal;}

to

/*-- Default links hover               --*/ a:hover { color: #999CCC; font-family: Calibri, "Segoe UI"; font-size: 14px; text-decoration: underline;  font-weight: normal;}

and

/*-- Normal links                      --*/ a.NormalRed:link, a.NormalRed:visited, a.NormalRed:active { color: #E7002A; font-family: Calibri, "Segoe UI"; font-weight: bold; font-size: 13px; text-decoration: none; }

 

/* Notice!  This color is different on the different colors of the Skin !!!

to

/*-- Normal links                      --*/ a.NormalRed:link, a.NormalRed:visited, a.NormalRed:active { color: #FFFFFF; font-family: Calibri, "Segoe UI"; font-weight: bold; font-size: 13px; text-decoration: none; }

This changes should fix the display issues with the DNN Blog module.

I changed for my own use also the width properties of the "Content Panes CSS section" from

/*========================================================*/

/*  Content Panes  CSS                                    */

/*========================================================*/

 

 

/*-- content2 pane                     --*/ .ContentPane2 { text-align:left; padding: 0 0 0 0; }

 

/*-- left2 content pane                --*/ .LeftSide { padding: 0 20px 0 0; width: 70%; }

/*-- right2 content pane               --*/ .RightPane {  padding: 0 0 0 15px; width: 30%;  }

 

/*-- left2 content pane                --*/ .LeftPane { padding: 0 0 0 0; width: auto; }

 

/*-- left1 content pane                --*/ .LeftPane1 { padding: 0 0 0 0; width: auto;}

/*-- left3 content pane                --*/ .LeftPane3 { padding: 0 15px 0 0; width: 50%;}

/*-- left4 content pane                --*/ .LeftPane4 { padding: 0 0 0 15px; width: 50%;  }

/*-- left2 content pane                --*/ .LeftPane2 { padding: 0 0 0 0; width: auto;}

 

/*-- Extended inside pane 2            --*/ .ExtendedPane { width: 100%; padding: 0 0 0 0; }

to

/*========================================================*/

/*  Content Panes  CSS                                    */

/*========================================================*/

 

 

/*-- content2 pane                     --*/ .ContentPane2 { text-align:left; padding: 0 0 0 0; }

 

/*-- left2 content pane                --*/ .LeftSide { padding: 0 20px 0 0; width: 70%; }

/*-- right2 content pane               --*/ .RightPane {  padding: 0 0 0 15px; width: 30%;  }

 

/*-- left2 content pane                --*/ .LeftPane { padding: 0 0 0 0; width: auto; }

 

/*-- left1 content pane                --*/ .LeftPane1 { padding: 0 0 0 0; width: 50%;}

/*-- left3 content pane                --*/ .LeftPane3 { padding: 0 15px 0 0; width: 15%;}

/*-- left4 content pane                --*/ .LeftPane4 { padding: 0 0 0 15px; width: auto;  }

/*-- left2 content pane                --*/ .LeftPane2 { padding: 0 0 0 0; width: auto;}

 

/*-- Extended inside pane 2            --*/ .ExtendedPane { width: 100%; padding: 0 0 0 0; }

Also I want to use the social css design of the core, so I added on the end of the css file this properties:

/*========================================================*/

/*  Social Links CSS                                              */

/*========================================================*/

 

 

.Social-Links{text-align:right;padding:15px 0 0 0;}

    .Social-Links a{margin:0 0 0 10px;}

    .icoIN{width:32px;height:32px;background:url(images/SocialMedia.png) no-repeat -192px 0;}

    .icoFacebook{width:32px;height:32px;background:url(images/SocialMedia.png) no-repeat 0 0;}

    .icoTwitter{width:32px;height:32px;background:url(images/SocialMedia.png) no-repeat -32px 0;}

    .icoTwitter2{width:32px;height:32px;background:url(images/SocialMedia.png) no-repeat -576px 0;}

     

    .icoMySpace{width:32px;height:32px;background:url(images/SocialMedia.png) no-repeat -64px 0;}

    .icoStumbleUpon{width:32px;height:32px;background:url(images/SocialMedia.png) no-repeat -96px 0;}

    .icoDigg{width:32px;height:32px;background:url(images/SocialMedia.png) no-repeat -128px 0;}

    .icoFlickr{width:32px;height:32px;background:url(images/SocialMedia.png) no-repeat -160px 0;}

    .icoLinkedIn{width:32px;height:32px;background:url(images/SocialMedia.png) no-repeat -192px 0;}

    .icoYouTube{width:32px;height:32px;background:url(images/SocialMedia.png) no-repeat -224px 0;}

    .icoDelicious{width:32px;height:32px;background:url(images/SocialMedia.png) no-repeat -256px 0;}

    .icoBlogger{width:32px;height:32px;background:url(images/SocialMedia.png) no-repeat -288px 0;}

    .icoRSS{width:32px;height:32px;background:url(images/SocialMedia.png) no-repeat -320px 0;}

    .icoEmail{width:32px;height:32px;background:url(images/SocialMedia.png) no-repeat -352px 0;}

    .icoTumblr{width:32px;height:32px;background:url(images/SocialMedia.png) no-repeat -384px 0;}

    .icoFourSquare{width:32px;height:32px;background:url(images/SocialMedia.png) no-repeat -416px 0;}

    .icoReddit{width:32px;height:32px;background:url(images/SocialMedia.png) no-repeat -448px 0;}

    .icoVimeo{width:32px;height:32px;background:url(images/SocialMedia.png) no-repeat -480px 0;}

    .icoWordPress{width:32px;height:32px;background:url(images/SocialMedia.png) no-repeat -512px 0;}

    .icoBebo{width:32px;height:32px;background:url(images/SocialMedia.png) no-repeat -544px 0;}

The social css style needed the SocialMedia.png file which was shipped with the default skin of any DNN 6.x install packages.

This are now all changes I had made on the Skin files to get it run with DotNetNuke 6.x. 


My goal was to my changes to be made available on Codeplex, but so far have been my email inquires regarding the valid license from Ali Nawaz Adil is not answered. Unless I still should have an answer, I'll be proud to publish the project on codeplex.