Applying DNN Skin.101

1
Applying DNN Skin.101

• How do skins work?
• Whats the difference between a skin and a
  container?
• Should I use .HTML or .ASCX?
• File structure Setting up your zip file to
  upload.
• Using the stylesheet editor to do what YOU want!

2
How do skins work?

• DNN uses placeholders to separate the skin
  objects from the static markup which designers
  can then include in their skin.
• Placeholders are simply TOKEN text, which
  uniquely identify a skin object.
• DNN features a simple skin upload mechanism which
  does the substitution of placeholders with the
  skin objects to produce a user control file
  (.ascx) which can then be rendered by the engine.
  
• This pre-processing occurs only once when the
  skin is uploaded.

3
Difference between skin/container

• Containers are skin definitions which can be
  applied to content modules. A container is
  defined in exactly the same manner as a skin
  except for the fact that there are a different
  set of skin objects used in containers.
• The difference between the two, is that one skin
  can have many different containers, designers
  need to keep this in mind.
• Example http//www.gdmhabitat.org

4
Using HTML or ASCX?

• Whats your preference? Design or Code?
• HTML allows you to view the design without
  applying a skin. It forces the designer to use
  XML to assign properties to the skin
  objects/tokens.
• ASCX lets you customize the code without relying
  on the XML file. You have to upload the skin to
  view the results. I hope you didnt forget the
  SOLPARTMENU in your code.

5
Demo

• HTML w/XML

6
Creating your skins.zip file

• Create a containers.zip file
• Create a skins.zip file
• Be aware of folder structures DEMO
• Combine the two .zip files into a master .zip
  file, i.e. IA DNUG.zip
• How you name your skin.html or skin.ascx will
  affect the name being displayed by DNN.
• Dont forget to create a screenshot.jpg file for
  the user interface. For example
  IADNUGBlue.htm and IADNUGBlue.jpg

7
Demo

• Create IA DNUG.zip

8
DNN Stylesheet Editor Tips Tricks

• Viewing source, get the true cssclass name.
• Use skin styles and XML to override the styles.
• Under the Site Settings, Stylesheet Editor you
  can use !important to make sure your style is
  applied.
• DEMO Stylesheet Editor