Skip to Content

Changes for page Development-CSS

Last modified by Pascal Robert on 2010/09/13 00:25
From version 3.1
edited by Quinton Dolan
on 2007/07/12 20:21
Change comment: There is no comment for this version
To version 7.1
edited by Pascal Robert
on 2010/09/13 00:25
Change comment: Migrated to Confluence 5.3

Summary

Details

Page properties
Title
... ... @@ -1,1 +1,1 @@
1 -Programming__WebObjects-Web Applications-Development-CSS
1 +Development-CSS
Parent
... ... @@ -1,0 +1,1 @@
1 +How-tos
Author
... ... @@ -1,1 +1,1 @@
1 -XWiki.qdolan
1 +XWiki.probert
Tags
... ... @@ -1,0 +1,1 @@
1 +wikitodo
Content
... ... @@ -1,14 +1,14 @@
1 -== Overview ==
1 +== Overview ==
2 2  
3 -CSS stands for Cascading Style Sheets. It's provides a mechanism to separate the presentation of your HTML page from the logical structure and content of your HTML page.
3 +CSS stands for Cascading Style Sheets. It's provides a mechanism to separate the presentation of your HTML page from the logical structure and content of your HTML page.
4 4  
5 -== Referencing a Style Sheet ==
5 +== Referencing a Style Sheet ==
6 6  
7 -=== Style Block ===
7 +=== Style Block ===
8 8  
9 9  The easiest way to include CSS in your WebObject application is put a style block in your <head> tag:
10 10  
11 -{{code value="xml"}}
11 +{{code 0="xml"}}
12 12  
13 13  <style type="text/css">
14 14   table {
... ... @@ -20,25 +20,25 @@
20 20  
21 21  {{/code}}
22 22  
23 -=== Static Reference ===
23 +=== Static Reference ===
24 24  
25 25  Another easy way to use CSS in your WebObjects application is to include a static reference to it with:
26 26  
27 -{{code value="xml"}}
27 +{{code 0="xml"}}
28 28  
29 29  <link rel = "stylesheet" type = "text/css" href = "/webserver/relative/path/to/mystyles.css">
30 30  
31 31  {{/code}}
32 32  
33 -However, if you're a WO developer, you know static resource references feel dirty. Don't worry, there are alternatives.
33 +However, if you're a WO developer, you know static resource references feel dirty. Don't worry, there are alternatives.
34 34  
35 -=== Project WOnder ===
35 +=== Project WOnder ===
36 36  
37 37  Project WOnder provides ERXStyleSheet, which is a stateless component with a template that can generate link tags for you.
38 38  
39 -=== Mike Schrag's MDTStyleSheet ===
39 +=== Mike Schrag's MDTStyleSheet ===
40 40  
41 -The following dynamic element can be used to include a stylesheet in your page. It supports the bindings "rel", "type", "href", "src", etc similar to a WOImage.
41 +The following dynamic element can be used to include a stylesheet in your page. It supports the bindings "rel", "type", "href", "src", etc similar to a WOImage.
42 42  
43 43  {{code}}
44 44  
... ... @@ -65,14 +65,14 @@
65 65  
66 66  {{/code}}
67 67  
68 -== Stylesheet Component ==
68 +== Stylesheet Component ==
69 69  
70 -Here is a trivial example on how to define style sheets properties at
71 -runtime:
70 +Here is a trivial example on how to define style sheets properties at
71 + runtime:
72 72  
73 73  Simply create a component with your style sheets properties:
74 74  
75 -{{code value="xml"}}
75 +{{code 0="xml"}}
76 76  
77 77  <style type = "text/css">
78 78   a { color: <webobject name = "LinkColor"></webobject>; text-decoration:none; }
... ... @@ -108,7 +108,7 @@
108 108   .TwoThirdWidth { width: 66%; text-align:left; vertical-align:top; }
109 109   .FixColumn { width: 250px; text-align:left; vertical-align:top; }
110 110  
111 - .AltMargin { width: 40px; text-align:left; vertical-align:top; background-image:url(<webobject name = "AltUrl"></webobject>);
111 + .AltMargin { width: 40px; text-align:left; vertical-align:top; background-image:url(<webobject name = "AltUrl"></webobject>);
112 112   background-position: center center; background-repeat: no-repeat; }
113 113  </style>
114 114  
... ... @@ -152,10 +152,8 @@
152 152  
153 153  {{/code}}
154 154  
155 -== Related Links ==
155 +== Related Links ==
156 156  
157 -* [[CSS Programming]]
158 -* [[CSS on Wikipedia>>http://en.wikipedia.org/wiki/Cascading_Style_Sheets]]
159 -* [[W3 Schools on CSS>>http://www.w3schools.com/css/default.asp]]
160 -
161 -Category:WebObjects
157 +* [[doc:WO.CSS Programming]]
158 +* [[CSS on Wikipedia>>url:http://en.wikipedia.org/wiki/Cascading_Style_Sheets||shape="rect"]]
159 +* [[W3 Schools on CSS>>url:http://www.w3schools.com/css/default.asp||shape="rect"]]
XWiki.XWikiComments[0]
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.probert
Comment
... ... @@ -1,0 +1,1 @@
1 +Does MDTStyleSheet is the same as ERXStyleSheet? And we should explain how to deal with « localized » CSS files (eg, where some images in the CSS is different per languages).
Date
... ... @@ -1,0 +1,1 @@
1 +2011-02-22 10:32:42.0