Okay
  Public Ticket #1386612
Color overlay for Nectar Slider
Closed

Comments

  • rogeroldham started the conversation
    November 29, 2017 at 10:24pm

    Hi,

    I need to be able to add a color overlay with a gradient from #000 to clear (running from top to bottom) for the nectar slider on the homepage of my site.

    I can't seem to configure this in the admin - please can you advise.

    Many thanks.

  •  8,425
    Tahir replied
    November 30, 2017 at 1:25pm

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

    .active_texture {
    background-color:rgba(0, 0, 0, 0.5) !important;
}

    Thanks

    ThemeNectar Support Team 

  • rogeroldham replied
    December 1, 2017 at 7:49pm

    Thanks. I wanted to apply a controlled gradient and so adjusted as follows:

    .active_texture {
        background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.2)5%, rgba(0, 0, 0, 0)), url('../img/textures/grid.png');
    }

    This works applying the controlled gradient color, but I can't seem to get the textured background to show.


  •  8,425
    Tahir replied
    December 2, 2017 at 12:22pm

    Hey Again,

    You will have to add the full url of the image . Upload the image to the media library and then link it like below.

    background: linear-gradient( rgba(0,0,0,0.9),rgba(0,0,0,0.2)5%,rgba(0,0,0,0)),url(http://woocommerce-123868-355062.cloudwaysapps.com/wp-content/themes/salient/img/textures/grid.png);

    Thanks


    ThemeNectar Support Team 

  • rogeroldham replied
    December 3, 2017 at 8:08pm

    Awesome, thanks!

  •  2,725
    Andrew replied
    December 3, 2017 at 8:11pm

    Hey there,

    Thanks for reaching in.

    Hope the solution works. Please be sure to reach in incase you encounter another problem.

    Regards

  • rogeroldham replied
    December 6, 2017 at 5:26pm

    One more question on this - how can I target the page header on any page with the same gradient?

  •  8,425
    Tahir replied
    December 7, 2017 at 7:11am

    Hey Again,

    Please provide the page url so that i can write up the custom css for whats possible.

    Thanks

    ThemeNectar Support Team 

  •   rogeroldham replied privately
  •  8,425
    Tahir replied
    December 7, 2017 at 9:19am

    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :

    #page-header-bg[data-bg-pos="center"] .page-header-bg-image:before {
    content: "";
    position: absolute;
    width: 100%;
    background: linear-gradient( rgba(0,0,0,0.9),rgba(0,0,0,0.2)5%,rgba(0,0,0,0)),url(http://woocommerce-123868-355062.cloudwaysapps.com/wp-content/themes/salient/img/textures/grid.png);
    height: 100%;
    top: 0px;
    right: 0%;
}

    Thanks

    ThemeNectar Support Team 

  • rogeroldham replied
    December 15, 2017 at 1:38am

    Perfect, thanks.