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
Related
I am new to angular and wanted to change the angular material themes dyamically ,I know how to make differnt themes that is by making scss file ,define 3 colors, include mat properties and functions, but then I was adding that file refrence statically in angular.json, but if I have many custom angular material themes I want to refrence the css files dynamalically.
So is there any easy quick and rather optimized way to do that?
P.S I have gone through many post and docs but seems to be confusing in order when it comes to change the theme dyamically like for example if I have toggle then how to refrence the different style rather than the default one?
Any answer would be higly appreciated..!!
One solution is to build the material color palette in real time. These are the necessary steps:
Define the color palette in CSS variables and then access them.
Assign these variables to the material angular theme.
Using the "tinycolor" library we create a service to generate the
palette based on a color.
With JavaScript we update the CSS variables in the DOM.
Here you have an example:
https://stackblitz.com/edit/angular-material-theming-playground
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.
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'm implementing a solution in ASP.NET MVC that later can be applied to couple of other fields. To do so it will require to re-brand the UI even though the underlying business logic wont need to change. I'd like to write the code in such a way that will allow other developers to only develop code that will only changes the UI. This is similar to the way that themes can be written against Wordpress Blog software.
Can any one suggest how to organize my project to make such feature work?
http://pietschsoft.com/post/2009/03/ASPNET-MVC-Implement-Theme-Folders-using-a-Custom-ViewEngine.aspx
I would not use bult in Themes (not actually sure if these still exist in MVC) But you could multiple sets of CSS (with related images) in a Themes folder with a separate path per theme eg: Themes\Default, Themes\Classic, etc where the only configuration is the Path element. This would split the styling from the core code and you would'nt need to use any Theme "Engines" etc.
In your MasterPages/Pages/Views you could just set the path to the stylesheets dynamically.
Have you tried using MasterPages?