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:
|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)|
|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|
|LabelEditOverClass||Mouse over for Edit in Place of Container Title|
|SubHead||used on many of the label controls that are prompts for information.|
|FileManager_Header||In the file manager.|
|WorkPanel||File manager file upload, Site Settings, Recycle Bin|
|WizardText||Installation Screen, Site Wizard|
|WorkPanel||Uninstall Screen, Edit Roles, Security Roles|
|Wizard||Site Wizard, Edit Profile Definitions, Install Wizard|
|SkinObject||Copyright, CurrentDate, Help, HostName, Login, Privacy, Search, Terms, User|
|Help||Edit Profile Definitions, Membership, Profile|
Of the CSS classes above, the ones you will need to pay the most attention to are:
So when you create your skins and containers, make sure you at least include definitions for those.
Other post in DotNetNuke - Skinning
- 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 - Dealing with Images - July 3rd, 2008
- DotNetNuke - Avoiding Container Collision - June 11th, 2012
- Infinite DotNetNuke Skin Sets For One Low Price - August 14th, 2012
- DotNetNuke Skins - ASCX vs HTML mode - November 6th, 2012
- DotNetNuke Skinning - Collapsible Containers - January 8th, 2013
- DotNetNuke Skinning - Standard CSS Classes - February 5th, 2013
- DotNetNuke - Skinning - March 12th, 2013
- DotNetNuke Skinning - Containers - December 18th, 2013
- DotNetNuke Skinning - SolPartMenu - January 29th, 2014