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. |
| FileManagerTreeNodeSelected | |
| FileManagerTreeNode | |
| FileManager_Item | |
| FileManager_AltItem | |
| FileManager_SelItem | |
| FileManagerTreeNode | |
| 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.
Other post in DotNetNuke - Skinning
- DotNetNuke - Skinning - June 5th, 2008
- DotNetNuke Skinning - Getting Set Up - June 10th, 2008
- DotNetNuke Skins - Handling CSS Files - June 12th, 2008
- DotNetNuke Skins - Hello, World - June 17th, 2008
- DotNetNuke Skins - Skin Objects - June 19th, 2008
- DotNetNuke Skinning - Containers - June 24th, 2008
- DotNetNuke Skinning - Standard CSS Classes - June 26th, 2008
- DotNetNuke - Avoiding Container Collision - July 1st, 2008
- DotNetNuke Skinning - Dealing with Images - July 3rd, 2008
- DotNetNuke Skinning - SolPartMenu - July 8th, 2008
- DotNetNuke Skinning - Collapsible Containers - July 10th, 2008
- DotNetNuke Skins - ASCX vs HTML mode - August 27th, 2008
If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!
October 8th, 2008 at 11:14 am
An example CSS would be helpful. Thanks for your tuts!
October 9th, 2008 at 10:59 pm
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