How to build Skins for DNN 6.x
Last Post 10/09/2012 12:10 AM by Denel. 97 Replies.
Author Messages
Andy Stephenson
Nuke Master
Nuke Master
Posts:54


--
09/15/2011 11:32 AM
    Add any comments or questions regarding the How to build Skins for DNN 6.xTutorial
    scpsweb
    Nuke Newbie
    Nuke Newbie
    Posts:2


    --
    09/15/2011 2:23 PM
    Thank you for this well explained tutorial. When will Videos 2-13 be made available?
    Palatine Web
    Nuke Active Member
    Nuke Active Member
    Posts:33


    --
    09/16/2011 6:21 AM
    Yes I would like to know this as well home long till the rest of the videos are released. We have several skins we have done but they all act differently depending on the version of DNN 6 they are in and if they are an upgraded version or not.

    so 5.9.3 upgraded to 6
    acts different to a fresh dnn 6 install
    which acts different again to a dnn 6 upgraded to 6.0.1
    and 6.0.1 fresh install just goes crazy with all the manage buttons at the top of the page. And all the panes overlaping.

    Thanks
    Paul Turner
    Palatine Web Support
    http://www.palatineweb.com
    Palatine Web
    Nuke Active Member
    Nuke Active Member
    Posts:33


    --
    09/16/2011 6:21 AM
    Sorry I said home when I meant how. Sorry long few days with this skinning issue.

    thanks
    Paul
    Paul Turner
    Palatine Web Support
    http://www.palatineweb.com
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    09/16/2011 7:04 AM
    If the same skin looks/behaves differently in different installs of DotNetNuke, you need to look at what might be different between the two installs.

    I think that this points to the portal.css and the _default.css files.

    For starters, you could copy these files from one install to the other and see if that brings the two skin behaviors together.

    There are some major changes in the _default.css file for Version 6. They involve a lot of cleaning up of the file, so you may have been caught by that. The portal.css file is unique to a portal. But, if you do a "clean install" of DotNetNuke, it gets a lot of styles for the demo site template that is installed. Assuming that you haven't added to portal.css but have deleted all of the content from the demo site, you should also clean out the portal.css file to get rid of those styles.

    Styles that affect the skin should all be in skin.css. You may need to redefine styles in there that are defined in _default.css if you need to change them.

    You should also look at the way that the skin file and skin.css are constructed for the minimal extropy skin and make sure that you've handled the control panel and action menu items correctly.

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Palatine Web
    Nuke Active Member
    Nuke Active Member
    Posts:33


    --
    09/17/2011 4:21 AM
    Thanks Joseph Did not even think about the default and portal css files. I have been going in and editing them but did not think about them being different in different installs.
    If I copy everything out of the portal css into the dark knight skin then that skin should still work should it not and then I am free to do whatever with my skin. Without the portal interfering.

    Does anyone know what all this stuff does in the Default.css as I looked at a 5.6.3 site I have and the default.css is well laid out and easy to read and follow as it is documented within the css. this new one in 6 is a mass of lines that is hard to follow.
    Is there a reason no one cleaned it up before release.

    Anyway thanks again
    Paul
    Paul Turner
    Palatine Web Support
    http://www.palatineweb.com
    Palatine Web
    Nuke Active Member
    Nuke Active Member
    Posts:33


    --
    09/18/2011 10:47 PM
    Thanks for taking the time to make these videos guys. I myself was in a rush to create a css skin for DNN 6 for several projects so I have taken the Dark Knight skin and adapted it for my needs. If anyone wants to have a look I will be uploading it to our new hosting, domains and websites website today. The current one is table based.
    The site is http://www.palatineweb.com

    And if anyone wants any help or advice on the skinning I think I have a good grasp of it now. So drop a message here.
    Always happy to help fellow nukers if I can.

    Thanks
    Paul
    Paul Turner
    Palatine Web Support
    http://www.palatineweb.com
    Michael Prince
    Nuke Newbie
    Nuke Newbie
    Posts:1


    --
    09/19/2011 2:35 PM
    I have viewed Video 1, and the rest of the series looks to be very very informative as well. Any tentative schedules for their release?
    Thanks.
    scpsweb
    Nuke Newbie
    Nuke Newbie
    Posts:2


    --
    09/20/2011 1:34 PM
    Any idea when the remaining videos will be released?
    Andy Stephenson
    Nuke Master
    Nuke Master
    Posts:54


    --
    09/21/2011 10:50 AM
    Hi everyone, we plan to release two of these videos a week, so the next two will be out tomorrow.

    Videos 3 and 4 will be combined into one, so you'll actually be getting three vids tomorrow.

    Hope you find them useful.

    Andy
    Brian Walker
    Nuke Newbie
    Nuke Newbie
    Posts:9


    --
    09/24/2011 6:17 PM
    deleted


    Brian Walker
    Nuke Newbie
    Nuke Newbie
    Posts:9


    --
    09/27/2011 10:36 AM
    Great Tutorial! Do you know of any other resources on styling the DDR menu so I can go ahead and work on that?
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    09/27/2011 10:48 AM
    The DotNetNuke Wiki at DotNetNuke.com has a fair amount of detail.

    These tutorials:

    DotNetNuke ASCX Skinning for Professional Skinners
    DotNetNuke Nav Menu
    How to Package a Skin for DotNetNuke 5
    Nav Menu v2 for DotNetNuke v5
    Skin Object Tokens for DotNetNuke 5
    Super Stylesheets Skinning in DotNetNuke 5 - DNN Layouts


    touch on many of the issues. Not specifically the DDR menu, but the parts on styling the Nav menu are quite applicable.

    One thing: for most uses, you will want to use one of the pre-built themes and style from there. So, what I like to do is examine the page source to see how the menu is "rendered" and it's fairly easy to identify the Ids and classes for the various objects.

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Brian Walker
    Nuke Newbie
    Nuke Newbie
    Posts:9


    --
    09/27/2011 12:17 PM
    Thanks Joe!
    Andy Stephenson
    Nuke Master
    Nuke Master
    Posts:54


    --
    09/30/2011 9:08 AM
    There is this one to (should still be applicable):

    DNN Garden - DDR Menu for DotNetNuke
    rholguinjr
    Nuke Newbie
    Nuke Newbie
    Posts:1


    --
    10/14/2011 7:56 AM
    Videos 10,11,12,13 missing from how to convert psd to skin tutorial. Where can I find those videos?
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    10/14/2011 9:06 AM
    The tutorials in this series are being released at the rate of 2 per week. Look for 10 and 11 next Thursday and the final two the week after.

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Brett DiCioccio
    Nuke Newbie
    Nuke Newbie
    Posts:3


    --
    10/20/2011 2:38 PM
    This tutorial has been amazing so far. I just finished video 11.
    I initially created this post because I had a problem after video 10, but I ran through everything again and figured it out.

    Thanks DDNCreative.
    John Burrows
    Nuke Newbie
    Nuke Newbie
    Posts:3


    --
    10/20/2011 4:25 PM
    Great videos!

    If i was to add some further topis they would be (although I haven't seen videos 10 onwards so sorry if you have covered them)

    Tuning for Mobile Devices
    Tuning for download speed
    Can skin objects contain actual code logic which can conditionally show things?

    Thanks
    John
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    10/21/2011 7:31 AM
    DotNetNuke 6.1, now in beta and which you can download and test, has a number of new feature specifically aimed at detecting mobile and other browser capabilities. Look at the blogs section at DotNetNuke for some recent information.

    Also, look at the recent blogs by Will Strohl and Chris Hammond that deal with related issues.

    Skin Objects ARE code, so you can do lots there.

    Skins can have conditional code built in. Skins can also have "codebehind" files that execute code when the skin is loaded.

    You may want to check the 40Fingers StyleHelper skin object at 40fingers.net.

    As for speed, DotNetNuke 6.x is demonstrably faster than earlier versions mainly to having paid attention to download speed issues. The resources mentioned above provide more information. I think that Joe Brinkman has blogged about this in the last month or so.

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Brian Walker
    Nuke Newbie
    Nuke Newbie
    Posts:9


    --
    10/26/2011 11:12 AM
    This tutorial has been great. I have never ventured into skinning at all before this and am starting to feel semi-confident about it.

    I have a couple of questions about the Superfish menu.

    My website can be viewed here http://uptownlions.org/Home/tabid/5...fault.aspx

    When I add sub pages the dropdown menu is not clickable when it is over content. You can see this on the sub-pages of the store tab. Any ideas of what may be causing this?

    Also, how do I position the dropdown menu to align with the bottom of the parent tab?

    Thanks,
    Brian
    Greet
    Nuke Newbie
    Nuke Newbie
    Posts:2


    --
    10/27/2011 12:38 AM
    Hello, Can you tell me when video 12 and 13 will be available. Thanks
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    10/27/2011 8:57 AM
    Tomorrow. The tutorials are being released weekly, two at a time.

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Brian Walker
    Nuke Newbie
    Nuke Newbie
    Posts:9


    --
    10/27/2011 10:03 AM
    Any ideas on my question about the superfish menu? Is this something that will be addressed in the upcoming tutorial?
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    10/27/2011 10:13 AM
    The correct answer is: They were just released!

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    10/27/2011 10:49 AM
    Brian,

    Something that you have changed in the superfish.css file is causing the problem. (Using Firefox and the Web Developers Toolbar, I opened your file and replaced the contents of superfish.css with the file that I downloaded from DNNGarden.com. When I do that, the menu functions "correctly" in the sense that the sub-menu items are positioned correctly and do work.)

    Part of your problem seems to be a z-index issue. It looks to me as if the dropdown menu items fall behind the content items. That is why they disappear when you mouseover them. There also appears to be a height issue and that might be what cuts off the "test" item under store.

    I would probably go back to the original superfish.css file and revisit the changes you have made.

    If you are using a a 6.x version of DotNetNuke other less than 6.0.2, I would upgrade as I understand that at least some of the z-index issues may have been fixed.


    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Mike DeBaise
    Nuke Newbie
    Nuke Newbie
    Posts:5


    --
    10/27/2011 4:29 PM
    These videos are beyond great!!

    Question.... where can I find information related to for instance, making the search box semi transparent, and a different color? I assume this would be easily done by changing some core CSS?

    Thanks for the information!
    John Burrows
    Nuke Newbie
    Nuke Newbie
    Posts:3


    --
    10/27/2011 6:06 PM
    Thanks Joseph

    Yes i noticed 6 is faster. I don't know what they did but the very first page i browsed on that version made me go wow they made it faster - at last. I keep introducing people to DNN and they go - wow thats great but it's slow. Now not so

    I will look into the resources you have mentioned

    Thanks
    John
    Mike DeBaise
    Nuke Newbie
    Nuke Newbie
    Posts:5


    --
    11/03/2011 2:02 PM
    Final comments:

    JOB WELL DONE!!!

    This series touched upon some skinning items I needed help with as well as taught me some new things. I admit I was a little reluctant to purchase this subscription as most video tutorials are poorly done, but WOW.... nice job!

    Thank you greatly!
    Mad Marcus
    Nuker
    Nuker
    Posts:15


    --
    11/03/2011 7:38 PM
    Hi,

    I agree, the DNN6 skinning tutorials have been very informative. I do have one question though; is the procedure for packaging DNN6 skins the same as for DNN5 (I know there is already an article for this) and if not will there be a follow up tutorial to cover packaging them for installation?
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    11/03/2011 7:59 PM
    Yes (at least I think that the answer is yes).

    DotNetNuke 6 will read the older formats for packaging skins. I haven't seen any discussion of new packaging for skins special for Version 6.

    The main difference between the "old" package and the V5 package is that skins become true extensions. There are some additions for DNN6. All of this is described here:

    http://www.dotnetnuke.com/Resources...fests.aspx

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    saikiran d
    Nuke Newbie
    Nuke Newbie
    Posts:1


    --
    11/04/2011 7:04 AM
    send the steps to create skins
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    11/04/2011 7:10 AM
    You will find most of what you need to know in the 13 part tutorial series that is the subject of this thread. You will find a number of additional tutorials in our tutorial library. Look here: http://www.dnncreative.com/Training...fault.aspx

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    walter irikwani
    Nuke Newbie
    Nuke Newbie
    Posts:2


    --
    11/04/2011 2:30 PM
    The dnn 6 skin tutorial is amazing, however, my question is that the initial layout for the skin was done in Photoshop. Is it also possible to design the initial layout in Fireworks and then export it to the skin folder in the dnn root installation folder. I think that fireworks will accomplish this task even better.
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    11/05/2011 10:56 AM
    Yes, you can use any tool you like. In the tutorial, Photoshop was used to create the artwork. Then it was converted to an appropriate set of ascx and css files.

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Brian Walker
    Nuke Newbie
    Nuke Newbie
    Posts:9


    --
    11/07/2011 2:11 PM
    I would like to use the superfish-navbar styling for the menu but I cannot find where to point at that css file. I found this post ( http://www.dotnetnuke.com/Resources...posts.aspx ) about it but I do not see anywhere in the xslt file to point the css to a different file. I did find this in the menudef.xml file and I tried changing it there and adding the sf-navbar class to the div containing my menu but it still would not work.

    Any suggestions?
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    11/07/2011 5:57 PM
    You will find a css file in the Superfish directory. If you want to modify it, I would copy the entire directory, rename it to Superfish1 or something and change the menu specification in your skin file to use Superfish1 instead of Superfish. You do this with the attribute MenuStyle="Superfish1".

    That way, you always have the original.

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Brian Walker
    Nuke Newbie
    Nuke Newbie
    Posts:9


    --
    11/08/2011 8:55 AM
    The Superfish folder has 3 .css files in it. By default is uses superfish.css. I need it to use superfish-navbar.css and most of what I have read says that you have to use both the superfish.css and superfish-navbar.css but I just cannot find where to tell it what css file to use.
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    11/14/2011 10:10 PM
    Maybe Mark is listening, or will listen when he recovers from his recent trip to DNNWorld in Orlando. (I really enjoyed meeting him in person!)

    In the meantime, you may not have see this: http://users.tpg.com.au/j_birch/plu...superfish/

    I'm not sure that helps, but ...

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Steven Jurick
    Nuke Newbie
    Nuke Newbie
    Posts:1


    --
    11/16/2011 2:02 PM
    Are the files for this tutorial available somewhere for download? I didn't see them in the section where the videos are.

    Thanks.
    Srinath Varatharajan
    Nuke Newbie
    Nuke Newbie
    Posts:8


    --
    11/17/2011 7:56 AM
    I've istalled DotNetNuke_Community_06.01.00_Install. The option Host---->Moduledefinition is not displayed. Can anyone pls help me out
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    11/18/2011 9:45 PM
    That page is now called Extensions and is under the Host menu.

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Robert Nunn
    Nuke Newbie
    Nuke Newbie
    Posts:1


    --
    11/27/2011 7:16 PM
    +1 to the question of where to find the files referenced in the How to build Skins for DNN 6.x. I can't find them either.
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    11/27/2011 7:26 PM
    Scroll down this page for the links.

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Gerry Jerome
    Nuke Newbie
    Nuke Newbie
    Posts:2


    --
    11/30/2011 7:38 AM
    I am new to this but I just can't locate the PSD Tutorials file. In the video, you say that it is on the PSD to DNN page but I can't locate this page.

    Gerry Jerome
    Nuke Newbie
    Nuke Newbie
    Posts:2


    --
    11/30/2011 7:38 AM
    I am new to this but I just can't locate the PSD Tutorials file. In the video, you say that it is on the PSD to DNN page but I can't locate this page.

    Joseph Craig
    DNN MVP
    Posts:11667


    --
    11/30/2011 9:41 AM
    This page: http://www.dnncreative.com/Home/tab...fault.aspx

    Look at the last link under Video 1.

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Kris
    Nuke Newbie
    Nuke Newbie
    Posts:1


    --
    12/02/2011 2:16 AM
    Hi Andy, This is a wonderful and clear series on the skin creation process. I tried the CSS3PIE you showed in the last video and wondered if you've gotten it work on other .css files besides a container.css. I tried to apply to a ventrian news article template.css file and a Live tabs jquery custom css file and the behavior doesn't display in IE8 after it was added to any of the elements. Any thoughts? I noticed a mention on the CSS3PIE website about the server serving the correct Content-Type and wasn't sure if that was possibly the issue. We're hosted on PowerDNN so not sure if there's a server configuration they're not doing or what. Thanks for any suggestions on this. Kris
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    12/02/2011 6:41 AM
    Kris,

    I suspect that your problem is related to the URL for PIE.htc. You may recall Andy's statement in the tutorial that that the URL needed to be relative to the default.aspx directory. You will want to make sure that, for modules, you use the correct path to the PIE.htc file. As a test, try placing a copy of the file in a module's root directory and see if that does the trick. If it does, you can then adjust the URL's path and remove the copy.

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Christopher Adamakis
    Nuke Newbie
    Nuke Newbie
    Posts:4


    --
    01/21/2012 2:20 PM
    Dear Mr Stephenson, thank you very much for the tutorial. I have made a skin applied in my site http://www.expertsoftware.gr and it is based on the info you provided in this tutorial. But I have some problems and I need your help. As you can see in the site I use 2 jquery scripts using the banner container that comes preinstalled with dotnenuke. In order to use the jquery file I use inside the skin the following declarations
     <dnn:dnnjsinclude id=DnnJsInclude1 runat=server filepath=jquery.cycle.min.js pathnamealias=SkinPath/> 
    

    Do these declarations create javascript conflicts? I packaged the jquery files with the skin files and I wonder whether this is a good approach. Why I am asking all these things? Because the site response time is extremely slow and I try to find out what is wrong. Moreover if you try this site in firefox it finds many css mistakes. For example it does not understand the attribute "behavior" . I used to the way you advised in the tutorial. Do these css mistakes create problems? Thank you very much in advance Christopher Adamakis
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    01/21/2012 4:03 PM
    Christopher,

    It looks like you may have solved at least some of the problem as I don't see javascript or jquery errors on your site. Are you still having problem?

    I think that the jquery cycle plugin is already included in that container. You can look at the container's source to verify that.

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Christopher Adamakis
    Nuke Newbie
    Nuke Newbie
    Posts:4


    --
    01/22/2012 11:50 AM
    I still have problems with performance, and I try to find where they come from. The response time is extremely slow. Does it have to do with the configuration of the server?
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    01/22/2012 12:10 PM
    When you speak of the response time, are you referring to the time it takes to see the first page load, or moving from page to page. When I just looked at your site, it seems reasonably quick.

    If the problem is loading the first page, you likely have a "keep alive" issue that is associated with all ASP.NET sites. If you Google "Keep Alive" you will find ways to solve this problem.

    If it is page to page, then server issues could be a problem. More memory and separating the SQL Server from IIS are the usual steps to take.

    Also, don't forget to take a look at the sizes of your pages. There are techniques for dealing with those issues. YSlow is a good tool for tracking down those sorts of problems, too.

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Christopher Adamakis
    Nuke Newbie
    Nuke Newbie
    Posts:4


    --
    01/22/2012 2:21 PM
    Thank you very much for youe replies!!! They are rely useful. The proplem is loading first page, and now I try to understand what is the keep alive issue. Is this something on the configuration?

    Thank you very much for your time
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    01/22/2012 2:33 PM
    The way that IIS works is that it unloads sites that have inactivity for 20 minutes. If you control IIS, you can change that configuration item. If you can't, a keep alive is a program that visits the site every 5 or so minutes to keep it from being unloaded. Some hosts (PowerDNN is a notable one) use a keep alive to keep their hosted sites loaded.

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Yokogawa
    Nuke Newbie
    Nuke Newbie
    Posts:1


    --
    01/25/2012 9:56 AM
    Will there be an update of the tutorial file (the PSD. ascx and css files in the archive) to reflect the changes made over the chapters (even just adding the end files would be ok).

    Somewhere along the line some mistake crept in my files, and I can't seem to get rid of it. Having the final files might rule out issues in my portal.css as well.

    Kevin Terry
    Nuke Newbie
    Nuke Newbie
    Posts:2


    --
    01/25/2012 9:49 PM
    I really enjoyed this series of videos. At the end of video 14 it refers users to video 15. Where might I find video 15 on DNN 6.x Skinning? Thank you.
    Christopher Adamakis
    Nuke Newbie
    Nuke Newbie
    Posts:4


    --
    02/06/2012 9:06 AM
    Dear all, I have one more question regarding greek fonts. If you check my site http://www.expertsoftware.gr the breadcrump appears as You are here: . The phrase You are here is hardcoded in the skin file as the tutorial mentioned. If I change this to greek everything appears wrong. Any ideas how this can be fixed?

    Thank you in advance one more time
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    02/06/2012 11:07 AM
    I'd recommend that you try replacing the hard-coded text with the DotNetNuke Text skin object. That allows you to add a bit of localized text to your skin. Will Strohl has a nice little blog post about it here:
    http://www.willstrohl.com/Blog/Entr...kin-Object

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Darnell
    Nuke Active Member
    Nuke Active Member
    Posts:35


    --
    02/10/2012 1:32 PM
    I am trying to make two panes in the header from the tutorial. I thought it would work similar to the lowerpanes but I am getting a stack top and bottom display. Can you suggest a way to get this to work?
    Here is the HTML and CSS:

    HTML:

    <div id="HeaderPaneRight" runat="server" >



    CSS:
    #header
    {
    width:958px;
    height:195px;
    margin:auto;
    margin-bottom: 23px;
    background:url('images/headerBG.jpg') no-repeat #fff;
    border:1px solid #d6e9e9;
    border-radius:5px;
    }

    #HeaderPaneLeft
    {
    float:left;
    width:398px;
    }

    #HeaderPaneRight
    {
    float:left;
    width:400px;
    }
    Bob Stigers
    Nuke Newbie
    Nuke Newbie
    Posts:8


    --
    03/03/2012 9:42 PM
    Just finished reviewing all of the videos on how to build a skin for DNN 6.x. Outstanding information. However, for the sake of time, if I purchase a skin from the Store.DotNetNuke.com, how can I modify the elements using the information learned from the tutorial? I guess what I am asking, can I customize a pre-packed skin?

    For example, one of the packages under consideration doesn't have a header pane. Can I modify the Skin.css and develop a header pane?

    Thanks.

    PS. Just subscribed to view all of the videos! Great source of information.
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    03/04/2012 11:54 AM
    Yes, you will be able to modify the skin by modifying any of its components.

    To add a pane, you would add this in either the HTML or ASCX file. You would add styles for the pane in the CSS file.

    If you are comfortable doing so, I would delete all of the HTML files and work directly with the ASCX files. If not, modify the HTML files.

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Bob Stigers
    Nuke Newbie
    Nuke Newbie
    Posts:8


    --
    03/05/2012 8:42 AM
    Appreciate the information. Now the other question I have is how to handle the page background color and/or image. Using using the PSD Skin developed in the tutorial, how would I have the border around the skin be a light blue? Or how would I add an image like a website that I recently came accross: http://funoutdoorliving.com/

    Thanks.
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    03/05/2012 9:25 AM
    You should be able to add an image like that using attributes in CSS for the appropriate element. That could be same element to which you have give a background color.

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Phillip
    Nuke Newbie
    Nuke Newbie
    Posts:3


    --
    03/13/2012 5:55 PM
    I see the files under the video 1, but is there anywhere where the complete files are? I have gone through all the videos but would like to start with the final files and modify it from there. Is this possible? thks.
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    03/13/2012 6:16 PM
    Phil,

    On this page: http://www.dnncreative.com/Home/tab...fault.aspx

    I think that the final files are in the downloadable file.

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Phillip
    Nuke Newbie
    Nuke Newbie
    Posts:3


    --
    03/16/2012 3:01 PM
    I don't see them, only the initial ones, as part of tutorial 1, are listed in the downloads. I don't see complete ones anywhere. Could really use them. thks.
    Gail
    Nuke Newbie
    Nuke Newbie
    Posts:1


    --
    03/19/2012 11:43 AM
    I am unable to access the videos. There is no hyperlink. Please advise.
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    03/19/2012 12:07 PM
    Gail,

    Unless you have subscribed to DNN Creative, the number of videos available is quite restricted.

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Phillip
    Nuke Newbie
    Nuke Newbie
    Posts:3


    --
    03/23/2012 9:46 AM
    Any chance of getting the final files uploaded. it would be very useful to start from that point instead of having to type in all the changes made throughout the tutorial. thks.
    Mark Eckeard
    Nuker
    Nuker
    Posts:16


    --
    04/06/2012 11:55 AM
    Although I'm a somewhat recent subscriber, I've watched a few video series and this is easily my favorite. The series covered all aspects for this skin including a little time on the menu. It wasn't a lot but enough to understand the CSS that it uses.

    I'm actually watching it for the second time and I may have missed this but I needed to link to the PIE.htc file by navigating up one level, like this:

    behavior: url(../PIE.htc);

    Great work on the videos. Please keep stuff like this coming. You're easily one of the best resources available for DNN.

    Mark
    Mike
    Nuke Ace
    Nuke Ace
    Posts:46


    --
    05/24/2012 9:38 AM
    I have the following erorr after adding new page to dnn

    Unhandled error loading module. DotNetNuke.Services.Exceptions.ModuleLoadException: Cannot locate ContentPane for Skin
    Unhandled error loading module. DotNetNuke.Services.Exceptions.ModuleLoadException: Cannot locate ContentPane for Skin

    any idea what is causing this

    thanks
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    05/25/2012 7:49 AM
    Are you using a custom skin? The message indicates that you do not have a pane named ContentPane. That is one of the few requirements for a skin file.

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Fredrik
    Nuke Newbie
    Nuke Newbie
    Posts:3


    --
    05/27/2012 5:52 AM
    I have tried to align the menu to the right but I don't succeed.
    Does anyone know how to do this?
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    05/27/2012 9:35 AM
    Yes, it's a matter of getting the HTML and the associated CSS done correctly. Without seeing what you are doing, it's difficult to give a more specific answer.

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Mike
    Nuke Ace
    Nuke Ace
    Posts:46


    --
    06/03/2012 4:51 AM
    Hi great tutorial, I am a little stuck with the lower panels this is my css

    '/* Lower panes */
    #lowerpanes {
    width: 960px;
    margin: auto;
    margin-bottom: 16px;
    }

    #LowerLeftAndMiddile {
    width: 635px;
    float: left;
    }
    #LowerLeft {
    width: 310px;
    float: left;
    }
    #LowerMiddle {
    width: 310px;
    float: right;
    }
    #LowerRight {
    width: 310px;
    float: right;
    }

    .clear{clear:both;}
    '

    this is the div structure

    see attached

    however my panels line up wrong see image attached any idea what I have missed



    thanks

    M
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    06/03/2012 12:18 PM
    If you want the three panes to line up side-by-side and with no space between them, remove the LowerLeftAndMiddle div and replace the two float:right with two float:left.

    If you want some space between the panes, add a margin-right to the left and middle lower panes.

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    pouya karimi
    Nuke Newbie
    Nuke Newbie
    Posts:9


    --
    07/02/2012 1:14 PM
    thank you very much for the tutorial.
    first question: Can I create the package in DNN6 with usability in DNN 5.6.2
    In the organization where I am working, the DNN 5.6.2 is installed and many sub portals designed before .Now the organization is planning to create some new sub portals with new skins for the other parts of the organization.
    Can I install and use this skin (which I created in DNN6 as is taught in the tutorial) on DNN 5.6.2?
    3)If the IT dep. decides to upgrade the DNN 5.6.2 to DNN 6, the modules that were compatible with 5.6.2 will work correctly?or we should buy them again? what about skins which were designed two years ago and compatible with DNN 5.6.2?
    Thank you very much for your attention and help.
    Pouya
    pouya karimi
    Nuke Newbie
    Nuke Newbie
    Posts:9


    --
    07/03/2012 1:56 AM
    Dear Mr. Craig
    thank you for your answers.
    I was faced with an error due to mistakenly installing razor host that was in DNN extension section, Then I couldnot see my portal anymore.I couldnot remove it too.I searched about razor and the error but by just deleting the razor host dll I couldnot remove it. I installed another DNN 6 on my local computer and copied the newly designed skin and container to the correct path Portals-> _default-> skin & container folders and also PIE.htc file in root
    Now I don't have the box shadows and border radius in my IE6.
    In mozilla is shown correctly but I have problem in IE6 which yesterday was correct on the previous installaton of DNN6.
    would you please tell me what should I do now? I havenot changed any code
    I just copied from old installation to the new one.
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    07/03/2012 5:57 PM
    Razor Host Module: this requires that your website run under ASP.NET 4. That should be an easy change to the AppPool configuration.

    Is the PIE.htc file supposed to add support for box shadows and rounded corners for IE6. If you've installed that correctly, I don't know why it's not working.

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Jose Velasquez
    Nuke Newbie
    Nuke Newbie
    Posts:2


    --
    07/04/2012 4:04 PM
    Dear Mr.Craig,

    I was follow your tutorial until video 3 and I have this error message...."Could Not Load Skin: /Portals/_default/Skins/PSDTutorial/Home.ascx, Error: The server tag is not well formed"
    Have you ever seen this error before??
    Bellow is what I have in the file Home.ascx

    <%@ Control language="vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %>
    <%@ Register TagPrefix="dnn" TagName="LANGUAGE" Src="~/Admin/Skins/Language.ascx" %>
    <%@ Register TagPrefix="dnn" TagName="LOGO" Src="~/Admin/Skins/Logo.ascx" %>
    <%@ Register TagPrefix="dnn" TagName="SEARCH" Src="~/Admin/Skins/Search.ascx" %>
    <%@ Register TagPrefix="dnn" TagName="NAV" Src="~/Admin/Skins/Nav.ascx" %>
    <%@ Register TagPrefix="dnn" TagName="BREADCRUMB" Src="~/Admin/Skins/BreadCrumb.ascx" %>
    <%@ Register TagPrefix="dnn" TagName="USER" Src="~/Admin/Skins/User.ascx" %>
    <%@ Register TagPrefix="dnn" TagName="LOGIN" Src="~/Admin/Skins/Login.ascx" %>
    <%@ Register TagPrefix="dnn" TagName="LINKS" Src="~/Admin/Skins/Links.ascx" %>
    <%@ Register TagPrefix="dnn" TagName="PRIVACY" Src="~/Admin/Skins/Privacy.ascx" %>
    <%@ Register TagPrefix="dnn" TagName="TERMS" Src="~/Admin/Skins/Terms.ascx" %>
    <%@ Register TagPrefix="dnn" TagName="COPYRIGHT" Src="~/Admin/Skins/Copyright.ascx" %>
    <%@ Register TagPrefix="dnn" Namespace="DotNetNuke.Web.DDRMenu.TemplateEngine" Assembly="DotNetNuke.Web.DDRMenu" %>
    <%@ Register TagPrefix="dnn" TagName="MENU" src="~/DesktopModules/DDRMenu/Menu.ascx" %>
    <%@ Register TagPrefix="dnn" TagName="CONTROLPANEL" Src="~/Admin/Skins/controlpanel.ascx" %>
    <!--Temporary stylesheet attachment-->

    <dnn:CONTROLPANEL runat="server" id="cp" IsDockable="False" />

    <dnn:LOGO id="dnnLogo" runat="server" />




    <div id="ContentPane" runat="server">

    infobar

    lowerpanes




    Any ideas???

    I will appreciate any suggestion.

    Cheers

    Jose
    pouya karimi
    Nuke Newbie
    Nuke Newbie
    Posts:9


    --
    07/05/2012 5:04 AM
    Jose! Thank you for the question.
    I had this error message too when at first I was working on DNN 5.6.2
    I Installed DNN6 , then no more error
    then I asked this question: Can I create the package in DNN6 with usability in DNN 5.6.2
    In the organization where I am working, the DNN 5.6.2 is installed and many sub portals designed before .Now the organization is planning to create some new sub portals with new skins for the other parts of the organization.
    Can I install and use this skin (which I created in DNN6 as is taught in the tutorial) on DNN 5.6.2?
    Dear Mr.Craig,
    Please answer to my question too.
    thanks
    Jose Velasquez
    Nuke Newbie
    Nuke Newbie
    Posts:2


    --
    07/05/2012 11:17 AM
    Dear Pouya,
    Actually the version I'm working is DNN 06.02.00 (1610)......
    If you have any idea please let me know.

    Cheers

    Jose
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    07/05/2012 10:21 PM
    Jose,

    "The server tag is not well formed" usually means that there is a tag in the skin that is not formatted properly.

    One way that you might diagnose is to open the ascx file in Visual Studio and look at the errors that are shown.

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    07/05/2012 10:24 PM
    Pouya,

    DotNetNuke is quite good at maintaining backwards compatibility. That means that skins you develop in 5.6.2, for example, should mostly work in 6.x.

    Going the other way is more difficult. There were large changes to skinning introduced in DotNetNuke 6.x, so it is unlikely that at 6.x skin will work in 5.x. I say unlikely because it is possible to develop a skin that is compatible, but you'll have to know what not to do to make that successfu.

    It's better to take your 6.x skin, package it for 5.x and then you'll probably have to make some modifications to get everything working correctly. This is particularly true relative to action menus, etc.

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    pouya karimi
    Nuke Newbie
    Nuke Newbie
    Posts:9


    --
    07/08/2012 10:57 AM
    Dear Mr.Craig,
    Would you please tell me how I can build the menu in this page for my skin?
    http://www.unesco.org/new/en/culture/
    what is the type of menu? I mean the provider name of the menu.
    DNNMenuNavigationprovider or ?
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    07/08/2012 10:45 PM
    I recommend that people use the default DDR Menu for skinning.

    You could probably use the DNNStandardMenuProvider variant and adjust the CSS to get what you want. You would need to disable most, if not all, of the javascript/jquery and just show the children of the selected page. You'll also need to get them to display horizontally.

    It might actually be easier to use the ULTokens version. Set the NodeSelector option to display root elements and children of the selected node and only display the first two levels. Set the styles for a horizontal display, with first level elements displayed below the first level elements. You can probably get a good handle on how to do this if you look at the way the css is handled in the site you reference.

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Orman
    Nuke Newbie
    Nuke Newbie
    Posts:1


    --
    07/14/2012 8:23 AM
    Where can I find the sample files? Thanks in advance I look forward
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    07/14/2012 1:19 PM
    Go to the tutorial named "How to build Skins for DNN 6.x." Then find the link for the PSD Tutorial Files and download it. You will find the skin files there.

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Rishad Ahamed
    Nuke Newbie
    Nuke Newbie
    Posts:7


    --
    07/30/2012 1:21 PM
    hi!

    I have an issue in the NAV menu. In my manu the sub menus are not come over the content of the site , for example in my site the content pane has TEXT/HTML module . I added content and the menu and the sub menu drop behind the TEXT/HTML module content. can you help me. where I need to edit the script.
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    07/31/2012 8:47 PM
    Try adding this class to your skin.css file:

    .DnnModule{ z-index:100;}

    If that does not work, set the z-index to 0.


    Also, make sure that your skin is XHTML.


    (Which menu is your skin using, by the way? )


    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Rishad Ahamed
    Nuke Newbie
    Nuke Newbie
    Posts:7


    --
    07/31/2012 11:52 PM
    Great thanks alot. its work. tthanks for your fast response. I have some the issues I forward ASAP.

    thank you
    H.Rishad Ahamed

    ................................................................................................


    Hi again, I m using the Superfish MENU as my site menu with some changes. I need to edit it as like follow....
    please check the attachment for image.

    how can I achieve this ....
    Michael
    Nuker
    Nuker
    Posts:13


    --
    09/23/2012 4:15 PM
    Andy,
    Simply Brilliant !!! You made it look so simple. Going to build my own DDR skin soon.
    Onlyone
    Nuke Newbie
    Nuke Newbie
    Posts:8


    --
    09/29/2012 3:25 AM
    Awesome Tutorial. Thanks You.
    But the menu 'divider' is not showing up on DNN installations like the one on the PSD prototype, even on the tutorial videos. Please help.

    Plus, I've come across a strange issue when the skin is applied as shown in the attachment.
    Can someone help me with this?
    Onlyone
    Nuke Newbie
    Nuke Newbie
    Posts:8


    --
    09/30/2012 3:12 AM
    Hello Friends,

    Is there any way to get the DDR superfish menu to have its direction from right to left so that we can implement it for an Arabic skin?
    To simplify, the first menu item should start at the right, the next one to its left and so on.

    Appreciate any help regarding this.

    Thanks

    Ritz
    Denel
    Nuke Newbie
    Nuke Newbie
    Posts:2


    --
    10/07/2012 7:47 PM
    Fantastic Tutorial. However, I think I missed something about the footer. I still have the bottom border with the rounded corners. Did I miss something? Also, I do not have the bottom menu as shown in the PSD files, with the privacy policy and support number. I wanted to make sure I had that all correct before packaging...so I have not watched video 15 yet. Maybe it is in there.

    Also, are there videos on how to make containers with gradient backgrounds, or decorative borders, and videos on how to have a vertical menu instead of a horizontal menu, along with images for that?

    Also, I had read somewhere that you can now have a gradient background coded in CSS without having to use a background image...but I don't remember where I read it, and was wondering if you knew how to do that.

    Thanks for all your help! This tutorial alone was worth the price of admission. Can wait to dig through more tutorials!
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    10/08/2012 10:59 AM
    Im on my way to DNNWorld this week, and need to review the tutorial before answering your questions.m so, imapologize in advance for a slow answer. Maybe someone else can chime in?

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Denel
    Nuke Newbie
    Nuke Newbie
    Posts:2


    --
    10/09/2012 12:10 AM
    I think I found a way to do the vertical menu...actually a couple of ways. I am just not sure about having a background image for it, and how to line up content panes.

    I wish I was going to be at DNNWorld this week. Last year I said I was definitely going this year...but best laid plans of mice and men, eh? I will be there next year, if I have to walk!


    ---