Home » DotNetNuke - Skinning » DotNetNuke Skinning – Standard CSS Classes

DotNetNuke Skinning – Standard CSS Classes

By now, you’ve gotten the idea that creating a set of skins and containers for DotNetNuke is a little bit more work than just creating some HTML, images, and a CSS file. Hopefully, you also realize that it isn’t really that much more work than what you are used to, just a few more tags, really.

Today, you’ll be happy to know that we are going to spend all of our time talking about HTML and CSS. Something you should already feel comfortable with.


One of the things I wish I had known when I started working with DotNetNuke is that all of the link buttons generated by DotNetNuke are classed as CommandButton. I was unaware of this when I wrote my first module and it would have helped my modules look a lot more consistent with the rest of DotNetNuke if had classed all of my link buttons as CommandButton, too.

Of course, what does a designer care about my code? Not much, but it does illustrate that there are defaults that DotNetNuke has established. If you don’t follow them, you’ll end up with a crappy-looking GUI.

Classes used by DotNetNuke:

ClassUsage
CommandButtonJust about every Link Button in DotNetNuke uses this. Link Buttons look like hyper links, but behave like form submit buttons.
HeadContainer Title, Section Heading (expand/collapsible sections)
LoginContainerLogin page
LoginTabLogin page
LoginTabHoverLogin page
LoginTabSelectedLogin page
LoginPanelLogin page
NormalAnywhere text should display in a default font.
normalYeah, someone goofed and they are in with and without a leading capital letter.
NormalTextBoxJust about any text box
NormalRedred text / error messages
CommandButtonButtonButtons
LabelEditOverClassMouse over for Edit in Place of Container Title
SubHeadused on many of the label controls that are prompts for information.
subsubheadTimeZoneEditor
FileManager_HeaderIn the file manager.
FileManagerTreeNodeSelected
FileManagerTreeNode
FileManager_Item
FileManager_AltItem
FileManager_SelItem
FileManagerTreeNode
WorkPanelFile manager file upload, Site Settings, Recycle Bin
NormalBoldFile Manager
DataGrid_ContainerData grids
DataGrid_FooterData grids
DataGrid_PagerData Grids
WizardTextInstallation Screen, Site Wizard
WorkPanelUninstall Screen, Edit Roles, Security Roles
WizardSite Wizard, Edit Profile Definitions, Install Wizard
WizardButtonInstall Wizard
WizardButtonDisabledInstall Wizard
SkinObjectCopyright, CurrentDate, Help, HostName, Login, Privacy, Search, Terms, User
HelpEdit Profile Definitions, Membership, Profile
SuggestTextMenuBanner Options
GroupSuggestMenuBanner Options
SuggestNodeOverBanner Options
StandardButtonPush Buttons

Of the CSS classes above, the ones you will need to pay the most attention to are:

  • CommandButton
  • Normal
  • normal
  • NormalTextBox
  • NormalRed
  • NormalBold
  • Head
  • SubHead
  • DataGrid_Container
  • DataGrid_Footer
  • DataGrid_Pager
  • SkinObject

So when you create your skins and containers, make sure you at least include definitions for those.

Like this Article? Subscribe to get every article sent to your email.

Related Post

  • DotNetNuke Skins – Handling CSS FilesDotNetNuke Skins – Handling CSS Files One of the most common mistakes I see when I buy skins for DotNetNuke is that the skin creator places a link tag for the CSS file inside the ASCX file for that skin. I've also seen skin […]
  • DotNetNuke Modules – Creating Base ModulesDotNetNuke Modules – Creating Base Modules Now that we have DotNetNuke installed into Visual Studio we can go ahead and create our first modules. Actually, creating the modules is pretty simple. But it is even easier to do it […]
  • DotNetNuke Skinning – Dealing with ImagesDotNetNuke Skinning – Dealing with Images There is one final basic topic we need to address prior to moving on to the details of working with Skin Objects, and that is the topic of including images in our skins and […]
  • DotNetNuke Skins – ASCX vs HTML modeDotNetNuke Skins – ASCX vs HTML mode I got a question yesterday from a designer who is unfamiliar with ASP.NET asking what the difference is between ASCX mode and HTML mode when developing skins and containers for […]
  • DotNetNuke Skins – Hello, WorldDotNetNuke Skins – Hello, World Now that we understand how the ASCX files and CSS files relate to each other, it's time to create our first skin file. Today we are going to deal primarily with the issues of […]

About Dave Bush

Dave Bush is a Full Stack ASP.NET developer. His commitment to quality through test driven development, vast knowledge of C#, HTML, CSS and JavaScript as well as his ability to mentor younger programmers and his passion for Agile/Scrum as defined by the Agile Manifesto and the Scrum Alliance will certainly be an asset to your organization.

  • Craig

    An example CSS would be helpful. Thanks for your tuts!

  • http://www.webascender.com/ DotNetNuke Consultant

    We have been skinning and doing dotnetnuke development for over 4 years now and have not ever got into skinning the file manager. Over the last couple of weeks I have actually read a couple blogs from people who were doing CSS updates on that so showing those classes is helpful. It would be impossible to skin DNN without FireBug for Firefox, or the developer tools for IE. That’s certainly step one. Thanks for the article.
    James