Skinning MindTouch Deki

Wednesday, July 16, 2008 Damien Howley

Skinning MindTouch Deki

Presented By

Damien Howley


Overview

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

• Templates vs. Skins• CSS modifications

– File system architecture– CSS variables

• Questions


Introduction

• Damien Howley– title: Graphic Designer / Evangelist– email: [email protected]– twitter: @DamienH

– contribution: Created Fiesta Skin


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


What is skinning?

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

– HTML markup– CSS styles


Audience experience

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


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


Template vs Skins

Ace Fiesta


Templates vs Skins

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


CSS modifications

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


CSS modifications

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


CSS modifications

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


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


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


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


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


Recap

• What is skinning?• Resources

• Templates vs. Skins• CSS modifications

– File system architecture– CSS variables


Questions

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


Contact Me

• Damien Howley– title: Graphic Designer / Evangelist– email: [email protected]– twitter: @DamienH

Skinning MindTouch Deki

Technology

Transcript of Skinning MindTouch Deki