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:

Class Usage
CommandButton Just about every Link Button in DotNetNuke uses this. Link Buttons look like hyper links, but behave like form submit buttons.
Head Container Title, Section Heading (expand/collapsible sections)
LoginContainer Login page
LoginTab Login page
LoginTabHover Login page
LoginTabSelected Login page
LoginPanel Login page
Normal Anywhere text should display in a default font.
normal Yeah, someone goofed and they are in with and without a leading capital letter.
NormalTextBox Just about any text box
NormalRed red text / error messages
CommandButtonButton Buttons
LabelEditOverClass Mouse over for Edit in Place of Container Title
SubHead used on many of the label controls that are prompts for information.
subsubhead TimeZoneEditor
FileManager_Header In the file manager.
WorkPanel File manager file upload, Site Settings, Recycle Bin
NormalBold File Manager
DataGrid_Container Data grids
DataGrid_Footer Data grids
DataGrid_Pager Data Grids
WizardText Installation Screen, Site Wizard
WorkPanel Uninstall Screen, Edit Roles, Security Roles
Wizard Site Wizard, Edit Profile Definitions, Install Wizard
WizardButton Install Wizard
WizardButtonDisabled Install Wizard
SkinObject Copyright, CurrentDate, Help, HostName, Login, Privacy, Search, Terms, User
Help Edit Profile Definitions, Membership, Profile
SuggestTextMenu Banner Options
GroupSuggestMenu Banner Options
SuggestNodeOver Banner Options
StandardButton Push 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.

Related Post

2 Responses to “DotNetNuke Skinning – Standard CSS Classes”

  • Craig:

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

  • 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.

Leave a Reply

Comment Policy:

  • You must verify your comment by responding to the automated email that is sent to your email address. Unverified comments will never show.Leave a good comment that adds to the conversation and I'll leave your link in.
  • Leave me pure spam and I'll delete it.
  • Leave a general comment and I'll remove the link but keep the comment.

Notify me of followup comments via e-mail