Wednesday, July 16, 2008 Damien Howley

Skinning MindTouch Deki

Presented By

Damien Howley

Wednesday, July 16, 2008 Damien Howley

Overview

• Introduction• Resources• What is skinning?• Audience experience

• Templates vs. Skins• CSS modifications

– File system architecture– CSS variables

• Questions

Wednesday, July 16, 2008 Damien Howley

Introduction

• Damien Howley– title: Graphic Designer / Evangelist– email: DamienH@mindtouch.com– twitter: @DamienH

– contribution: Created Fiesta Skin

Wednesday, July 16, 2008 Damien Howley

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

Wednesday, July 16, 2008 Damien Howley

What is skinning?

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

– HTML markup– CSS styles

Wednesday, July 16, 2008 Damien Howley

Audience experience

• Who has tried to skin MindTouch Deki?– why/why not?– successes / frustrations?– why do you want to skin MindTouch Deki?

Wednesday, July 16, 2008 Damien Howley

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

Wednesday, July 16, 2008 Damien Howley

Template vs Skins

Ace Fiesta

Wednesday, July 16, 2008 Damien Howley

Templates vs Skins

• Other Templates– Deki CMS– Deuce (Kilen Woods)

Wednesday, July 16, 2008 Damien Howley

CSS modifications

• How do I change the CSS?– Control Panel– File system

Wednesday, July 16, 2008 Damien Howley

CSS modifications

• Using the control panel to modify the CSS– Deki Control Panel Visual Appearance

Wednesday, July 16, 2008 Damien Howley

CSS modifications

• Using the file system to modify the CSS– File System 192.168.xxx.xxx\drive\var\www\deki-xxx\skins

Wednesday, July 16, 2008 Damien Howley

CSS modifications

• Using the file system to modify the CSS– File System 192.168.xxx.xxx\drive\var\www\deki-xxx\skins\

fiesta

1. _common.css

2. _style.css

3. Fiesta.php

Wednesday, July 16, 2008 Damien Howley

CSS modifications

• Using the file system to modify the CSS– File System 192.168.xxx.xxx\drive\var\www\deki-xxx\skins\fiesta\

grazing-green

1. _content.css

2. css.php

3. style.css

Wednesday, July 16, 2008 Damien Howley

CSS modifications

• CSS variables (PHP in CSS)– File System 192.168.xxx.xxx\drive\var\www\deki-xxx\skins\fiesta\grazing-green\

style.css– Proposed Spec for CSS 3

Wednesday, July 16, 2008 Damien Howley

CSS hierarchy

• Template– Template Styles (_common.css)

– Skin• Consolidated style css (_style.css)

• Unique style css (/style.css)– Control panel override template styles

• Unique content css (/content.css)– Control panel override content styles

Wednesday, July 16, 2008 Damien Howley

Recap

• What is skinning?• Resources

• Templates vs. Skins• CSS modifications

– File system architecture– CSS variables

Wednesday, July 16, 2008 Damien Howley

Questions

• Does anyone have any questions?– things that are unclear?– barriers to skinning?

Wednesday, July 16, 2008 Damien Howley

Contact Me

• Damien Howley– title: Graphic Designer / Evangelist– email: DamienH@mindtouch.com– twitter: @DamienH