diff options
Diffstat (limited to 'documentation/themes')
| -rw-r--r-- | documentation/themes/themes-creating.asciidoc | 24 | ||||
| -rw-r--r-- | documentation/themes/themes-css.asciidoc | 53 |
2 files changed, 29 insertions, 48 deletions
diff --git a/documentation/themes/themes-creating.asciidoc b/documentation/themes/themes-creating.asciidoc index dcd2c5034a..e856c2b41e 100644 --- a/documentation/themes/themes-creating.asciidoc +++ b/documentation/themes/themes-creating.asciidoc @@ -10,8 +10,7 @@ layout: page Custom themes are placed in the [filename]#VAADIN/themes# folder of the web application, in an Eclipse project under the [filename]#WebContent# folder or [filename]#src/main/webapp# in Maven projects, as was illustrated in -<<dummy/../../../framework/themes/themes-overview#figure.themes.theme-contents,"Contents -of a Theme">>. This location is fixed. You need to have a theme folder for each +<<themes-overview#figure.themes.theme-contents,"Contents of a Theme">>. This location is fixed. You need to have a theme folder for each theme you use in your application, although applications rarely need more than a single theme. @@ -21,8 +20,7 @@ single theme. You can use Sass themes in Vaadin in two ways, either by compiling them to CSS by yourself or by letting the Vaadin servlet compile them for you on-the-fly when the theme CSS is requested by the browser, as described in -<<dummy/../../../framework/themes/themes-compiling#themes.compiling,"Compiling -Sass Themes">>. +<<themes-compiling#themes.compiling,"Compiling Sass Themes">>. To define a Sass theme with the name mytheme, you must place a file with name [filename]#styles.scss# in the theme folder [filename]#VAADIN/themes/mytheme#. @@ -152,13 +150,11 @@ returns only the custom stylenames, not the built-in stylenames for the component. Please see the section on each component for a description of its styles. Most -of the stylenames are determined in the client-side widget of each component. +of the style names are determined in the client-side widget of each component. The easiest way to find out the styles of the elements is to use a HTML -inspector such as -FireBug.//// -TODO reference to a Firebug section when -available -//// +inspector such as FireBug. + +//TODO add reference to a Firebug section when available Some client-side components or component styles can be shared by different server-side components. For example, [literal]#++v-textfield++# style is used @@ -194,10 +190,10 @@ style names for specific components. public class MyUI extends UI { @Override protected void init(VaadinRequest request) { - ... + ... Panel panel = new Panel("Regular Panel in the Runo Theme"); panel.addComponent(new Button("Regular Runo Button")); - + // A button with the "small" style Button smallButton = new Button("Small Runo Button"); smallButton.addStyleName(Runo.BUTTON_SMALL); @@ -277,7 +273,3 @@ add-ons contain a theme for the components they provide. The add-on themes need to be included in the project theme. Vaadin Plugin for Eclipse and Maven automatically include them in the [filename]#addons.scss# file in the project theme folder. It should be included by the project theme. - - - - diff --git a/documentation/themes/themes-css.asciidoc b/documentation/themes/themes-css.asciidoc index 45229303dc..d7ba87c700 100644 --- a/documentation/themes/themes-css.asciidoc +++ b/documentation/themes/themes-css.asciidoc @@ -9,7 +9,6 @@ layout: page ((("CSS", "introduction", id="term.themes.css", range="startofrange"))) - Cascading Style Sheets or CSS is the basic technique to separate the appearance of a web page from the content represented in HTML. In this section, we give an introduction to CSS and look how they are relevant to software development with @@ -58,8 +57,8 @@ even though they use somewhat different elements to draw the user interface. The HTML elements that will be styled later by matching CSS rules are emphasized above. -The [literal]#++<link>++# element in the HTML header defines the used CSS -stylesheet. The definition is automatically generated by Vaadin in the HTML page +The [elementname]#link# element in the HTML header defines the CSS stylesheet. +The definition is automatically generated by Vaadin in the HTML page that loads the UI of the application. A stylesheet can also be embedded in the HTML document itself, as is done when optimizing their loading in Vaadin TouchKit, for example. @@ -77,25 +76,23 @@ value, separated with a colon. A property statement ends with a semicolon. Let us look at an example that matches certain elements in the simple HTML document given in the previous section: - [source, css] ---- -p, td { +p, td { color: blue; } -td { +td { background: yellow; font-weight: bold; } ---- The [literal]#++p++# and [literal]#++td++# are element type selectors that match -with [literal]#++<p>++# and [literal]#++<td>++# elements in HTML, respectively. +with [elementname]#p# and [elementname]#td# elements in HTML, respectively. The first rule matches with both elements, while the second matches only with -[literal]#++<td>++# elements. Let us assume that you have saved the above style -sheet with the name [filename]#mystylesheet.css# and consider the following HTML -file located in the same folder. +[elementname]#td# elements. +Let us assume that you have saved the above style sheet with the name [filename]#mystylesheet.css# and consider the following HTML file located in the same folder. [[figure.themes.basic.1]] .Simple Styling by Element Type @@ -108,7 +105,6 @@ CSS has __inheritance__ where contained elements inherit the properties of their parent elements. For example, let us change the above example and define it instead as follows: - [source, css] ---- table { @@ -117,27 +113,25 @@ table { } ---- -All elements contained in the [literal]#++<table>++# element would have the same -properties. For example, the text in the contained [literal]#++<td>++# elements -would be in blue color. +All elements contained in the [elementname]#table# element would have the same properties. +For example, the text in the contained [elementname]#td# elements would be in blue color. [[themes.css.basics.element-types]] === HTML Element Types HTML has a number of element types, each of which accepts a specific set of -properties. The [literal]#++<div>++# elements are generic elements that can be +properties. The [elementname]#div# elements are generic elements that can be used to create almost any layout and formatting that can be created with a -specific HTML element type. Vaadin uses [literal]#++<div>++# elements +specific HTML element type. Vaadin uses [elementname]#div# elements extensively to draw the UI, especially in layout components. -((("Google Web Toolkit", -"themeing"))) +((("Google Web Toolkit", "themeing"))) Matching elements by their type as shown above is, however, rarely if ever used in style sheets for Vaadin applications. We used it above, because it is the normal way in regular HTML documents that use the various HTML elements for formatting text, but it is not applicable in Vaadin UIs that consist mostly of -[literal]#++<div>++# elements. Instead, you need to match by element class, as +[elementname]#div# elements. Instead, you need to match by element class, as described next. @@ -169,6 +163,7 @@ follows: </body> </html> ---- + The class attributes of HTML elements can be matched in CSS rules with a selector notation where the class name is written after a period following the element name. This gives us full control of matching elements by their type and @@ -217,11 +212,9 @@ image::img/themes-css-match-class-3.png[] To ensure future compatibility, we recommend that you use only matching based on the classes and __do not__ match for specific HTML element types in CSS rules, because Vaadin may change the exact HTML implementation how components are drawn -in the future. For example, Vaadin earlier used [literal]#++<div>++# element to -draw [classname]#Button# components, but later it was changed to use the -special-purpose [literal]#++<button>++# element in HTML. Because of using the -[literal]#++v-button++# style class in the CSS rules for the button, styling it -has changed only very little. +in the future. +For example, Vaadin earlier used [elementname]#div# element to draw [classname]#Button# components, but later it was changed to use the special-purpose [elementname]#button# element in HTML. +Because of using the [literal]#++v-button++# style class in the CSS rules for the button, styling it has changed only very little. [[themes.css.matching-by-descendants]] @@ -243,10 +236,8 @@ consider the following HTML fragment: </table> </body> ---- -Matching by the class name [literal]#++.mytext++# alone would match both the -[literal]#++<p>++# and [literal]#++<td>++# elements. If we want to match only -the table cell, we could use the following selector: - +Matching by the class name [literal]#++.mytext++# alone would match both the [elementname]#p# and [elementname]#td# elements. +If we want to match only the table cell, we could use the following selector: [source, css] ---- @@ -375,7 +366,7 @@ public class HelloWorld extends UI { // Label has v-label style content.addComponent(new Label("Hello World!")); - + // Button has v-button style content.addComponent(new Button("Push Me!", new Button.ClickListener() { @@ -444,7 +435,7 @@ elements. The theme is actually a Sass theme. .v-ui { background: white; } - + /* All labels have white text on black background */ .v-label { background: black; @@ -502,5 +493,3 @@ Compatibility issues are detailed in various CSS handbooks. (((range="endofrange", startref="term.themes.css"))) - - |