Linear Gradients
PermalinkI see this in the styles.xml:
<style name="Background" variable="header-background" type="color" />
and this in the less file:
@header-background-color: #09102a;
But when I try to add a linear gradient instead of a solid color, it will not read the gradient.
@header-background-color: linear-gradient(#09102a, #172a6d, #09102a)
I've tried to write it as an image, to see if that would work (from old css coding)
<style name="Background" variable="header-gradient" type="image" />
but that doesn't work either.
I know in my html files, I can just add:
background: linear-gradient(#09102a, #172a6d, #09102a); and the linear gradient shows up.
Since I have to designate a "type" as soon as I designate "color," it isn't read.
Can anyone help me out with the coding?
Thanks,
Marsha
I appreciate your reply, although I really wanted a different answer!
Marsha
One solution for now - You can add 3 vars (or less/more) and they will set the gradient color:
@color-stop1 : value; @color-stop2: value; @color-stop3: value;
You also can add more options (Angles, direction)
Than use this vars in less:
background-image: -webkit-linear-gradient(top, @color-stop1, @color-stop2, @color-stop3) background-image: linear-gradient(to bottom, @color-stop1, @color-stop2, @color-stop3)
<style name="Background" variable="header-background" type="color-stop1" />
<style name="Background" variable="header-background" type="color-stop2" /> <style name="Background" variable="header-background" type="color-stop3" />
@header-background-color: #09102a;
Just can't wrap my head around it.
Thanks,
Marsha
http://documentation.concrete5.org/developers/designing-for-concret...
https://www.youtube.com/watch?v=CdePC0rH8p0...
<style name="The-name-i-will-see-in-the-ui-form-left-side-bar-for-gradient-color-1" variable="color-stop-1" type="color" ></style>
Use @ only in less files.
Step 1 - Create vars.
@table-border-color: red;
Step 2: Use this vars inside your code (and get modular code):
Instead of:
.my-top-border-example-with-custom-color { border-top: 1px solid red; }
Use:
.my-top-border-example-with-custom-color { border-top: 1px solid @table-border-color; }
I believe customizable styles only support colors and not gradients. An alternative is adding the gradient to your theme CSS as a regular style.