1 <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
|
2 <html lang="en" xml:lang="en"> |
|
3 <head> |
|
4 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> |
|
5 <meta name="copyright" content="(C) Copyright 2005" /> |
|
6 <meta name="DC.rights.owner" content="(C) Copyright 2005" /> |
|
7 <meta content="concept" name="DC.Type" /> |
|
8 <meta name="DC.Title" content="Customizing the WRTKit look" /> |
|
9 <meta scheme="URI" name="DC.Relation" content="WRTKit_Common_WRTKit_tasks-GUID-24870895-4449-4307-9a54-7c90f7b3905e.html" /> |
|
10 <meta content="XHTML" name="DC.Format" /> |
|
11 <meta content="GUID-43369C51-23CF-41AC-A2F4-6320DC6EDA9A" name="DC.Identifier" /> |
|
12 <meta content="en" name="DC.Language" /> |
|
13 <link href="commonltr.css" type="text/css" rel="stylesheet" /> |
|
14 <title> |
|
15 Customizing the WRTKit look</title> |
|
16 </head> |
|
17 <body id="GUID-43369C51-23CF-41AC-A2F4-6320DC6EDA9A"><a name="GUID-43369C51-23CF-41AC-A2F4-6320DC6EDA9A"><!-- --></a> |
|
18 |
|
19 |
|
20 |
|
21 <h1 class="topictitle1"> |
|
22 Customizing the WRTKit look</h1> |
|
23 |
|
24 <div> |
|
25 |
|
26 <p> |
|
27 |
|
28 All visuals in the WRTKit are defined using CSS and images that are |
|
29 located inside the WRTKit library in the Resources directory. The |
|
30 code that implements the WRTKit user interface elements does not |
|
31 actually know or care what the user interface looks like. Instead |
|
32 the code creates an HTML element hierarchy to implement each control |
|
33 and view and then sets CSS style class names to these elements. |
|
34 Whenever the state changes (e.g. the control gets focused) the class |
|
35 names are updated to reflect the new state. The CSS in the Resources |
|
36 directory defines the style rules for the class names and visuals |
|
37 are applied to the controls and views like for any other CSS styled |
|
38 HTML elements. This results in a system where only CSS and images |
|
39 need to be modified in order to implement a new look for a custom |
|
40 WRTKit user interface - but no JavaScript code. |
|
41 </p> |
|
42 |
|
43 <p> |
|
44 |
|
45 All CSS rules for the WRTKit are defined in a file called UI.css in |
|
46 the WRTKit library Resources directory. This file defines hundreds |
|
47 of style classes and can seem intimidating and complex, but the |
|
48 principle behind the classes is actually very simple. Each HTML |
|
49 element in each control has a common class and a set of state- |
|
50 specific classes. E.g. the text element in the NavigationButton |
|
51 control has "NavigationButtonText", "NavigationButtonTextNormal", |
|
52 "NavigationButtonTextFocus", etc. The classes are applied based on |
|
53 the current state of that element. So in our example if the button |
|
54 was focused, the text element would be assigned the CSS classes |
|
55 "NavigationButtonText" and "NavigationButtonTextFocus". Two classes |
|
56 define all of the styling for the text element portion of the |
|
57 NavigationButton control in the focused state. |
|
58 </p> |
|
59 |
|
60 <p> |
|
61 |
|
62 Using two classes at the same time is convenient because it allows |
|
63 common elements to be defined in the common class and only special |
|
64 adaptations of that common rule in the state-specific class. One |
|
65 pattern that is repeated throughout the WRTKit is to define a |
|
66 background image in the common class and an image position offset in |
|
67 the state-specific class. This makes switching from one state to |
|
68 another (e.g. when a checkbox is checked) very straight forward. |
|
69 Even if the graphics appear to change, no images need to be loaded |
|
70 or switched but instead just the image offset changes and the result |
|
71 is that the graphics have changed. |
|
72 </p> |
|
73 |
|
74 <p> |
|
75 |
|
76 Controls and views use HTML element hierarchies that are fine |
|
77 grained enough that various kinds of layout customizations can be |
|
78 applied without having CSS styles affect parts of a control that |
|
79 they were not intended to affect. The result is more CSS rules and |
|
80 more expansive element hierarchies, but also more freedom and |
|
81 flexibility. |
|
82 </p> |
|
83 |
|
84 <p> |
|
85 |
|
86 In most cases all that is needed to change the visuals of a WRTKit |
|
87 user interface is to modify the images in the Resource directory and |
|
88 update the color definitions for controls in the CSS file. The image |
|
89 files that supply graphics to views and controls in the Resource |
|
90 directory are named with clear names to make customization easy. |
|
91 Just make a backup copy of the default graphics and CSS styles and |
|
92 experiment! You will probably be surprised at how easy it is to make |
|
93 a custom user interface theme! |
|
94 </p> |
|
95 |
|
96 </div> |
|
97 |
|
98 <div> |
|
99 <div class="familylinks"> |
|
100 <div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_Common_WRTKit_tasks-GUID-24870895-4449-4307-9a54-7c90f7b3905e.html">Common WRTKit tasks</a></div> |
|
101 </div> |
|
102 </div> |
|
103 |
|
104 </body> |
|
105 </html> |
|