Linear Gradients
Permalink
How can I add linear gradients in the less files?
I 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 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
Thanks,
I appreciate your reply, although I really wanted a different answer!
Marsha
I appreciate your reply, although I really wanted a different answer!
Marsha
Gradients had to much options, so its little weird to create this in simple one value Style Type (See in Photoshop for example - endless options). Gradients also has browser support problem.
One solution for now - You can add 3 vars (or less/more) and they will set the gradient color:
You also can add more options (Angles, direction)
Than use this vars in less:
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)
I'm new at coding the styles.xml file and the less files. What would be the correct syntax for both files and I'm not sure of the "value" field. does a percentage go there?
<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
<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
Did you see this great tuts? (also check for short less course in youtube)
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.
Step 2: Use this vars inside your code (and get modular code):
Instead of:
Use:
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.