Viewing 21 posts - 1 through 21 (of 21 total)
  • Author
    Posts
  • #784025

    Hi,

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

    Cheers.

    #784578

    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

    #784922

    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?

    #785023

    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

    #785233

    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?

    #785287

    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

    #785290

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

    #785368

    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

    #785681

    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 :)

    #785689

    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

    #785694

    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?

    #785700

    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

    #785731

    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?

    #785733

    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.

    #785734

    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

    #785736

    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?

    #785748

    Hi,

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

    Best regards,
    Yigit

    #785888

    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?

    #785968

    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

    #786015

    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?

    #786211

    Hi,

    Can you try to clear your cache?

    Best regards,
    John Torvik

Viewing 21 posts - 1 through 21 (of 21 total)
  • The topic ‘Colour gradient in colour sections?’ is closed to new replies.