Theming WebGUITheming WebGUI

Give your WebGUI site a new theme...Give your WebGUI site a new theme...

WUC 2010WUC 2010Ning Sun (ning)Ning Sun (ning)

Pluton ITPluton IT

2

OutlineOutline A step-by-step guide to WebGUI-lize a themeA step-by-step guide to WebGUI-lize a theme

Convert htlm/css template to WebGUI themeConvert htlm/css template to WebGUI theme Or “how to give webgui your own style”Or “how to give webgui your own style”

Apply Javascript in WebGUI themeApply Javascript in WebGUI theme Replace font familyReplace font family Implement YUI navigationImplement YUI navigation

Multi-color themingMulti-color theming Offer multiple palette for one themeOffer multiple palette for one theme

Multi-lingual site themingMulti-lingual site theming Explore WebGUI's flexibility in content mngmtExplore WebGUI's flexibility in content mngmt

3

A step-by-step guide to WebGUI-lize a themeA step-by-step guide to WebGUI-lize a theme

showcase: theme BusinessDesignshowcase: theme BusinessDesign

4

StepsSteps Choose/design a themeChoose/design a theme Create theme folder and upload imagesCreate theme folder and upload images Add and adjust css fileAdd and adjust css file Add and adjust htlm templateAdd and adjust htlm template Apply style templateApply style template Add and apply navigation (opt: and template)Add and apply navigation (opt: and template) Improve the detailsImprove the details Tests and validationsTests and validations Make the theme a packageMake the theme a package Apply the theme to UIApply the theme to UI

5

To start with...To start with...simplenavigation

external css

choose a theme

htlm body:<div> yes!<table> no!

read license

6

WebGUI-lize: theme folderWebGUI-lize: theme folder

Create a new folder Create a new folder for the theme: for the theme: Root > Themes > Root > Themes > ThemeNameThemeName

7

WebGUI-lize: upload imgWebGUI-lize: upload img

Create folder for imagesCreate folder for images Upload images using FilePileUpload images using FilePile Images in the content can be left outImages in the content can be left out

8

WebGUI-lize: add css fileWebGUI-lize: add css file Add the css file as a Add the css file as a

Snippet (.css)Snippet (.css) Paste the contentPaste the content MIME type: text/cssMIME type: text/css

9

WebGUI-lize: ^FileUrl();WebGUI-lize: ^FileUrl(); Edit snippet: Edit snippet:

for all template images use macro ^FileUrl(); for all template images use macro ^FileUrl();

10

WebGUI-lize:WebGUI-lize:add html templateadd html template

Add the html file as a style templateAdd the html file as a style template Namespace: styleNamespace: style Template: paste the html contentTemplate: paste the html content

11

WebGUI-lize html template:WebGUI-lize html template:overviewoverview

Edit style template: Edit style template: Add head.tagsAdd head.tags Link style cssLink style css Add AdminBarAdd AdminBar Add homeLink and delete Add homeLink and delete

static linkstatic link Add navigation and delete Add navigation and delete

static menu (later)static menu (later) Add body.content and Add body.content and

delete static contentdelete static content Add Login Toggle, Add Login Toggle,

AdminToggle and user AdminToggle and user account linkaccount link

12

Add <tmpl_var head.tags>Add <tmpl_var head.tags> Link the .css file using macro Link the .css file using macro

^/(); ^/();

WebGUI-lize html template:WebGUI-lize html template:html headhtml head

13

Add macro ^AdminBar;Add macro ^AdminBar;

WebGUI-lize html template:WebGUI-lize html template:add admin baradd admin bar

14

Replace the static company Replace the static company name and home link with name and home link with macro ^H(^c;);macro ^H(^c;);

Replace the static company Replace the static company url with ^u();url with ^u();

WebGUI-lize html template:WebGUI-lize html template:dynamic company name/linkdynamic company name/link

15

Replace the static content with Replace the static content with <tmpl_var body.content><tmpl_var body.content>

WebGUI-lize html template:WebGUI-lize html template:dynamic contentdynamic content

16

Add utility macrosAdd utility macros ^LoginToggle;^LoginToggle; ^GroupText;^GroupText; ^a(^@;);^a(^@;); ^AdminToggle;^AdminToggle;

WebGUI-lize html template:WebGUI-lize html template:add utility togglesadd utility toggles

