diff options
Diffstat (limited to 'documentation/themes/themes-creating.asciidoc')
| -rw-r--r-- | documentation/themes/themes-creating.asciidoc | 51 |
1 files changed, 20 insertions, 31 deletions
diff --git a/documentation/themes/themes-creating.asciidoc b/documentation/themes/themes-creating.asciidoc index 4040bcf5ca..98fba272da 100644 --- a/documentation/themes/themes-creating.asciidoc +++ b/documentation/themes/themes-creating.asciidoc @@ -7,8 +7,6 @@ layout: page [[themes.creating]] = Creating and Using Themes -*_This section has not yet been updated for Vaadin Framework 8._* - 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 @@ -31,7 +29,7 @@ on-the-fly when the theme is requested by a browser. We recommend that you organize the theme in at least two SCSS files so that you import the actual theme from a Sass file that is named more uniquely than the -[filename]#styles.scss#, to make it distinquishable in the editor. This +[filename]#styles.scss#, to make it distinguishable in the editor. This organization is how the Vaadin Plugin for Eclipse creates a new theme. If you use Vaadin add-ons that contain themes, Vaadin Plugin for Eclipse and @@ -123,17 +121,16 @@ generated by the Vaadin Plugin for Eclipse or Maven. == Plain Old CSS Themes In addition to Sass themes, you can create plain old CSS themes. CSS theme are -more restricted than Sass styles - you can't parameterize CSS themes in any way, -unlike you can Valo, for example. Further, an application can only have one CSS -theme while you can have multiple Sass themes. +more restricted than Sass styles - you can't parameterize CSS themes in any way. +Further, an application can only have one CSS theme while you can have multiple Sass themes. A CSS theme is defined in a [filename]#styles.css# file in the [filename]#VAADIN/themes/mytheme# folder. You need to import the -[filename]#legacy-styles.css# of the built-in theme as follows: +[filename]#styles.css# of Valo theme as follows: ---- -@import "../reindeer/legacy-styles.css"; +@import "../valo/styles.css"; .v-app { background: yellow; @@ -156,8 +153,6 @@ 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 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 for all text input boxes in components, in addition to [classname]#TextField#. @@ -166,17 +161,19 @@ for all text input boxes in components, in addition to [classname]#TextField#. [[themes.creating.builtin]] == Built-in Themes -Vaadin currently includes the following built-in themes: +Since version 8.0, Vaadin Framework includes only one built-in theme: * [literal]#++valo++#, the primary theme since Vaadin 7.3 + +The following legacy themes can be found in the [filename]#vaadin-compability-themes.jar# package +for easier migrating from framework version 7 to 8: + * [literal]#++reindeer++#, the primary theme in Vaadin 6 and 7 * [literal]#++chameleon++#, an easily customizable theme * [literal]#++runo++#, the default theme in IT Mill Toolkit 5 +* [literal]#++base++#, which was never to be used directly, but is the base for other legacy themes -In addition, there is the [literal]#++base++# theme, which should not be used -directly, but is extended by the other built-in themes, except valo. - -The built-in themes are provided in the respective +The themes are provided in the respective [filename]#VAADIN/themes/<theme>/styles.scss# stylesheets in the [filename]#vaadin-themes# JAR. Also the precompiled CSS files are included, in case you want to use the themes directly. @@ -187,34 +184,26 @@ style names for specific components. ---- -@Theme("runo") 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")); + Panel panel = new Panel("Regular Panel in the Valo Theme"); + panel.addComponent(new Button("Regular Valo Button")); // A button with the "small" style - Button smallButton = new Button("Small Runo Button"); - smallButton.addStyleName(Runo.BUTTON_SMALL); + Button smallButton = new Button("Small Valo Button"); + smallButton.addStyleName(ValoTheme.BUTTON_SMALL); - Panel lightPanel = new Panel("Light Panel"); - lightPanel.addStyleName(Runo.PANEL_LIGHT); + Panel lightPanel = new Panel("Borderless Panel"); + lightPanel.addStyleName(ValoTheme.PANEL_BORDERLESS); lightPanel.addComponent( new Label("With addStyleName(\"light\")")); ... ---- -The example with the Runo theme is shown in -<<figure.themes.creating.builtin.runo>>. - -[[figure.themes.creating.builtin.runo]] -.Runo Theme -image::img/builtin-runo.png[] - -The built-in themes come with a custom icon font, FontAwesome, which is used for -icons in the theme, and which you can use as font icons, as described in +The Valo theme comes with a custom icon font, VaadinIcons, +which you can use as font icons, as described in <<dummy/../../../framework/themes/themes-fonticon#themes.fonticon,"Font Icons">>. |