Okay
  Public Ticket #349141
Gradient Overlay / Browser Vignette
Closed

Comments

  • Kelsey started the conversation
    January 10, 2015 at 11:26pm

    Hello there, 

    I am looking to make a gradient overlay, that appears above the rest of my responsive site's content, that looks a little something like this:

    http://www.colorzilla.com/gradient-editor/#141515+...

    Like a Vignette on a picture. What is the best way to do this?

    Thank you so much!

  •  8,848
    Tahir replied
    January 12, 2015 at 2:19pm

    Hey!

    You can try adding it to the body class like this : 

    body {background: -moz-linear-gradient(top,  rgba(20,21,21,0.5) 0%, rgba(20,21,21,0) 25%, rgba(20,21,21,0) 75%, rgba(20,21,21,0.5) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(20,21,21,0.5)), color-stop(25%,rgba(20,21,21,0)), color-stop(75%,rgba(20,21,21,0)), color-stop(100%,rgba(20,21,21,0.5))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(20,21,21,0.5) 0%,rgba(20,21,21,0) 25%,rgba(20,21,21,0) 75%,rgba(20,21,21,0.5) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(20,21,21,0.5) 0%,rgba(20,21,21,0) 25%,rgba(20,21,21,0) 75%,rgba(20,21,21,0.5) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(20,21,21,0.5) 0%,rgba(20,21,21,0) 25%,rgba(20,21,21,0) 75%,rgba(20,21,21,0.5) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(20,21,21,0.5) 0%,rgba(20,21,21,0) 25%,rgba(20,21,21,0) 75%,rgba(20,21,21,0.5) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80141515', endColorstr='#80141515',GradientType=0 ); /* IE6-9 */


}

    Thanks 

    ThemeNectar Support Team 

  • Kelsey replied
    January 13, 2015 at 1:32am

    Hello again, 

    Thank you for your reply! I have tried plugging this into the Salient > General > Custom CSS as well as the page's custom CSS and adding a new Raw HTML row. But those don't seem to work, where exactly do I add this? Sorry :(

    Thank you!

  •  8,848
    Tahir replied
    January 13, 2015 at 2:24pm

    Hey Again!

    Can you provide a screenshot of where exactly you need to add this and your site url so i can sort this for you. 

    Thanks 

    ThemeNectar Support Team 

  •   Kelsey replied privately
  •  8,848
    Tahir replied
    February 9, 2015 at 4:47pm

    Hey Again!

    I am afraid i cant help much with images alone. Let me know when you have a url .

    Thanks

    ThemeNectar Support Team 

  • Kelsey replied
    February 12, 2015 at 12:17am

    Will do!