Okay
  Public Ticket #2242427
Fancy Box Bottom Color Bar Styling
Closed

Comments

  • postloungeNL3 started the conversation
    December 13, 2019 at 7:37am

    I want to use the Fancy Box with Bottom Color Bar, but a gray overlay appears.

    I want the box to have the same color as the background, the font to be black (currently it's white) and the hoover effect to only display the bottom color bar effect and not the entire box (currently the opacity and/or color changes).

    Can you help me do this? 


    PS: the attached images showcase the hoover and normal state, while the box on the right shows how I would love to have it styled.

  •  3,023
    Andrew replied
    December 13, 2019 at 11:25am

    Hi postloungeNL3,

    Would it be possible we get a link to the page in the screenshot we try and make those adjustments you requested with some custom CSS written directly from that page.

    Thanks.

  •   postloungeNL3 replied privately
  •  3,023
    Andrew replied
    December 14, 2019 at 8:08am

    Hi there,

    Could you use this CSS:

    .nectar-fancy-box .box-bg:after{
    background-color:white !important;
}
.nectar-fancy-box .link-text{
    color:black !important;
}
.nectar-fancy-box .inner h4,.nectar-fancy-box .inner p{
    color:black !important;
}
.nectar-fancy-box .link-text .arrow{
    border-color:black !important;
}
.nectar-fancy-box:hover .link-text .arrow{
    border-color:white !important;
}
.nectar-fancy-box .link-text .arrow:before{
    color:black !important;
}
.nectar-fancy-box .link-text .arrow:after{
    background-color:black !important;
}

    add it to salient \ general settings - css script related - custom ccs code.

    Hope this helps. 

  • postloungeNL3 replied
    December 14, 2019 at 6:15pm

    Works great. Thanks!