ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE

26
ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE Adam Humphrey Adammer LLC

Transcript of ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE

Page 1: ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE

ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE

Adam Humphrey Adammer LLC

Page 2: ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE

1 Ask Questions

Page 3: ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE

About Me

Page 4: ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE
Page 5: ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE
Page 6: ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE

2 Give It Away

Page 7: ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE

Housekeeping

Page 8: ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE

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

Page 9: ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE

Assumptions

EXPERT

Page 10: ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE

Tidy

Page 11: ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE

Tidy

Page 12: ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE

Tidy Social Skin Objects

Page 13: ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE

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>!

Page 14: ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE

Tidy Social Skin Objects

LegacyMode=“false”!

Page 15: ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE

Tidy

Example �

Page 16: ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE

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

Page 17: ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE

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

Page 18: ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE

Where to CSS

l  skin.css

l  [SkinName].css

l  Custom location

Page 19: ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE

Where to CSS

Example �

Page 20: ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE

3 Use skin.css sparingly

(with prudence and restraint)

Page 21: ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE

Social Pane Layouts

Dark Knight Social Pane Layout

ContentPane

RightPane

LeftPaneProfile HeaderPaneProfile

RightPaneProfile ContentPaneProfile

BottomPane

Page 22: ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE

Social Pane Layouts

Tidy Social Pane Layout

ContentPane

LeftPaneProfile

RightPaneProfile

ContentPaneProfile

BottomPane

TabsPaneProfile

HeaderPaneProfile

Page 23: ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE

Let The Games Begin (a/k/a Styling The Social Features of DNN 6.2)

Page 24: ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE

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!

Page 25: ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE

Lessons Learned

l  Where to CSS

l  Enabling the Social Skin Objects

l  How to Style the Social Features in DNN 6.2

Page 26: ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE

ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE

Adam Humphrey Adammer LLC

THANK YOU!