So, I'm new to Vaadin, but am interested in using the "Facebook" theme as shown in their demo from here: https://demo.vaadin.com/valo-theme/#!buttons-and-links (and then choose "Facebook" in the top right corner). But, when downloading the latest Vaadin 12 system, I can't figure out how to get the "Facebook" them. The documentation only seems to imply that "Light" and "Material" are available....How do I get the Facebook theme if that's what I've determine is the "best" for my app?
The test app you linked ( https://demo.vaadin.com/valo-theme/#!buttons-and-links ) demonstrates features of Valo theme in Vaadin 7 & 8. So this is not directly applicable for Vaadin 10+, e.g. Vaadin 12. In Vaadin 12 there is a new theme system called Lumo. And as you have noticed there are two base variants of it. That "facebook" variant for Vaadin 8 is implemented by just setting few internal SASS variables of Valo (see: https://github.com/vaadin/valo-demo/blob/master/src/main/webapp/VAADIN/themes/tests-valo-facebook/_variables.scss )
In Lumo theming system you can achieve something similar by using the CSS custom properties. You can find some information about used custom properties here: https://cdn.vaadin.com/vaadin-lumo-styles/1.3.3/demo/customization.html So by setting selected properties in similar fashion, you could most likely achieve something similar.
Related
I've just created a vaadin application, the simplest one you can create, and I was wondering, how do I find out if I have a theme in it and which one it is? The reason for that is that I'm deploying my application to Jenkins and it doesn't like something in my pom.xml file, which I commented out:
compile-theme</goal> -->
With this commented out it works but I need to now whether it is safe to do so. I know that if I don't have a theme it's OK to do it, but I'm trying to find out whether I do have a theme. My understanding is that a theme should be inluded to the pom.xml file under but I can't find any there:
<properties>
<vaadin.version>7.6.5</vaadin.version>
<vaadin.plugin.version>${vaadin.version}</vaadin.plugin.version>
<jetty.plugin.version>9.2.3.v20140905</jetty.plugin.version>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<maven.compiler.source>1.7</maven.compiler.source>
<maven.compiler.target>1.7</maven.compiler.target>
</properties>
Does it mean that I'm not using any theme?
thanks
Specifying the theme for a Vaadin application can be done with the #Theme annotation on your UI class:
#Theme("demo")
public class DemoUI extends UI {
...
The theme is not configured in your build configuration (pom.xml).
If you do not specify a theme to be used anywhere, Vaadin will transparently use a default theme (reindeer or valo). So every Vaadin app will use a theme even if it is not specifically configured.
If you want to check the theme which is currently used by your Vaadin application, you can do so using the debug mode. Open the debug window and activate the general info tab. There you can see the currently active theme, the used widget set, the current Vaadin version and more.
Regarding the compile-theme goal in your build configuration: It is safe to comment this goal out as long as you don't use a custom theme which needs compiling. If you use one of Vaadin's built-in themes, you don't need this goal to be active. Check the documentation about Vaadin themes for details.
I am new to Vaadin and created a web application based on the Vaadin Dashboard theme. However, in my application I am using a VerticalSplitPanel but it does not show the splitter! It is impossible to resize the splitpanel.
After doing some research on the web, I found out that the Dashboard theme is limited in terms of styles of components since the theme only implements styles of components shown in the Dashboard demo application.
My question now is, is it possible to modify the Dashboard theme to allow styles for the splitpanel and thus allowing me to view the splitter? If yes, can someone give me a hint how and where I can do this (keep in mind I'm very new to vaadin!)
The dashboard demo is really a nice startup to get some ideas for your app but i wouldn't suggest to use it as template to start your development on.
If what you are looking for is the "graphic look and feel" know that this feel is natively present in the Valo theme. For reference you can browse the Valo-Demo project on github ( https://github.com/vaadin/valo-demo ): for exemple the left menu css styles are in the css of Valo, they are only modified in the dashboard demo.
If what you are interest in is the functionality of the "dashboard" page (there you see the sparks, the charts, notes and so on) keep in mind that is made with a CssLayout, which is a powerful way to make custom layouts but of course you have to work out everything.
Probably a SplitPanel inside this layout gets something overwritten or not everything is implemented in the css.
In the end you can try PortalLayout add-on in Vaadin directory to achieve something similar or add the missing styles by yourself.
Cheers.
Hi I am new to Vaadin and I was looking about the theme.
In Vaadin, is it possible to to develop application without any theme?
I will apply theme only if any theming is required. So that it should look
normal html components.Currently I am using vaadin7 and I know how to customize
themes to the components which I dont need. I need to develop the applications without having any themes.
You can create a "empty" theme and use this one. (Means, one which does not inherit from any other theme)
https://vaadin.com/book/-/page/themes.html
But be aware that the themes also influence the way the vaadin buttons are drawn, scroll behaviour of panels, and many many other things.
To prevent breaking basic stuff, there exists a base theme which only holds the minimal css/sass rules for vaadin.
Look in section 8.4.4. Built-in Themes
of https://vaadin.com/book/-/page/themes.creating.html
Let me start off by saying I'm new to jQuery mobile. I've been asked to change to theme of a website and from looking at the jQuery mobile website here there is 5 default swatches that come with it. The only problem is that when I look at the theme file it only has 2 swatches, labeled A and B, but which look more like A and C. Can someone tell me where I can find the additional default swatches?
Thanks for your help.
The guys from jQuery mobile also created the classic theme for 1.4 although they don't actually support it.
You can find it here: http://demos.jquerymobile.com/1.4.0/theme-classic/theme-classic.css
And view the demo here: http://demos.jquerymobile.com/1.4.0/theme-classic/
jQuery Mobile 1.4 has two themes "a" and "b", unlike previous versions.
To upgrade custom themes previously created by ThemeRoller, at the page's top, click on import to upload old themes and then choose 1.4.0 from drop-down Upgrade to version list.
I am aware that you can create custom color swatches to be used with jQuery mobile. However I am not a designer and would like to find some additional ones to download. I have searched high and low on google, does anyone have a link to where I can download some that people have released? I don't mind paying for them if necessary.
UPDATED:
http://jquerymobile.com/blog/2011/10/28/announcing-themeroller-for-mobile-beta/
jQM Team plans to release a Theme Roller:
https://github.com/jquery/jquery-mobile/wiki/Mobile-ThemeRoller
But here are a couple of other ideas as well:
http://www.mobjectify.com/
http://jquerymobile.com/test/themes/valencia/ (via: How to create a jQuery Mobile theme)
http://www.jqmgallery.com/ (see what others have done)
Other than this you will need to create your own custom theme as of now