adding style to your dotnetnuke social site
TRANSCRIPT
![Page 1: ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE](https://reader036.vdocuments.us/reader036/viewer/2022081521/586e03191a28abab528b5348/html5/thumbnails/1.jpg)
ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE
Adam Humphrey Adammer LLC
![Page 2: ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE](https://reader036.vdocuments.us/reader036/viewer/2022081521/586e03191a28abab528b5348/html5/thumbnails/2.jpg)
1 Ask Questions
![Page 3: ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE](https://reader036.vdocuments.us/reader036/viewer/2022081521/586e03191a28abab528b5348/html5/thumbnails/3.jpg)
About Me
![Page 4: ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE](https://reader036.vdocuments.us/reader036/viewer/2022081521/586e03191a28abab528b5348/html5/thumbnails/4.jpg)
![Page 5: ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE](https://reader036.vdocuments.us/reader036/viewer/2022081521/586e03191a28abab528b5348/html5/thumbnails/5.jpg)
![Page 6: ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE](https://reader036.vdocuments.us/reader036/viewer/2022081521/586e03191a28abab528b5348/html5/thumbnails/6.jpg)
2 Give It Away
![Page 7: ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE](https://reader036.vdocuments.us/reader036/viewer/2022081521/586e03191a28abab528b5348/html5/thumbnails/7.jpg)
Housekeeping
![Page 8: ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE](https://reader036.vdocuments.us/reader036/viewer/2022081521/586e03191a28abab528b5348/html5/thumbnails/8.jpg)
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](https://reader036.vdocuments.us/reader036/viewer/2022081521/586e03191a28abab528b5348/html5/thumbnails/9.jpg)
Assumptions
EXPERT
![Page 10: ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE](https://reader036.vdocuments.us/reader036/viewer/2022081521/586e03191a28abab528b5348/html5/thumbnails/10.jpg)
Tidy
![Page 11: ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE](https://reader036.vdocuments.us/reader036/viewer/2022081521/586e03191a28abab528b5348/html5/thumbnails/11.jpg)
Tidy
![Page 12: ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE](https://reader036.vdocuments.us/reader036/viewer/2022081521/586e03191a28abab528b5348/html5/thumbnails/12.jpg)
Tidy Social Skin Objects
![Page 13: ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE](https://reader036.vdocuments.us/reader036/viewer/2022081521/586e03191a28abab528b5348/html5/thumbnails/13.jpg)
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](https://reader036.vdocuments.us/reader036/viewer/2022081521/586e03191a28abab528b5348/html5/thumbnails/14.jpg)
Tidy Social Skin Objects
LegacyMode=“false”!
![Page 15: ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE](https://reader036.vdocuments.us/reader036/viewer/2022081521/586e03191a28abab528b5348/html5/thumbnails/15.jpg)
Tidy
Example �
![Page 16: ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE](https://reader036.vdocuments.us/reader036/viewer/2022081521/586e03191a28abab528b5348/html5/thumbnails/16.jpg)
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](https://reader036.vdocuments.us/reader036/viewer/2022081521/586e03191a28abab528b5348/html5/thumbnails/17.jpg)
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](https://reader036.vdocuments.us/reader036/viewer/2022081521/586e03191a28abab528b5348/html5/thumbnails/18.jpg)
Where to CSS
l skin.css
l [SkinName].css
l Custom location
![Page 19: ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE](https://reader036.vdocuments.us/reader036/viewer/2022081521/586e03191a28abab528b5348/html5/thumbnails/19.jpg)
Where to CSS
Example �
![Page 20: ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE](https://reader036.vdocuments.us/reader036/viewer/2022081521/586e03191a28abab528b5348/html5/thumbnails/20.jpg)
3 Use skin.css sparingly
(with prudence and restraint)
![Page 21: ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE](https://reader036.vdocuments.us/reader036/viewer/2022081521/586e03191a28abab528b5348/html5/thumbnails/21.jpg)
Social Pane Layouts
Dark Knight Social Pane Layout
ContentPane
RightPane
LeftPaneProfile HeaderPaneProfile
RightPaneProfile ContentPaneProfile
BottomPane
![Page 22: ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE](https://reader036.vdocuments.us/reader036/viewer/2022081521/586e03191a28abab528b5348/html5/thumbnails/22.jpg)
Social Pane Layouts
Tidy Social Pane Layout
ContentPane
LeftPaneProfile
RightPaneProfile
ContentPaneProfile
BottomPane
TabsPaneProfile
HeaderPaneProfile
![Page 23: ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE](https://reader036.vdocuments.us/reader036/viewer/2022081521/586e03191a28abab528b5348/html5/thumbnails/23.jpg)
Let The Games Begin (a/k/a Styling The Social Features of DNN 6.2)
![Page 24: ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE](https://reader036.vdocuments.us/reader036/viewer/2022081521/586e03191a28abab528b5348/html5/thumbnails/24.jpg)
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](https://reader036.vdocuments.us/reader036/viewer/2022081521/586e03191a28abab528b5348/html5/thumbnails/25.jpg)
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](https://reader036.vdocuments.us/reader036/viewer/2022081521/586e03191a28abab528b5348/html5/thumbnails/26.jpg)
ADDING STYLE TO YOUR DOTNETNUKE SOCIAL SITE
Adam Humphrey Adammer LLC
THANK YOU!