Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
  • #1294609

    Hey guys, first of all thank you very much for you great support.

    I found this solved thread:

    I have no idea how to copy this.

    Can someone please help me with a step by step manual?

    Thank you!


    this is a snippet for the child-theme functions.php.
    Take this code:
    as you can see inside the code: the selector where this background is applied is: #gradient
    so if you have a color-section and goto advance tab you see the “Custom ID Attribute” input field – insert : gradient

    thats it.

    PS : it is possible without child – but more complex.


    Thought it was more difficult:)

    Thanks so much!
    Works perfect!


    but btw: i see there is a syntax error in the css setting :

    	   background: "-webkit-gradient(linear, left top, right top, from("+color1+"), to("+color2+"))"}).css({
    	    background: "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"     });

    it works because the -moz-linear-gradient is working – but the first background couldn’t work.

    this is better:

    	"background" : "-webkit-linear-gradient(to left, "+color1+" 0%, "+color2+" 100%)",
    	"background" : "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)",
    	"background" : "linear-gradient(to left, "+color1+" 0%, "+color2+" 100%)",

    you can change it to diagonal :

       "background": "-webkit-linear-gradient(to top right, "+color1+" 0%, "+color2+" 100%)",
       "background": "-moz-linear-gradient(to top right, "+color1+" 0%, "+color2+" 100%)",
       "background": "linear-gradient(to top right, "+color1+" 0%, "+color2+" 100%)",

    the background without double quotes is ok – and will work too – but this is more proper with quotes.
    the comma on the last background is not needed – but looks better – not necessary
    but the second .css in the rules is nonesense

    • This reply was modified 3 years, 1 month ago by Guenni007.

    Wow, thanks so much. You are awesome!

    Btw: You said that I can change it to top left to bottom right. But you inserted the same code.


    Is it possible to connect it with several color sections on one page?

    Currently it works only with one object.


    sorry – you can see how gradient are made f.e. here:
    the code you got there is meant for css like quick css. If you like to define a color via script you can do that via:

    element.css( "color", "#333");
    or if you have more than one attribute:

    	"color" : "#333",
    	"background-color" : "#900",
    	"display": "block" ,

    so for script you have to replace in the markup you got there

    background: #121FCF;
    background: -webkit-linear-gradient(to top right, #121FCF 0%, #CF1512 100%);
    background: -moz-linear-gradient(to top right, #121FCF 0%, #CF1512 100%);
    background: linear-gradient(to top right, #121FCF 0%, #CF1512 100%);


    "background": "#121FCF",
    "background": "-webkit-linear-gradient(to top right, #121FCF 0%, #CF1512 100%)",
    "background": "-moz-linear-gradient(to top right, #121FCF 0%, #CF1512 100%)",
    "background": "linear-gradient(to top right, #121FCF 0%, #CF1512 100%)",

    now you only have to replace the static colors with the script calculated
    and because it is a script variable you had to interrupt the html markup (close doubel qoute – insert script calculated values ( “+color1+” and “+color2+” ) – and open again the html markup. ( :lol: it is javascript crispr ;) )

    now there is :

    "background": "#121FCF",
    "background": "-webkit-linear-gradient(to top right, "+color1+" 0%, "+color2+" 100%)",
    "background": "-moz-linear-gradient(to top right, "+color1+" 0%, "+color2+" 100%)",
    "background": "linear-gradient(to top right, "+color1+" 0%, "+color2+" 100%)",

    Thank you, sir!


    Hey Moescube,

    Did you need additional help with this topic or shall it be closed?

    Best regards,
    Jordan Shannon


    I’m fine. Thanks a lot.


    Hi Moescube,

    We’re glad to hear that :)
    Thanks for using Enfold and have a great day!

    Thanks for helping out :)

    Best regards,

Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘How to add animated background’ is closed to new replies.