I am using the vaadin plugin for grails, and am trying to define some custom styles. Where within my grails appliction should I put the .css? My Vaadin application is in /vaadin/ I have tried creating a /vaadin/themes/mytheme/ folder and then putting my styles.css file in there, but still had no luck. Any help would be greatly appreciated. New to grails and new to vaadin, and am pulling my hair out over small stuff like this and can't get any of the actual legwork done until I can figure these things out..
Any way of doing inline styling would be fine with me too, at this point. I really just need some way to write explicit style..
Thanks
You need to put it into /web-app/VAADIN/themes/mytheme
You can have a look at the completed addressbook tutorial (with added Gorm and Spring Security Core support)
With the latest version of the plugin:
The name of the file must be styles.css (or styles.scss, which will then be compiled to styles.css by the command grails prod war)
The file must be located in /web-app/VAADIN/themes/mytheme , where the last part is the name of your style
In your UI file, use the #Theme annotation, for example
#Theme("mytheme")
#VaadinUI(path = '/')
class MyUI extends UI {
// ...
In VaadinConfig.groovy, specify the styles used by the application:
themes = ['mytheme']
Related
I am very new to Angular and currently I am trying to add styling to an existing project.
The project has been constructed using components. So for each page there are 4 files,
mypage.component.css
mypage.component.html
mypage.component.spec.ts
mypage.component.ts
I can easily style the page by adding the styles to the css file in the component and the page style works perfectly.
However the issue is there are many pages that require the same styles again and again.
I can copy and paste the same styles to each css file and it works.
But this is not the most elegant or efficient way to do this.
I want to know what the correct way to add a global.css file so that it can be accessed by each page. So that way the css is only written once.
I have googled but haven't found anything that explains how to do it in simple ways.
Thanks
Angular adds the style.css/scss file by default to your project once you created it using the ng new command, and include it within the angular.json config file to be available across the components of the project.
So you can add any global styles within src/styles.css(or scss) file, to be implemented everywhere.
you can add your generic css into style.css/style.scss.
i'm busy with a Nativescript app, i'm using the core dark theme but would like to add some font-awesome glyphicons and custom css. I import the core dark theme in my global app.css but don't seem to be able to do anything more in that file after importing the theme... I've tried to add page-specific css by adding a component-common.css to a specific page but when I add the styleUrls: [...] declaration to the component declaration I always get a runtime error... Is it possible at all to use custom css ontop of the core Nativescript theme? If so how would I go about it (using css files not inline in the xml)?
Yes, it is possible to use both a theme and custom CSS files.
For example, check this sample where in the same time theme has been applied to the top CSS file.
Better check (and/or post) your runtime error - it might show you the reason why the app is throwing. Perhaps due to non-existing paths for your styleeUrls !?
By default we can apply styling to vaadin spring boot applications by annotating UI class with#Theme(themename). In my particular situation i annotated with #Theme(ValoTheme.THEME_NAME) ,but it's not over. Unfortunately, i didn't figured out how to set background for layout without dealing with css and extra files(And it seems the only solution unavoidable).
How to use both themes valotheme and custom (just for setting up background image) at the same time?
Many thanks for suggestions
You can extend a Vaadin theme in your own custom theme. If you extend the Valo theme in your theme, then you get Valo theme plus your own customization and additions:
#import "../valo/valo.scss";
#mixin mytheme {
#include valo;
// your own scss here
}
After enumorous attempts to get it done, i was forced to switch over css styling files. With that being said - i had to combine ValoTheme and my own "style".
For Spring Boot Devs: Initially Spring Boot won't generate any presets for custom styles (vaadin plugin for Eclipse and Netbeans does it), so you have to create folders manually:
src/main/webapp/VAADIN/themes/<yourthemename>/ and place necessary css files there.
Quicktip:
Time-less consuming way:
Make new vaadin project from here: Link
Locate theme folder and copy-paste to your project
Also do not forget to annotate UI with #Theme("myTheme")
Hope this helps someone
I am building a cn1 app and was so far using the "Theme" in the GUI Builder to change the look of containers and buttons. I now want to add a specific border to a container and I find it easier to accomplish the border through css, I found the instructions on how to do it and the code here: https://www.codenameone.com/blog/rounded-corners-shadows-and-gradients-with-css.html . I added the .jar, made a css folder and add my theme.css file with the code. In my form's beforeshow method I change the uiid of a container to the uiid defined in my theme.css. However when I run the app the container takes on the default Container uiid, not the one defined in my .css. I feel like this is because I already have a theme defined in my gui builder with my uiids and now I am trying to change a container's uiid to a uiid defined in another theme. Is there something I'm doing wrong here?
If I understand correctly you have two themes and you want to use elements from both in the app. There are two valid scenarios, one where both of the themes are in the same res file and another where both of the themes are in a separate file.
If they are in the same res file do this:
theme = UIManager.initNamedTheme("/theme", "firstTheme");
UIManager.getInstance().addThemeProps(theme.getTheme("secondTheme"));
If they are in a separate files do this:
theme = UIManager.initNamedTheme("/theme", "firstTheme");
Resources otherTheme = Resources.openLayered(("/otherTheme");
UIManager.getInstance().addThemeProps(otherTheme.getTheme("secondTheme"));
This is discussed in the Codename One Developer Guide under Theme Layering.
I'm creating a Flex 4 application which contains different modules in it. The main application contains a style sheet and the modules inherit the styles defined in this file.
Its working fine when the swf's are generated using Flash Builder. But when I'm generating it using Ant script, the modules does not inherit the styles and everything looks weird.
I added
isolate-styles="false"
as an additional parameter to mxmlc, but still its not working :(
Can someone please provide your suggestions?
I have never had to do anything special in regards to modules, flex and ANT but maybe I have been lucky. Or there is something else going on in your ant script. You can try being explicit and adding your css files via the compiler argument - [defaults-css-files filename , ... but that would be a brute force method forcing the styles to be recompiled into your module. Another option to help with debugging is to call getMergedStyleDeclaration() from your module so that you can compare the difference between Flash Builder and when ant builds the file. I am sure you have already read this document, but just in case, here is Adobe's information on modular applications.
If none of this helps please post some more detailed information around your current scripts and I can help from there.
Turned out to be a simple solution. All styles except fonts were inherited to the modules.
mx|Module{
font-family : "Myriad Web";
}
Needs to be added when built using ant. Flash builder generated swf's were working fine with out this additional style definition.
I had provided only
s|Application {
font-family: "Myriad Web";
font-size: 12;
font-anti-alias-type:advanced;
}
in the main style sheet.