Tagged: 

Viewing 23 posts - 1 through 23 (of 23 total)
  • Author
    Posts
  • November 20, 2014 at 7:07 pm #354389
    5fold

    How can I make the background of a color section gradient from dark to light . I.e. a light gray to white. I tried using the gradient backgrounds in the styling section but thats not working. Currently using a huge image but that doesnt seem efficient.

    November 21, 2014 at 12:06 pm #355041
    Yigit

    Hey glozemedia!

    Please edit your Color Section elements and give them a unique ID ( http://kriesi.at/documentation/enfold/wp-content/uploads/sites/2/2013/12/color-section-ID.png ) and then add following code to Quick CSS in Enfold theme options under General Styling tab

    #your-custom-id {
background: -webkit-linear-gradient(grey, white);
background: -o-linear-gradient(grey, white);
background: -moz-linear-gradient(grey, white);
background: linear-gradient(grey, white);
}

    Best regards,
    Yigit

    November 21, 2014 at 6:51 pm #355419
    5fold

    This works great! How can i make the grey lighter?

    November 21, 2014 at 11:42 pm #355689
    Elliott

    Hey!

    Try this.

    #your-custom-id {
background: -webkit-linear-gradient(#999999, white);
background: -o-linear-gradient(#999999, white);
background: -moz-linear-gradient(#999999, white);
background: linear-gradient(#999999, white);
}

    Best regards,
    Elliott

    November 22, 2014 at 2:52 am #355755
    5fold

    can we add multiple items to the DEVELOPER ID, i.e. an anchor link and the css class

    How would i add that? schedule, your-custom-id?

    November 23, 2014 at 6:37 pm #356304
    Elliott

    Hey!

    To link to an element all it needs is an ID and then you can do this.

    <a href = "#id">Click me</a>

    To add a CSS class see here, http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/.

    Best regards,
    Elliott

    November 25, 2014 at 1:33 am #357284
    5fold
    This reply has been marked as private.
    November 25, 2014 at 7:47 pm #357848
    Elliott

    Hi!

    Are you sure you added the “whitetogray” class in the “Custom CSS” field of the color section? I didn’t see that class added to any of the color sections in your source code.

    Also, to target an element via CSS you use the period instead of pound like so.

    .whitetogray {
background: -webkit-linear-gradient(white, #dedede);
background: -o-linear-gradient(white, #dedede);
background: -moz-linear-gradient(white, #dedede);
background: linear-gradient(white, #dedede);
}

    Cheers!
    Elliott

    January 18, 2016 at 3:50 pm #567254
    Kai

    Hi everyone,
    if I add it like Yigit said (or the codes behind), I can see no gradient. All what I see is a white background color instead of my regular color. I have set a user defined background-picture. If I remove that picture, I can see the gradient behavior as expected, but I need both -> picture and gradient.

    What did I wrong or what can I do?

    Thanks a lot
    Kai

    • This reply was modified 8 years, 11 months ago by Kai.
    January 19, 2016 at 5:35 am #567611
    Rikard

    Hi @Kai,

    Could you provide us with a link to the site in question so that we can take a closer look please?

    Regards,
    Rikard

    January 20, 2016 at 10:17 pm #568906
    Kai

    Here is a private contant:

    January 20, 2016 at 10:46 pm #568916
    Yigit

    Hi!

    Please add following code to Quick CSS instead

    .page-id-54 #av_section_1 .av-section-color-overlay {
    background: -webkit-linear-gradient(red, white);
    background: -o-linear-gradient(red, white);
    background: -moz-linear-gradient(red, white);
    background: linear-gradient(red, white);
}

    Best regards,
    Yigit

    January 21, 2016 at 11:20 am #569312
    Kai

    Hello Yigit,
    that works partially. I see a gradient from dark pink (instead of red) to light pink (Instead of white) now.
    Best regards
    Kai

    January 22, 2016 at 6:37 am #569778
    Rikard

    Hey Kai,

    I think you will have to experiment with the colours in the code Yigit gave you until you get the result you are looking for, you can see all CSS colour names here: http://www.w3schools.com/cssref/css_colornames.asp, or you can use a custom hex code for the exact colour you are looking for.

    Thanks,
    Rikard

    January 22, 2016 at 7:41 am #569790
    Kai

    Hello Rikard,

    if I understand it correct is the main problem, that the area of the user defined background-picture section or the section “av_section_1” (which should be the same as I expect), than is the height of the section smaller than the height which the gradient set. That could explain, why I see a gradient from dark pink (instead of red) to light pink (Instead of white) now, because these colours are between red and white. Playing with colours can’t give me the correct result.

    What do you think?
    Thanks,
    Kai
    PS.: if I use “container” instead of Yigits “av-section-color-overlay”, than I see the correct gradient behaviour, but that removes the user defined background picture.

    • This reply was modified 8 years, 11 months ago by Kai.
    January 22, 2016 at 2:21 pm #570059
    Kai

    Ok, I found a solution by using Firebug and the result was as wished. As I wrote above, the “height” of the gradient is bigger than the “visible-height”.

    This is the code without gradient as used and without any changes by using Quick-CSS or something like this:

    background-repeat: no-repeat;
background-image: url(LINK-TO-IMAGE);
background-attachment: fixed;
background-position: center center;

    This is the code with gradient and a result as wished (here only for the Firefox-Browser):

    background-repeat: no-repeat;
background-image: url(LINK-TO-IMAGE), -moz-linear-gradient(blue, white);
background-attachment: fixed;
background-position: center center;

    I changed the code directly at the page (by using Firebug).

    What is the best way to explain this Enfold? How should I use Quick-CSS or is there any recommendation of your side?

    Thanks
    Kai

    • This reply was modified 8 years, 11 months ago by Kai.
    January 22, 2016 at 2:31 pm #570070
    Yigit

    Hi!

    The code i posted basically adds gradient background to your color section overlay and it is set to 0.2 opacity. That is why it is showing up pink instead of red.
    Can you please post a screenshot from Firebug where you make changes so we can see correct selector?

    Regards,
    Yigit

    January 22, 2016 at 2:52 pm #570103
    Kai

    I changed at “av_section_1”. Here are 2 screenshots posted by Privat Content

    January 22, 2016 at 3:13 pm #570128
    Yigit

    Hi!

    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 and then add your code as following 

    #your-unique-id { background-repeat: no-repeat;
background-image: url(LINK-TO-IMAGE), -moz-linear-gradient(blue, white);
background-image: url(LINK-TO-IMAGE), -webkit-linear-gradient(blue, white);
background-image: url(LINK-TO-IMAGE), linear-gradient(blue, white);
background-attachment: fixed;
background-position: center center; 
}

    Cheers!
    Yigit

    May 18, 2017 at 12:10 am #795165
    vadikcoma

    Great post, thank you!

    Is there a way to make this gradient go from left to right, not from top to bottom?

    May 18, 2017 at 7:25 am #795279
    Nikko

    Hi,

    This tool might be helpful generating gradient colors: http://www.colorzilla.com/gradient-editor/

    Best regards,
    Nikko

    May 18, 2017 at 9:38 am #795726
    vadikcoma

    Awesome! Thank you!

    May 18, 2017 at 3:21 pm #795939
    Yigit

    Hi,

    Glad @Nikko could help! Let us know if you have any other questions or issues :)

    Best regards,
    Yigit

  • Author
    Posts
Viewing 23 posts - 1 through 23 (of 23 total)
  • The topic ‘Make background gradient’ is closed to new replies.