Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

TUTORIALVaadin lets you build secure, UX-first PWAs entirely in Java.
Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Calling javascript synchronously by Enver Haase, 3 weeks ago
Setting background gradient in Valo theme
Hi.
I'm trying to set a gradient (with "background: linear-gradient...") as the background of my website. I'm using Valo as the base theme. In Reindeer this worked fine, but in Valo not so much. The "$v-background-color" seems to override the gradient. I can set a "background-image:" which seems to work, but having a gradient in image doesn't produce as good a result as true gradient.
Any way to get the linear-gradient to work?
Current mytheme.scss contents:
$v-background-color: #d7d7d7;
@import "../valo/valo.scss";
@mixin mytheme {
@include valo;
// Insert your own theme rules here
//background-image: url("images/bgr_gradient.png");
background: linear-gradient(to right, #564b46 0%,#969696 28%,#bab6b6 51%,#8c8779 100%);
}
Last updated on
Example using Bourbon (http://bourbon.io/):
@import "../valo/valo.scss";
@mixin theme {
@include valo;
&.v-app,
&.v-app-loading {
@include linear-gradient(to top, red, orange);
}
}
Last updated on
You cannot reply to this thread.