Forums

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
 
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi MarshaB,

I believe customizable styles only support colors and not gradients. An alternative is adding the gradient to your theme CSS as a regular style.
MarshaB replied on at Permalink Reply
Thanks,
I appreciate your reply, although I really wanted a different answer!
Marsha
siton replied on at Permalink Reply
siton
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:
@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)
MarshaB replied on at Permalink Reply
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
siton replied on at Permalink Reply
siton
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.
@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;
}