Theming WebGUI. Give your WebGUI site a new theme... WUC 2010 Ning Sun (ning) Pluton IT

Size: px

Start display at page:

Download "Theming WebGUI. Give your WebGUI site a new theme... WUC 2010 Ning Sun (ning) Pluton IT"

Gabriella Richard
6 years ago
Views:

1 Theming WebGUI Give your WebGUI site a new theme... WUC 2010 Ning Sun (ning) Pluton IT

2 Outline A step-by-step guide to WebGUI-lize a theme Convert htlm/css template to WebGUI theme Or how to give webgui your own style Apply Javascript in WebGUI theme Replace font family Implement YUI navigation Multi-color theming Offer multiple palette for one theme Multi-lingual site theming Explore WebGUI's flexibility in content mngmt 2

3 A step-by-step guide to WebGUI-lize a theme showcase: theme BusinessDesign 3

4 Steps Choose/design a theme Create theme folder and upload images Add and adjust css file Add and adjust htlm template Apply style template Add and apply navigation (opt: and template) Improve the details Tests and validations Make the theme a package Apply the theme to UI 4

5 To start with... choose a theme simple navigation external css htlm body: <div> yes! <table> no! read license 5

6 WebGUI-lize: theme folder Create a new folder for the theme: Root > Themes > ThemeName 6

7 WebGUI-lize: upload img Create folder for images Upload images using FilePile Images in the content can be left out 7

8 WebGUI-lize: add css file Add the css file as a Snippet (.css) Paste the content MIME type: text/css 8

9 WebGUI-lize: ^FileUrl(); Edit snippet: for all template images use macro ^FileUrl(); 9

10 WebGUI-lize: add html template Add the html file as a style template Namespace: style Template: paste the html content 10

11 WebGUI-lize html template: overview Edit style template: Add head.tags Link style css Add AdminBar Add homelink and delete static link Add navigation and delete static menu (later) Add body.content and delete static content Add Login Toggle, AdminToggle and user account link 11

12 WebGUI-lize html template: html head Add <tmpl_var head.tags> Link the.css file using macro ^/(); 12

13 WebGUI-lize html template: add admin bar Add macro ^AdminBar; 13

14 WebGUI-lize html template: dynamic company name/link Replace the static company name and home link with macro ^H(^c;); Replace the static company url with ^u(); 14

15 WebGUI-lize html template: dynamic content Replace the static content with <tmpl_var body.content> 15

16 WebGUI-lize html template: add utility toggles Add utility macros ^LoginToggle; ^GroupText; ^AdminToggle; 16

17 WebGUI-lize: apply style template Now! Apply style template to the page layouts Use Edit Branch 17

18 How does your site look now? overall:.css is applied dynamic company name and home link static navigation!! (next) images are displayed dynamic content login toggle, user account and admin toggle 18

19 WebGUI-lize: dynamic navigation Add navigation asset Select page tree 19

20 WebGUI-lize: add navigation to style template Delete static menu Add navigation asset using macro ^AssetProxy(); 20

21 WebGUI-lize: navigation template (opt) Add the navigation template 21

22 WebGUI-lize: navigation style css (opt) Align navigation template css file 22

23 WebGUI-lize: apply navigation template Apply navigation template to navigation asset 23

24 Back to site dynamic dynamic navigation!! navigation!! 24

25 Back to site: details to improve format company name and home link content spacing format headings align and format toggles 25

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

27 Improve the details (2): content spacing 27

28 Improve the details (3): format headings 28

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

30 WebGUI-lized!!! 30

31 Finalize the theme Remove unused css code Handle overflow Test the theme against general page layouts (demo): Page title/description Articles Form Fixed width vs. fluid assets 31

32 Cross-browser test and html & css validation Cross-browser test (width, alignment, float, spacing, overflow, color, font, etc.): Browser hack (IE) W3C validators: IE 5.5, 6, 7, 8 FireFox Safari etc. XHTML 1.0 strict CSS 2.1 Other validation: 32

33 Make the theme a package Edit the theme folder Tab: Metadata Make package? Yes Save and back to Asset Manager Export package: <url>.wgpkg Import package: reverse process 33

34 Apply theme to WebGUI UI Apply style template to the User Interface Note: not version controled! 34

35 Apply Javascript in WebGUI theme replace font family: theme Green_Planet implement YUI navigation: theme CrystalX 35

36 Case1: replace font family External js files Create folder for javascripts Add javascripts as snippets (.js) Paste the content MIME type: text/javascript 36

37 Add js in style template Link the.js files using <script> tag and macro ^/(); Add the js command right before </body> using <script> tag 37

38 Adjust js to fit the theme Example: add js command to one more class.logo 38

39 End result: before 39

40 End result: after 40

41 Case2: implement YUI navigation Add navigation asset, template and css snippet Nagivation asset: use the navigation template 41

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

43 Link js and css files In navigation template: Metadata/Extra <head> Link the YUI css files using macro ^Extras(); Link the YUI js files using <script> and macro ^Extras(); Link the new (customized) css files using marco ^/(); 43

44 End result 44

45 Multi-color theming showcase: theme Chameleon 45

46 Separate css for color and style One css file for the overall layout Multiple css files each for a color scheme 46

47 Link both overall and color css In the style template The overall css is fixed; while the color css offers seven choices (one color css at a time) WebGUI demo site starter... 47

48 Result: no color css 48

49 Result: color css 1 49

50 Result: color css 2 50

51 Result: color css 3 51

52 Multi-lingual site theming showcase: bilingual theme Vanero 52

53 Design: idea vs. implementation Idea: Implementation: one cover page with two language options, one default once a language is chosen, stick to it easy to switch to the other language two branches of content, each for one language one css and style template for cover page one css and style template for branch page one menu for navigating through the cover pages one menu for navigating through the branch pages both menus present on all pages, with the current page and the language option highlighted Realization? 53

54 Content: create two branches Under root: one page layout for each language (the default lang can be the Home page) These are the cover pages (top of branch) Keep the URL alphabetical 54

55 Content: under two branches Add content respectively with their language, translating one to the other These are the branch pages 55

56 Style: cover and branch page css for cover page css for branch page style template for cover page using css for cover page style template for branch page using css for branch page 56

57 Menu: cover and branch Navigation asset for cover and branch pages 57

58 Navigation template: iscurrent & isancestor One navigation template for both assets 58

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

60 Navigation in style template Both in cover and branch style template 60

61 Apply the theme Apply the branch page style template to the whole branch usging Edit Branch on the cover pages (top of branch) 61

62 Apply the theme Apply the cover page style template to the cover pages usging Edit In case there are other assets on the same level: Hide from navigation? Yes 62

63 End result: cover page (en) 63

64 End result: branch page (en) 64

65 End result: cover page (ch) 65

66 End result: branch page (ch) 66

67 Thank you... Question? 67

How to Build a Site Style. WebGUI LIVE!

How to Build a Site Style. WebGUI LIVE! How to Build a Site Style WebGUI LIVE! Where do we start? Create a design Turn it into HTML & graphics Introduce WebGUI Components Putting it all together A Closer Look Creating a Design The Big Question...