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.
Related
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
I am new to Vaadin. I wanted to create s simple page which should not have
any theme. When I run the simple application, it default takes reeinder theme.
So is it possible to create a simple theme without having any themes?
So it looks white background, normal html button, normal html labels,etc.
If needed, I shall use my own themes which could be created out of CSS file.
Yes,
it is possible to use a empty theme.
You must just create a empty css or sass file and then specify to use that theme.
You can then add the styles you need to the file.
You will then of course have to use the standard html buttons and so on.
The vaadin default buttons (and most components) depend on a proper theme.
This link might help you see what you will have to do when you wish to start with a completely new theme: https://vaadin.com/de/wiki/-/wiki/Main/Vaadin+Theme+Tips+and+Tricks#section-Vaadin+Theme+Tips+and+Tricks-CreatingACompletelyNewLookNFeel
Perhaps starting with the base theme would be the middle way to go.
VAADIN/themes/base/styles.css
I have a question. When i am creating an application in rhomobile jquery.mobile.structure-1.0.css present inside /public/jqmobile. My question
1) What is the use of jquery.mobile.structure-1.0.css
2) jquery.mobile.structure-1.0.css was not included anywhere (in layout.erb) the application. Then why jquery.mobile.structure-1.0.css is present. I try to find the use of jquery.mobile.structure-1.0.css but not getting good result. Any one can explain?
The structure CSS is used to make a completely custom theme, where you do not want to rely on any of the default themes that come with jQuery Mobile. It's a very basic bare bones stylesheet. You can use it in place of the main jQuery Mobile stylesheet, then you create your own stylesheet to override and customize.
Personally I seperate the structure css out so I can make changes to my themes without causing any major issues to the new theme.css architecture. Makes it a bit easier to make upgrades as new versions come out. Though it is a little tricky to verify that there are no new additions to the themes. I wouldn't use overrides on the base themes a,b,c,d, - I find it's better to build your own themes using those as bases, e,f,g, etc...
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
I am new to Symfony and I need to work to a large project with many themes to modify them. How can I find where actually is the theme file in which module, just looking at the HTML browser output? Or do I need to look somewhere else, routing for example?
What you want to do is use the Web Debug Toolbar.
Once you have that running on the page, using appname_dev.php, simple click the view link and it will show you which templates have been used. If you need to know which layout to use then use logs link, click none the sfPHPView.