Overlay Color Film on Slider

Home Forums All Other Themes Overlay Color Film on Slider

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #169970
    Sedat KarakayaSedat Karakaya
    Participant
    • Topics: 22
    • Replies: 29
    • Total: 51
    Member since: July 20, 2015

    I am trying to figure out how I can put a gradient overlay film on slider image. Using Complete Pro theme fyi.

    An example can be seen at https://www.bluehost.com/contact.

    #169998
    Forum ModeratorForum Moderator
    Participant
    • Topics: 0
    • Replies: 27649
    • Total: 27649
    Member since: August 16, 2013

    Hi,

    Kindly show us your website URL please?

    Regards,
    Brad

    #169999
    Sedat KarakayaSedat Karakaya
    Participant
    • Topics: 22
    • Replies: 29
    • Total: 51
    Member since: July 20, 2015

    Working on a local host that’s whty I can not share any link at the moment. Please send me the custom css code to make it happen on Complete Pro Theme Slider….

    #170003
    Forum ModeratorForum Moderator
    Participant
    • Topics: 0
    • Replies: 27649
    • Total: 27649
    Member since: August 16, 2013

    Hi,

    Kindly go to Appearance >> Customize >> Basic >> Scroll down to find Custom CSS and paste there:

    #slider::before {
        position: absolute;
        content: ">>";
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(90deg, #71A024 0%, #0160A2 100%);
        opacity: 0.5;
    }

    Regards,
    Brad

    #170009
    Sedat KarakayaSedat Karakaya
    Participant
    • Topics: 22
    • Replies: 29
    • Total: 51
    Member since: July 20, 2015

    Placed the css but nothing has changed on the slider image… Category name #Slider is correct but it does not have any influence on the slider.

    #170012
    Forum ModeratorForum Moderator
    Participant
    • Topics: 0
    • Replies: 27649
    • Total: 27649
    Member since: August 16, 2013

    Hi,

    Okay, Kindly go to style.css >> scroll down to bottom and paste CSS code there.

    #slider::before {
        position: absolute;
        content: ">>";
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(90deg, #71A024 0%, #0160A2 100%);
        opacity: 0.5;
    }

    Regards,
    Brad

    #170022
    Sedat KarakayaSedat Karakaya
    Participant
    • Topics: 22
    • Replies: 29
    • Total: 51
    Member since: July 20, 2015

    Sorry but it did not work out… Any other suggestions?

    #170120
    Forum ModeratorForum Moderator
    Participant
    • Topics: 0
    • Replies: 27649
    • Total: 27649
    Member since: August 16, 2013

    Hi,

    Kindly add in style.css:

    #slider::before {
        position: absolute;
        content: "";
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(90deg, #71A024 0%, #0160A2 100%);
        opacity: 0.5;
        z-index:20;
    }

    Regards,
    Brad

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.