Colour gradient in colour sections? - Support | Kriesi.at

Viewing 21 posts - 1 through 21 (of 21 total)

Author

Posts
April 27, 2017 at 2:05 pm #784025

Wordpressed
Participant

Hi,

Is it possible to create gradient backgrounds in colour sections fairly simply and easily? Anyone know, please?

Cheers.

April 28, 2017 at 2:37 pm #784578
Yigit
Keymaster
Hey WordPressed!

Please edit your color section element and give it a unique ID – http://kriesi.at/documentation/enfold/wp-content/uploads/sites/2/2013/12/color-section-ID.png (“gradient-section” in example below) and then add following code to Quick CSS in Enfold theme options under General Styling tab
```
#gradient-section { 
background: #b02b2c!important;
background: -moz-linear-gradient(top, #b02b2c 0%, #df7c7d 100%) !important;
background: -webkit-linear-gradient(top, #b02b2c 0%,#df7c7d 100%) !important;
background: linear-gradient(to bottom, #b02b2c 0%,#df7c7d 100%) !important;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b02b2c', endColorstr='#df7c7d',GradientType=0 ); 
}
```
You can create gradients here – http://www.colorzilla.com/gradient-editor/ :)

Best regards,
Yigit
April 29, 2017 at 11:35 am #784922

Wordpressed
Participant

Yigit, thank you for this!

I have named the section as suggested and pasted the code in, changed #gradient-section to the section name, cleared cache, but sadly no gradient showing up :/

Sorry to be a pain, but any suggestions as to why it might not be working?

April 29, 2017 at 5:03 pm #785023

Mike
Moderator

Hi,
I took a look and if I’m looking in the right place, on your home page, the color section for #homeintro has a background image of the band, and a overlay color, so the gradient background won’t show.
I added a color section on your test-page so you can see how it works :)

Best regards,
Mike

April 30, 2017 at 1:54 pm #785233

Wordpressed
Participant

Thanks Mike, I see the test area you made.

For my clarity, is it not possible to have a gradient overlay, in that case, so that its still possible to use a background image in the section?

April 30, 2017 at 4:23 pm #785287
Mike
Moderator
Hi,
I have created a work around for your gradient overlay, I turned off the color section gradient, and added this to your child theme css:
```
#homeintro:before {
    content: '';
	position: absolute!important; 
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: linear-gradient(to bottom right,#007777,#dc4225)!important; 
	opacity: .6!important;  
  }
```
Best regards,
Mike
April 30, 2017 at 4:32 pm #785290

Wordpressed
Participant

Hi Mike, interestingly I am not seeing the gradient at all!? I am using Chrome, cleared cache and refreshed but nothing there at all!?

April 30, 2017 at 7:21 pm #785368

Mike
Moderator

Hi,
That’s weird, I had worked on it for quite a while and you saw it was working :(
Do you have a site caching system, or CDN?

*Removed screenshot, sorry.

Best regards,
Mike

May 1, 2017 at 1:01 pm #785681

Wordpressed
Participant

How disappointing! Thank you very much for trying and putting that time in.

I am not knowingly using any caching systems or CDN, no.

And thank you :)

May 1, 2017 at 1:10 pm #785689

Yigit
Keymaster

Hi,

I created a private testing page (attached in private content field) and applied the changes i suggested in my initial post and it does work fine on my end. Have you figured it out already or need further assistance on this case? :)

Best regards,
Yigit

May 1, 2017 at 1:19 pm #785694

Wordpressed
Participant

Hi Yigit,

Thank you very much for that.

I’ve just added a background image to the section and this has killed the gradient.

I’m just trying to achieve something like in the attached pic, gradient overlay, image underneath, heading on top.

Is this possible?

May 1, 2017 at 1:28 pm #785700
Yigit
Keymaster
Hi,

I edited the color section on the test page i created and added an overlay to it and then changed the code to following one
```
#gradient-section .av-section-color-overlay { 
background: #b02b2c!important;
background: -moz-linear-gradient(top, #b02b2c 0%, #df7c7d 100%) !important;
background: -webkit-linear-gradient(top, #b02b2c 0%,#df7c7d 100%) !important;
background: linear-gradient(to bottom, #b02b2c 0%,#df7c7d 100%) !important;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b02b2c', endColorstr='#df7c7d',GradientType=0 ); 
}
```
Please review your website now :)

Best regards,
Yigit
May 1, 2017 at 2:17 pm #785731

Wordpressed
Participant

Yigit, thank you very much indeed, seems to be getting there, I really appreciate you doing all this for me.

I have found that the gradient is working on the test page you created, but still not on the homepage!?

FYI

1) I just changed some of your code to the code generated from http://www.colorzilla.com/gradient-editor/ to get some different colors and directions etc. It still works fine on the test page.
2) I copy/pasted the CSS code to create gradient code for the homepage section “home-intro” but this gradient is not showing up.

All caches cleared etc.

Any ideas why it wont work on the homepage?

May 1, 2017 at 2:27 pm #785733

Wordpressed
Participant

Scrap that, I got that bit sorted.

One last question, can I still use an overlay image with the gradient? That’s what seemed to be stopping the homepage section not showing.

May 1, 2017 at 2:29 pm #785734

Yigit
Keymaster

Hi,

Glad you figured it out :)

You can simply edit your color section elements, set custom background image and then add overlay to your color sections to display both background image and the gradient. If that is not what you meant, please elaborate a bit :)

Best regards,
Yigit

May 1, 2017 at 2:32 pm #785736

Wordpressed
Participant

You know like dots, crossed lines, grunge etc overlay images. I really like the linen and dots for some of the sections but selecting an OL image with the gradient kills the gradient. Any thoughts to the possibility of using both?

May 1, 2017 at 2:43 pm #785748

Yigit
Keymaster

Hi,

Can you please reproduce the issue on the testing page i created so we can look into it once again? :)

Best regards,
Yigit

May 1, 2017 at 5:57 pm #785888

Wordpressed
Participant

Hi Yigit, the section and gradient is there on the testing page still, and currently you can see the gradient, no problems. If you were to add an overlay image/texture, though, you will see that the gradient then disappears. And also, the image overlay doesn’t show either. I’m just wondering if it would be possible to use both the gradient and the overlay image at the same time?

May 1, 2017 at 8:40 pm #785968
Yigit
Keymaster
Hi,

I slightly adjusted Mike’s code and it did work fine for me. Can you please try following one
```
#gradient-section .av-section-color-overlay:before {
    content: '';
	position: absolute!important; 
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: linear-gradient(to bottom right,#007777,#dc4225)!important; 
	opacity: .6!important;  
  }
```
Best regards,
Yigit
May 1, 2017 at 11:01 pm #786015

Wordpressed
Participant

Sorry Yigit, I am not sure what you mean here, sorry :/

Is this instead of the code you already wrote and installed on the site? If so, I have changed it but this code doesn’t seem to be working for me. Could you possibly have a closer look, please?

May 2, 2017 at 8:17 am #786211

John Torvik
Inactive Moderator

Hi,

Can you try to clear your cache?

Best regards,
John Torvik
Author

Posts

Viewing 21 posts - 1 through 21 (of 21 total)

The topic ‘Colour gradient in colour sections?’ is closed to new replies.