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.
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.
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
I have a small problem with Shopware aplication. My point is, I create a new Theme which works perfectly, I can change any information at webpage using shopware backend profile, but when i copy the less files to my new repository folder, I cannot compile new theme. It stucks.
From the beginning,
Creating a theme using parent Responsive, all works perfect, theme compile.
Changing information on page, work perfect, theme compile.
Copy less files from Responsive/_public/less to newrepository/frontend/_public/less etc and it stucks.
Right now i dont have any idea how I am suppose to deal with it.
Any ideas ?
When a theme in shopware doesn't compile there is most probably something wrong with your less files. Have you copied all less files?
The path you mentioned is not correct.
syntax error in less files?
Did you copy the file Responsive/frontend/_public/src/less/all.less without copying the files that are imported in the all.less? Same applies for other files in this directory.
Whatever it is that is wrong with your less files. You shouldn't need to copy them from the parent theme. If you want to change something, just create your own files.
Say you want to have the background white. Create a file YOUR_THEME/frontend/_public/src/less/_modules/body.less with the content:
body {
background: #fff;
}
Then you are also going to need a file YOUR_THEME/frontend/_public/src/less/all.less with the content:
#import "_modules/body";
No need to copy or modify the original files.
Create a .css file here:
Responsive/frontend/_public/src/css/style.css
After that you should include the file in your Theme.php file like this:
protected $css = array('src/css/style.css');
under this function:
public function createConfig(Form\Container\TabContainer $container)
{
}
It worked for me. I have no idea how to include less files in a theme, they are usually added in a plugin by creating an event. I hope this helps.
Also Responsive Theme is default theme in Shopware. You should extend it and work on the newly created theme.
I guess it is obviously but are you following the Shopware strukture?
all.less (#import "modules";)
--_modules (#import "_modules/your";)
---your.less
?
Please don't copy all Less Files from the responsive theme. There are some mixins for the grid that stucks if you compile it twice, which is exactly the case if you copy all the files.
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 was able to create a Wordpress theme that I am working on, using my local machine. The issue I am having is incorporating Sass into the Underscores Starter theme, with Twitter Bootstrap's Sass and Wordpress.
I was creating the fixed-top bootstrap navigational bar. I managed to add the proper code to include WP_Walker_Nav in my functions.php file, but this is what my navigation looked like My Bootstrap Nav.
The content is too close to the fixed-top navigation and I wasn't able to control the body tag styles to provide padding of at least 60px from the top.
I was wondering if someone can guide me in the direction on how to incorporate Twitter Bootstrap's Sass and Font-Awesome's Sass into Underscore's Wordpress theme.
I'm struggling with the proper workflow. For my Wordpress default style.css, all I would do is put
#import url("css/style.css");
underneath Wordpress Stylesheet default comments.
I have a folder labeled sass (for all my scss files) and a folder css (for all my compiled css). In my style.scss, I import bootstrap and font-awesome's sass files, and I create a separate scss file (main.scss) to use for my custom styling, but nothing works when I create a variable in my main.scss file.
I would set my style.scss file like this:
#import 'main';
#import 'bootstrap-sass';
#import 'font-awesome';
For example:
$padding10: 10px;
body {
padding-top: ($padding10 * 6)
}
nothing happens when I set up my body tag. Please tell me what I am doing wrong, any help is appreciated. Thank you!
For those wondering about how to do this: the _S Underscores theme added direct support for generating a starter theme with a sass-based architecture last year, which I only recently found out about. If you click the “Advanced Options” link on the Underscores main page, you can then select the _sassify! option and you’re on your way. From there, it should be clear to you how to wire in Bootstrap. The generated sass/styles.scss file in your new theme is a very well organized and documented list of imports, to which you can add Bootstrap however you wish (via Bower, direct download, whatever).
As a side note, you can automate this and make it even easier via wp-cli, which very recently added support for the sassify option to their wp scaffold _s subcommand, which looks something like:
wp-cli scaffold _s my-sassy-theme --theme_name="My Sassy Theme" --sassify
(Note that as of this writing, there hasn’t been a release of wp-cli with that feature; you can use it immediately, however, by installing the wp-cli nightly.)