Okay
  Public Ticket #519005
Gradient Color on Backgrounds Raw Sections
Closed

Comments

  • Mario started the conversation

    After being a customer for a long time I still do not know how to make the background color of a raw section into a gradient color.

    I am hoping you can explain to me in steps how to do it.
    In the raw section I can choose a custom background color, and after that, there is the "extra class name" section. What code do I insert there?

    And what code do I insert in the css custom section in the general Salient settings?

    Thank you!

  •  8,990
    Tahir replied

    Hey ,

    Could you provide the page url so i can have a look.

    Thanks


    ThemeNectar Support Team 

  • Mario replied

    Hey Tahir, I have several websites using Salient in fact I purchased this license 7 times already.

    I would appreciate if you can offer me this info as requested on my previous message.

    I am sure many other people will find it useful.

    Appreciate it!

  •   Tahir replied privately
  •   Mario replied privately
  •  8,990
    Tahir replied

    Hey ,

    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
    .custom-class .row-bg.using-bg-color {
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#6db3f2+0,54a3ee+50,3690f0+51,1e69de+100;Blue+Gloss+%233 */
        background: #6db3f2;
        /* Old browsers */
        background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%);
        /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(50%,#54a3ee), color-stop(51%,#3690f0), color-stop(100%,#1e69de));
        /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%);
        /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%);
        /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%);
        /* IE10+ */
        background: linear-gradient(to bottom, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%);
        /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=\'#6db3f2\', endColorstr=\'#1e69de\',GradientType=0 );
        /* IE6-9 */
    }

    And add a custom-class in the Row Extra Class field . See screenshot: http://prntscr.com/8cwpne .

    Cheers


    ThemeNectar Support Team 

  •   Mario replied privately
  •  8,990
    Tahir replied

    Yes thats correct.

    Thanks


    ThemeNectar Support Team 

  • Mario replied

    Hey Tahir, it worked thank you!

    However for buttons the first line of code should be: .custom-class .row-bg.using-button-color { ?

    And Shall I change the .custom-class name to something else?

    Would you mind please giving me the same example you did before but for buttons?

    Thank you!

  •  8,990
    Tahir replied

    Hey Again,

    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
    a.nectar-button.custom-class {
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#6db3f2+0,54a3ee+50,3690f0+51,1e69de+100;Blue+Gloss+%233 */
        background: #6db3f2;/* Old browsers */
        background: 
        -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%);/* FF3.6+ */
        background: 
        -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(50%,#54a3ee), color-stop(51%,#3690f0), color-stop(100%,#1e69de));/* Chrome,Safari4+ */
        background: 
        -webkit-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%);/* Chrome10+,Safari5.1+ */
        background: 
        -o-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%);/* Opera 11.10+ */
        background: 
        -ms-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%);/* IE10+ */
        background: linear-gradient(to bottom, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%);/* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=\'#6db3f2\', endColorstr=\'#1e69de\',GradientType=0 );/* IE6-9 */
    }

    Also see : https://support.woothemes.com/hc/en-us/articles/203105957-Customizing-your-theme-with-Firebug

    Thanks


    ThemeNectar Support Team 

  • Mario replied

    Thank you!