Tidy – A Free Responsive DotNetNuke Skin

January 9th, 2013

We just released a brand new skin called Tidy. Well, it’s not completely new. I used a Beta version of this skin for DotNetNuke World 2012 training sessions and my presentations.

Tidy is an Open Source MIT License skin hosted on CodePlex.


Tidy Skin in Action

Check it out!

  1. January 30th, 2013 at 07:37 | #1

    Hi Guys,
    Thanks again for the great skin. My site looks great. I’m wondering if it is possible to remove the login button on the Tidy skin? I just takes up unecessary space as I won’t have people loggin in.

    Thank You!


  2. January 30th, 2013 at 07:55 | #2

    Hi @Martin,

    Yes, you only need to make two changes to the Tidy.css file to remove the Login and Register buttons.

    File: /Portals/_default/Skins/Tidy/Tidy.css
    Line 127 (.loginLinks) change display:none;
    Line 321 (#dnnMenu) change top:35px;

    Let me know if that works for you or if you need anything else.

  3. Seth
    February 3rd, 2013 at 22:13 | #3


    I am schooling myself on the newer versions of DNN. Currently I’m playing around with Tidy. I have run across a question and want to ask.

    I am using Will Strolh’s content rotator on my home page to act as a rotating banner. When I view the site on a mobile, the rest of the page shows up just fine except for this. Can you point me in the right direction to either have it resized, or better yet, just not show it on mobile?

    Thanks for the info. This is a great place to start learning for me.

    • February 4th, 2013 at 10:09 | #4

      Hi @Seth,

      To get Will’s Content Slider Module to behave correctly on responsive skins would take a little bit if work. I’d recommend adding the following code to the Tidy.css file to hide the slider on mobile devices:


      After Line 431 add:
      .ModWillStrohlContentSliderC {
      display: none;

      Let me know if this works for you and if you have any additional questions. I’m always happy to help.

  4. Seth
    February 26th, 2013 at 21:16 | #5

    Adam I’m so sorry. I thought I was subscribed to this but I was not. I fully expected you to just not have had time to get to it.

    This worked perfect!!! Thank you

    Any chance you can send me your DNN knowledge on a thumb drive and I can plug it in to my head somewhere? Finding time to learn stuff is the hardest thing right now. I love the simplicity of this skin. Makes things really easy.

  5. April 25th, 2013 at 15:00 | #6

    Hi Adam,

    Could you tell me how to set the top level page of the menu?

    I have a page that is and all of the child pages of that page are the mobile site. I know that this is not what this skin is designed to do but it will work very nicely for it.


  6. Rich
    May 10th, 2013 at 11:00 | #8

    Hi Adam,
    I am trying to create a 1px border around the content area but not the menu header or copyright footer. I’d like the borders to look like your page here actually 🙂
    When I set border on .pageWidth, the border appears around all these areas. Is there a way to put border on .pageWidth but exclude menu header and copyright footer?

    • May 10th, 2013 at 11:25 | #9

      Hi @Rich,

      I think you’re looking for something like this:

      .contentDiv > .pageWidth {
      border-left: 1px solid #CCCCCC;
      border-right: 1px solid #CCCCCC;
      padding: 0 20px;
      width: 948px; /* width from line 433 .pageWidth minus 40px to accommodate the padding */

      You will most likely have to play around with the padding and margins to get it lined up perfectly. But give it a shot and let me know if it works for you.

  7. May 14th, 2013 at 10:05 | #10

    Hi Adam,
    Thanks for the border answer. It worked.
    Now I’m on to a mobile resize question. I am using a rotating banner module. Mobile resizes the pics in the module but the module retains a fixed height. The result is good looking banner pics, but with too big a height. I think this is a module issue rather than a skin issue, but I was wondering if you could comment or have suggestions.

  8. June 20th, 2013 at 00:02 | #11

    Great news Adam. The new skin looks great. The greatest thing which I like about the Tidy theme is its Responsive Feature. Today, when we talk about resposive website, you don’t find much DotNetNuke website which are responsive. I feel great when I read your blog title “Tidy – A Free Responsive DotNetNuke Skin”. I surprised when I read Free. You have done hard work and giving the skin “free”. Great Man.

  9. Garry
    July 23rd, 2013 at 18:51 | #12

    Thank you for making this skin available. I like the way the menu adjusts it’s position to the left to fit within the browser window. How can I make the third level menu items “fly out” like a superfish menu. Currently the third level menu items are displayed in the dropdown list. They are indented to the right, but I would like for them to fly out when the user hovers over their second level parent item. Any help would be appreciated. Thank you.

  10. Aaron
    September 18th, 2013 at 18:52 | #13

    Really silly questions, but how do I remove the “Login” button on the mobile view and how would I change the text on the “Menu” button to something different? Awesome skin btw!

  11. Aaron
    September 18th, 2013 at 19:57 | #14

    Please disregard my last question… the answer was right in front of me.

  12. November 18th, 2013 at 09:00 | #15

    Hi Adam!

    I love your skin tidy! It is super clean.
    I have a question, I would like to change the names on the menu buttons. I can’t find where though, could you help me it would be great!


  13. Chris
    November 19th, 2013 at 08:45 | #16


    I can’t change the background color. I don’t know why, there seems to be some kind of hidden code somewhere. Happy for answers.

    Great skin btw

  14. Vinny
    December 16th, 2013 at 17:36 | #17

    Thanks for the great skin Adam. I tried creating a submenu 2 levels deep. I noticed the .sublevelright class in the css file was commented out. I uncommented that and it now displays but when I hover over the top level menu item, both submenus display simultaneously. Can you point me in the right direction to adjust so the second level sub menu displays when hovering over the menu item in first level sub menu rather then the top level?

    • December 17th, 2013 at 11:26 | #18

      Hi @Vinny,

      Yes, 2 level fly-out menus were originally going to be a feature of the skin but I removed them to reduce complexity. You will need to modify the tidy.js file to support the fly-out effect for the 2nd level menu items.

      Right now there isn’t any function looking for the mouse hovering over a menu fly-out with sub-items.

  15. December 18th, 2013 at 11:23 | #19

    @ Adam Humphrey Thank yo uAdam. I’ll look through the js file to make the adjustment. Do you remember if there would be any changes needed in the css?

  16. Alex
    January 13th, 2014 at 01:42 | #21

    Hi Adam,
    I wanted to add Header Banner to the Tidy.How can i do this ?

  17. Alex
    January 13th, 2014 at 01:47 | #22

    Actually,I wanted to add Header banner as a Image ( Jpg / Png ) image.

    • January 22nd, 2014 at 16:40 | #23


      You will need to modify the Tidy.ascx file to add a new pane. Here’s a quick video on basic skinning.

      Give it a shot and let me know how it goes. I created Tidy specifically to help people learn how to write skins for DNN. Feel free to make all the modifications you need.


Subscribe to comments feed