Gradient not working properly

All WYSIWYG Web Builder support issues that are not covered in the forums below.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
Post Reply
User avatar
pka4916
 
 
Posts: 65
Joined: Sat Mar 03, 2018 6:45 pm

Gradient not working properly

Post by pka4916 » Wed Apr 18, 2018 12:10 am

When I have a Header and a footer on a page and set
the Header/footer/page all to the same gradient (like Red / Blue)
and the page width is 1200 or really doesn't matter.

In editing mode it looks fine, but in the browser the Page gradient is totally off.

Even when I resize it to a small screen, the header and footer the gradient works fine
but for the page it's 1 solid color at that point. (it doesn't change at all when you resize)

any way to fix this problem?

User avatar
crispy68
 
 
Posts: 305
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Gradient not working properly

Post by crispy68 » Wed Apr 18, 2018 12:18 am

Try this:

go to Tools --> Options --> HTML --> in CSS section click the box 'Use CSS3 gradients instead of images when possible'

without the above checked, it will create an image for the gradient which has a fixed size.

User avatar
pka4916
 
 
Posts: 65
Joined: Sat Mar 03, 2018 6:45 pm

Re: Gradient not working properly

Post by pka4916 » Wed Apr 18, 2018 2:19 am

Same thing. No difference.

User avatar
crispy68
 
 
Posts: 305
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Gradient not working properly

Post by crispy68 » Wed Apr 18, 2018 2:58 am

Can you please provide the steps you are taking to create this?

I am not sure if I quite follow what you are doing.

User avatar
pka4916
 
 
Posts: 65
Joined: Sat Mar 03, 2018 6:45 pm

Re: Gradient not working properly

Post by pka4916 » Wed Apr 18, 2018 3:07 am

When I have a Header and a footer on a page and set
the Header/footer/page all to the same gradient (like Red / Blue)
and the page width is 1200 or really doesn't matter.

Here is a link

https://www.dropbox.com/s/x1602lykec9pe ... t.wbs?dl=0

it has a header, footer and the page gradients set.

User avatar
crispy68
 
 
Posts: 305
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Gradient not working properly

Post by crispy68 » Wed Apr 18, 2018 3:37 am

Ok, I understand what you are doing.

The reason is for the background it is creating an image called index_bkgrnd.png the size of your default view and stretching the image across the screen which does not line up with the page headers/footers.

The CSS code for the background looks like this for the <body>:

Code: Select all

background-image: url(../images/index_bkgrnd.png);
For the page header/footer, it is using css linear-gradient which looks like this:

Code: Select all

background: linear-gradient(to left, #FF0000 0%, #00FF7F 100%);
To get it to work, you can do it 2 ways. Delete the line in the CSS code generated for the body and replace it with:

Code: Select all

background: linear-gradient(to left, #FF0000 0%, #00FF7F 100%) fixed;
or you can hack it by adding the following in the page html between the <head> tags:

Code: Select all

<style>
body{background: linear-gradient(to left, #FF0000 0%, #00FF7F 100%) fixed;}
</style>

User avatar
pka4916
 
 
Posts: 65
Joined: Sat Mar 03, 2018 6:45 pm

Re: Gradient not working properly

Post by pka4916 » Wed Apr 18, 2018 4:16 am

Thanks,

So I can only do that if I export it to my drive first and then upload to the site,
or can I do it within the builder, and leave it there?

Edit: Think I found it.. I could add

<style>
body{background: linear-gradient(to left, #87CEFA 0%, #FF8C00 100%) fixed;}
</style>

under Page --> Site HTML and select the Between Tab.

Post Reply

Who is online

Users browsing this forum: No registered users and 4 guests