Adam Humphrey
Adammer LLC
ADDING STYLE TO YOUR
DOTNETNUKE SOCIAL SITE
1
Ask Questions
About Me
2
Give It Away
Housekeeping
Styling A DotNetNuke Module
l 
Assumptions
l 
About Tidy
l 
Social Skin Objects
l 
Where to CSS
l 
Social Pane Layouts
l 
Let The Games Begin
(a/k/a Styling The Social Features of DNN 6.2)
l 
Lessons Learned
l 
Q&A
Assumptions
EXPERT
Tidy
Tidy
Tidy Social Skin Objects
Tidy Social Skin Objects
<div class="loginLinks">!
<dnn:USER ID="dnnUser" runat="server"
LegacyMode=”false" />!
<dnn:LOGIN ID="dnnLogin" CssClass="LoginLink"
runat="server" LegacyMode=”false" />!
</div>!
Tidy Social Skin Objects
LegacyMode=“false”!
Tidy
Example
Where to CSS
l 
Default.css
/portals/_default/default.css
l 
Modules.css
/desktopmodules/[module]/module.css
l 
Skin.css
/portals/[portalID]/skins/[skin]/skin.css
l 
SkinFileName.css
/portals/[portalID]/skins/[skin]/[skinfilename].css
Where to CSS
l 
Container.css
/portals/[portalID]/containers/[container]/container.css
l 
ContainerFileName.css
/portals/[portalID]/containers/[container]/
[containerfilename].css
l 
Portal.css
/portals/[portalID]/portal.css
l 
Inline Styles
Where to CSS
l 
skin.css
l 
[SkinName].css
l 
Custom location
Where to CSS
Example
3
Use skin.css sparingly
(with prudence and restraint)
Social Pane Layouts
Dark Knight Social Pane Layout
ContentPane
RightPane
LeftPaneProfile
HeaderPaneProfile
ContentPaneProfile
BottomPane
RightPaneProfile
Social Pane Layouts
Tidy Social Pane Layout
ContentPane
TabsPaneProfile
HeaderPaneProfile
LeftPaneProfile
ContentPaneProfile
RightPaneProfile
BottomPane
Let The Games Begin
(a/k/a Styling The Social Features of DNN 6.2)
Lessons Learned
l 
Never get involved in a land war in Asia
l 
Never go in against a Sicilian when death is on the line!
Lessons Learned
l 
Where to CSS
l 
Enabling the Social Skin Objects
l 
How to Style the Social Features in DNN 6.2
Adam Humphrey
Adammer LLC
ADDING STYLE TO YOUR
DOTNETNUKE SOCIAL SITE
THANK YOU!