In my web project I use Vaadin 7.3.6.
My custom css file is here:
myproject\src\main\resources\VAADIN\themes\non.print.component.css
In non.print.component.css
#media print {
.noPrint {
display:none;
}
}
In my code I use this:
import com.vaadin.ui.Button;
Button myButton = new Button("My custom button");
myButton.setStyleName("noPrint");
But it's not work.
When I print current page, the myButton also print.
Your css file will not be used by the Vaadin UI until you do not declare it or include it in your custom theme.
The best way is to create your custom theme, then you'll have to :
Add theme annotation to your UI class -> #Theme("mytheme")
Create a folder 'myproject\src\main\resources\VAADIN\themes\mytheme'
Put your css / scss stuff there
Please check basics of theming vaadin7 at : https://vaadin.com/docs/v7/framework/themes/themes-css.html
You do not want to create a theme, two solutions :
Put the CSS file in the src/main/webapp/VAADIN/* directory and use #StyleSheet("vaadin://style.css").
Put the css file in the src/main/resources/com/example/demo/ directory and use #StyleSheet("style.css").
(credits to Alejandro Duarte in offical Vaadin Forum)
Regards
Sebastien
Related
From this link for theming:
To write CSS rules associated with an application view, you create an .scss file
in the same folder and with the same base name as the view. For
example, to style the view App.view.main.Main, you may can add Main.scss to that folder:
Following this, I have a 2 files in the same folder: Form.js and Form.scss
In Form.scss, if I define a custom class and include that in Form.js, it works and I see the style applies. This works:
.toolbar-red {
background:green;
}
But if I do anything to reference an internal class for Extjs, it will not work. For example, this doesn't work:
.bold-grid .x-column-header-text-inner {
font-weight: bold;
}
I know that this above style works, because when I add this style in my /theme/sass/src/Application.scss, it works as I want. FYI, I am using Sencha Architect, and adding my custom styles to the theme sass file works. But I want them to be in their separate file, and hence I am trying to add them to Form.scss. But as explained above, if I use an internal class, it won't pick it up.
Is it possible that you have a different prefix for your own theme?
Maybe try this:
.bold-grid .#{$prefix}column-header-text-inner {
font-weight: bold;
}
Do you have access to Sencha Themer? If so its really easy to do. Open up your theme in themer and create a custom UI for the toolbar. You can do this for any component, BTW. Whatever you name the custom UI is what you would use later in SA.
After it is saved and applied to your SA theme, go back into SA and recompile theme. This is done by clicking button at very bottom of project inspector pane. Once it is complete go to toolbar in project inspector and set ui config option to what you named custom ui.
we have created a simple Webcontent template with Liferay 6.2 EE.
The template was built with freemarker.
Now we want to use our own homemade css file to apply our style to the webcontent template.
But liferay's aui.css seems to override some of our css styles.
What's the best way to integrate our css file within freemarkers webcontent template ?
Is it possible to override aui.css ?
Thanks
Wrap your styles within aui class:
.aui {
//your styles goes here
}
I want to do some minor styling in to my app and so I tried to create a custom theme. I'm using IntelliJ Idea as an IDE for this project.
I've set my theme in folder: web/VAADIN/themes/mytheme/styles.css
I've also copied valo theme from jar to themes folder ( not sure if needed )
I've following css-code in mytheme/styles.css file:
#import "../valo/styles.css";
.blackColor {
background: black;
}
In my UI, I've tried to use setTheme("mytheme"); in init method and annotation before the class.
The result is, I can apply the .blackColor just fine to components but it completely forgets the valo theme. It's like my custom theme is the only css file that is in use. What should I do?
If this is your first take on vaadin themes, you should take a look at the book section on themes and the valo - getting started wiki page. You will see that it is not necessary to copy the theme from the jars, you just need to inherit / extend it.
Suppose you're going by the example in the book, you'll have a mytheme.scss with your styles:
#import "../valo/valo.scss";
#mixin mytheme {
#include valo;
.blackColor {
background: black;
}
}
And the styles.scss
#import "mytheme.scss";
.mytheme {
#include mytheme;
}
After this, simply annotate your UI with the theme's name:
#Theme("mytheme")
public class MyUI extends UI {
...
}
As per the book, please be aware that
If no styles.css exists in the folder, the Sass file is compiled
on-the-fly when the theme is requested by a browser.
Note: you can find some nice examples of customizing the valo variables here.
I need to theme my lightbox. I can see the HTML generated by the JavaScript code in lightbox.js, but I cannot overwrite that file, or I will lose my changes when I update the module. Is there any better way to override a theme output?
You didn't report for which Drupal version you are interested; the answer I am giving is valid for Drupal 6, but few things would change for Drupal 7.
Lightbox2 uses a template file for its output. If you create a custom module that implements hook_theme_registry_alter() to use a different template file, then you can use a template file that uses a JavaScript file you wrote.
can you not theme it just by changing the CSS?
In your theme's .info file you can override the module's css and/or js and then you copy the css or js file from the module into your own theme folder, (every theme should have a .info, if not create one) - this means you don't touch the actual contrib modules files
Drupal will then use the one from your theme, which you can edit to your hearts content, and if you do hit problems you just remove the entry from the .info file and it will then go back to using the original module filea.
I haven't done it for JS but I believe the process is the same as for CSS and here is a snippet of what's in my .info file - btw I think once you use this method of overriding you have to declare the default style.css too
stylesheets[all][] = style.css
stylesheets[all][] = lightbox.css
Update:
It's only possible to use the .info file to override JS in D7, but there is module JSAlter which might help with D6
Is it possible to remove the module/system/default.css file. I'd like to do this in the .module file and not in the template.php file.
My goal is to disable this style in my drupal website without manipulating a template/theme.
Is it possible?
Thanks in advance,
Bat
This is possible. You can use template_preprocess_page in your custom module to whack Drupal's default CSS:
function mymodule_preprocess_page(&$vars) {
// Get CSS array and remove selected stylesheets
$css = drupal_add_css();
unset($css['all']['module']['modules/system/defaults.css']);
// Override Drupal styles
$vars['styles'] = drupal_get_css($css);
}
Because of Drupal's architecture, you'll almost certainly need to set the module weight to something greater than your other installed modules to ensure that your preprocessor runs last and no other module will be adding CSS.