1.Skinning MindTouch Deki Presented By Damien Howley

2. Overview

Introduction

Resources

What is skinning?

Audience experience

Templates vs. Skins

CSS modifications

• File system architecture

• CSS variables

Questions

3. Introduction

Damien Howley

• title: Graphic Designer / Evangelist

• email: [email_address]

• twitter: @DamienH

• contribution: Created Fiesta Skin

4. Resources

Wiki Documentation

• http://wiki.developer.mindtouch.com

• http://wiki.developer.mindtouch.com/MindTouch_Deki/Skinning

Fiesta

• http://wiki.developer.mindtouch.com/MindTouch_Deki/Skinning/Fiesta

Forums

• http://forums.developer.mindtouch.com/

MindTouch

• http://www.mindtouch.com

• http://www.mindtouch.com/blog

5. What is skinning?

Skinning is the process of creating or modifying the look & feed of your Deki.

• HTML markup

• CSS styles

6. Audience experience

Who has tried to skin MindTouch Deki?

• why/why not?

• successes / frustrations?

• why do you want to skin MindTouch Deki?

7. Templates vs Skins

Template(php, html)

Skins(CSS) ace base fiesta Mindtouch, blue, neutral wireframe pro, caesious Sunset, wireframe, grazing-green, smokey-ocean, summer-city, Mindtouch, sunflower-rainbow, christmas-blizzard, charcoal-forest, sunrise-fog, sky-tangerine, rustic-azure, maroon-flash, cobalt-marine 8. Template vs Skins Ace Fiesta 9. Templates vs Skins

Other Templates

• Deki CMS

• Deuce(Kilen Woods)

10. CSS modifications

How do I change the CSS?

• Control Panel

• File system

11. CSS modifications

Using the control panel to modify the CSS

• DekiControl Panel Visual Appearance

12. CSS modifications

Using the file system to modify the CSS

• File System192.168.xxx.xxxdrivevarwwwdeki-xxxskins

13. CSS modifications

Using the file system to modify the CSS

• File System192.168.xxx.xxxdrivevarwwwdeki-xxxskinsfiesta

_common.css

_style.css

Fiesta.php

14. CSS modifications

Using the file system to modify the CSS

• File System192.168.xxx.xxxdrivevarwwwdeki-xxxskinsfiestagrazing-green

_content.css

css.php

style.css

15. CSS modifications

CSS variables(PHP in CSS)

• File System192.168.xxx.xxxdrivevarwwwdeki-xxxskinsfiestagrazing-greenstyle.css

• Proposed Spec for CSS 3

16. CSS hierarchy

Template

• Template Styles (_common.css)

• Skin

• • Consolidated style css (_style.css)

• • Unique style css (/style.css)

• • • Control paneloverride template styles

• • Unique content css (/content.css)

• • • Control paneloverride content styles

17. Recap

What is skinning?

Resources

Templates vs. Skins

CSS modifications

• File system architecture

• CSS variables

18. Questions

Does anyone have any questions?

• things that are unclear?

• barriers to skinning?

19. Contact Me

Damien Howley

• title: Graphic Designer / Evangelist

• email: [email_address]

• twitter: @DamienH