Backlight base color - gradient?

jwlimages · 2019-01-23 10:02:57

I am just starting to rebuild my old CE4 site with Backlight2. Starting with the basics, in Designer I'm building a new default Pangolin page template. In the Color section, all the selections are single colors. I'd like to be able to spec a 2-color gradation for the Base.

Is there any way to do this? Or would it have to be done via an image in the Background section? If the latter, what would be the minimum pixel dimensions for this to work on say, a Retina display?

Thanks,

John

rod barbee · 2019-01-23 10:33:20

custom css

/*Background gradient
========================================================*/
body {
background: linear-gradient(180deg, #D18555, #0F0701);
}

background: linear-gradient(angle, first color, second color);

more on css gradients: https://www.w3schools.com/css/css3_gradients.asp

jwlimages · 2019-01-23 12:28:32

Thank you Rod!

J

jwlimages · 2019-01-23 12:32:30

Oops, sorry I need still more help. Where do I enter this text - is it possible thru the Backlight interface, or ???

John

Daniel Leu · 2019-01-23 12:34:48

jwlimages wrote:

Oops, sorry I need still more help. Where do I enter this text - is it possible thru the Backlight interface, or ???
John

http://backlight.theturninggate.net/doc … tylesheets

jwlimages · 2019-01-23 12:46:48

OK, will check it out.

Thanks again,

John

jwlimages · 2019-01-24 05:57:20

I'm still floundering here.

I created a minimal custom css file - basically just what Rod posted, with different hex color values.
Uploaded it to the css folder inside Backlight's directory.
Then from Publisher, edited the page template, enabling Use Custom Stylesheet & selected my .css file.

But no change - looks like the settings in the Color panel still determine the background. What am I missing?

John

Daniel Leu · 2019-01-24 06:37:39

jwlimages wrote:

I'm still floundering here.
I created a minimal custom css file - basically just what Rod posted, with different hex color values.
Uploaded it to the css folder inside Backlight's directory.
Then from Publisher, edited the page template, enabling Use Custom Stylesheet & selected my .css file.
But no change - looks like the settings in the Color panel still determine the background. What am I missing?
John

Hi John, do you have a link to your page? Thanks!

jwlimages · 2019-01-24 06:47:09

Hi Daniel,

The Home page I'm working on is http://jwlimages.com/Commerce/

John

Daniel Leu · 2019-01-24 07:04:32

Please try without space between gradient and '(':

html, body, main {
    background: linear-gradient(180deg, #ffffff, #323232);
}

jwlimages · 2019-01-24 07:12:49

Doh!

OK, will try when I get back to studio.

Thank you, Daniel!

J

jwlimages · 2019-01-24 09:28:31

As simple as getting rid of that extra space - Thanks!

John

Daniel Leu · 2019-01-24 09:46:34

Community @ The Turning Gate

#1 2019-01-23 10:02:57

Backlight base color - gradient?

#2 2019-01-23 10:33:20

Re: Backlight base color - gradient?

#3 2019-01-23 12:28:32

Re: Backlight base color - gradient?

#4 2019-01-23 12:32:30

Re: Backlight base color - gradient?

#5 2019-01-23 12:34:48

Re: Backlight base color - gradient?

#6 2019-01-23 12:46:48

Re: Backlight base color - gradient?

#7 2019-01-24 05:57:20

Re: Backlight base color - gradient?

#8 2019-01-24 06:37:39

Re: Backlight base color - gradient?

#9 2019-01-24 06:47:09

Re: Backlight base color - gradient?

#10 2019-01-24 07:04:32

Re: Backlight base color - gradient?

#11 2019-01-24 07:12:49

Re: Backlight base color - gradient?

#12 2019-01-24 09:28:31

Re: Backlight base color - gradient?

#13 2019-01-24 09:46:34

Re: Backlight base color - gradient?

Board footer