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

ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE

Jan 05, 2017

Download

Documents

votu
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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!