17

Now! Apply style Now! Apply style template to the page template to the page layoutslayouts

Use “Edit Branch”Use “Edit Branch”

WebGUI-lize:WebGUI-lize:apply style templateapply style template

18

How does your site look now?How does your site look now?

images are displayed

staticnavigation!!(next)dynamic company name

and home link

dynamiccontent

overall: .css is applied

login toggle,user accountand admin toggle

19

Add navigation assetAdd navigation asset Select page treeSelect page tree

WebGUI-lize:WebGUI-lize:dynamic navigationdynamic navigation

20

Delete static menuDelete static menu Add navigation asset using Add navigation asset using

macro ^AssetProxy();macro ^AssetProxy();

WebGUI-lize:WebGUI-lize:add navigation to style templateadd navigation to style template

21

Add the navigation templateAdd the navigation template

WebGUI-lize:WebGUI-lize:navigation template (opt)navigation template (opt)

22

Align Align navigation templatenavigation template css filecss file

WebGUI-lize:WebGUI-lize:navigation style css (opt)navigation style css (opt)

23

Apply navigation template to navigation assetApply navigation template to navigation asset

WebGUI-lize:WebGUI-lize:apply navigation templateapply navigation template

24

Back to siteBack to sitedynamicnavigation!!dynamicnavigation!!

25

Back to site: details to improveBack to site: details to improve

formatcompany nameand home link

content spacing

formatheadings

align and format toggles

26

Improve the details (1):Improve the details (1): company name and home link company name and home link

27

Improve the details (2):Improve the details (2): content spacing content spacing

28

Improve the details (3):Improve the details (3): format headings format headings

29

Improve the details (4):Improve the details (4): align and format toggles align and format toggles

30

WebGUI-lized!!!WebGUI-lized!!!

31

Finalize the themeFinalize the theme

Remove unused css codeRemove unused css code Handle overflowHandle overflow Test the theme against general Test the theme against general

page layouts (demo):page layouts (demo): Page title/descriptionPage title/description ArticlesArticles FormForm Fixed width vs. fluid assetsFixed width vs. fluid assets

32

Cross-browser test andCross-browser test andhtml & css validationhtml & css validation

Cross-browser test (width, alignment, float, Cross-browser test (width, alignment, float, spacing, overflow, color, font, etc.):spacing, overflow, color, font, etc.): IE 5.5, 6, 7, 8IE 5.5, 6, 7, 8 FireFoxFireFox SafariSafari etc.etc.

Browser hack (IE)Browser hack (IE) W3C validators:W3C validators:

XHTML 1.0 strictXHTML 1.0 strict CSS 2.1CSS 2.1

Other validation: www.webguidelines.nlOther validation: www.webguidelines.nl

33

Make the theme a packageMake the theme a package

Edit the theme folderEdit the theme folder

Tab: MetadataTab: Metadata Make package? YesMake package? Yes

Save and back to Asset ManagerSave and back to Asset Manager Export package: <url>.wgpkgExport package: <url>.wgpkg

Import package: reverse processImport package: reverse process

34

Apply style template to the User InterfaceApply style template to the User Interface Note: not version controled!Note: not version controled!

Apply theme to WebGUI UIApply theme to WebGUI UI

35

Apply Javascript in WebGUI themeApply Javascript in WebGUI theme

replace font family: theme Green_Planetreplace font family: theme Green_Planetimplement YUI navigation: theme CrystalXimplement YUI navigation: theme CrystalX

36

Case1: replace font familyCase1: replace font family

External js filesExternal js files Create folder for Create folder for

javascriptsjavascripts Add javascripts as Add javascripts as

snippets (.js)snippets (.js) Paste the contentPaste the content MIME type: MIME type:

text/javascripttext/javascript

37

Add js in style templateAdd js in style template

Link the .js files using <script> tag and macro ^/();Link the .js files using <script> tag and macro ^/();

Add the js command right before </body> using Add the js command right before </body> using <script> tag<script> tag

38

Adjust js to fit the themeAdjust js to fit the theme

Example: add js command to one more class .logoExample: add js command to one more class .logo

39

End result: beforeEnd result: before

40

End result: afterEnd result: after

41

Case2: implement YUI navigationCase2: implement YUI navigation

