ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE

Adam Humphrey Adammer LLC

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

RightPaneProfile ContentPaneProfile

BottomPane

Social Pane Layouts

Tidy Social Pane Layout

ContentPane

LeftPaneProfile

RightPaneProfile

ContentPaneProfile

BottomPane

TabsPaneProfile

HeaderPaneProfile

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

ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE

Adam Humphrey Adammer LLC

THANK YOU!