Add navigation asset, template and css snippetAdd navigation asset, template and css snippet

Nagivation asset: Nagivation asset: use the navigation templateuse the navigation template

42

Add js in navigation templateAdd js in navigation template Add js in the end of the template using <script> tagAdd js in the end of the template using <script> tag

43

Link js and css filesLink js and css files In navigation template: Metadata/Extra <head>In navigation template: Metadata/Extra <head>

Link the YUI css files using macro ^Extras();Link the YUI css files using macro ^Extras(); Link the YUI js files using <script> and macro ^Extras();Link the YUI js files using <script> and macro ^Extras(); Link the new (customized) css files using marco ^/();Link the new (customized) css files using marco ^/();

44

End resultEnd result

45

Multi-color themingMulti-color theming

showcase: theme Chameleonshowcase: theme Chameleon

46

Separate css for color and styleSeparate css for color and style

One css file for the overall layoutOne css file for the overall layout

Multiple css files each for a color schemeMultiple css files each for a color scheme

47

Link both overall and color cssLink both overall and color css

In the style templateIn the style template

The overall css is fixed; while the color css offers The overall css is fixed; while the color css offers seven choices (one color css at a time)seven choices (one color css at a time)

WebGUI demo site starter...WebGUI demo site starter...

48

Result: no color cssResult: no color css

49

Result: color css 1Result: color css 1

50

Result: color css 2Result: color css 2

51

Result: color css 3Result: color css 3

52

Multi-lingual site themingMulti-lingual site theming

showcase: bilingual theme Vaneroshowcase: bilingual theme Vanero

53

Design: idea vs. implementationDesign: idea vs. implementation Idea: Idea:

one cover page with two language options, one defaultone cover page with two language options, one default once a language is chosen, stick to itonce a language is chosen, stick to it easy to switch to the other languageeasy to switch to the other language

Implementation:Implementation: two branches of content, each for one languagetwo branches of content, each for one language one css and style template for cover pageone css and style template for cover page one css and style template for branch pageone css and style template for branch page one menu for navigating through the cover pagesone menu for navigating through the cover pages one menu for navigating through the branch pagesone menu for navigating through the branch pages both menus present on all pages, with the current page both menus present on all pages, with the current page

and the language option highlightedand the language option highlighted Realization?Realization?

54

Content: create two branchesContent: create two branches Under root: one page layout for each language Under root: one page layout for each language

(the default lang can be the Home page)(the default lang can be the Home page) These are the cover pages (top of branch)These are the cover pages (top of branch) Keep the URL alphabeticalKeep the URL alphabetical

55

Content: under two branchesContent: under two branches

Add content respectively with their language, Add content respectively with their language, translating one to the othertranslating one to the other

These are the branch pagesThese are the branch pages

56

Style: cover and branch pageStyle: cover and branch page css for cover pagecss for cover page css for branch pagecss for branch page style template for cover pagestyle template for cover page

using css for cover pageusing css for cover page style template for branch page style template for branch page

using css for branch pageusing css for branch page

57

Menu: cover and branchMenu: cover and branch Navigation asset for cover and branch pagesNavigation asset for cover and branch pages

58

Navigation template:Navigation template:isCurrent & isAncestorisCurrent & isAncestor

One navigation template for both assetsOne navigation template for both assets

59

Menu style css: (Un)SelectedMenu style css: (Un)Selected Both in cover and branch cssBoth in cover and branch css

60

Navigation in style templateNavigation in style template Both in cover and branch style templateBoth in cover and branch style template

61

Apply the theme Apply the theme Apply the branch page style template to the Apply the branch page style template to the

whole branch usging “Edit Branch” on the cover whole branch usging “Edit Branch” on the cover pages (top of branch)pages (top of branch)

62

Apply the theme Apply the theme Apply the cover page style template to the cover Apply the cover page style template to the cover

pages usging “Edit”pages usging “Edit”

In case there are other assets on the same level: In case there are other assets on the same level: Hide from navigation? Yes Hide from navigation? Yes

63

End result: cover page (en)End result: cover page (en)

64

End result: branch page (en)End result: branch page (en)

65

End result: cover page (ch)End result: cover page (ch)

66

End result: branch page (ch)End result: branch page (ch)

67

Thank you... Question?Thank you... Question?