Salient v13.0 Major Release (3/25/2021) is now available.

If you're on a version prior to 10.5 and are considering updating, it's important to read through our update guide before updating to ensure a smooth transition.

Click here to view the update guide

Okay
  Public Ticket #2726222
fancy box overlay
Closed

Comments

  • Anna started the conversation

    Hi,

    How can I remove the gray overlay on the fancy boxes?

    I tried the following code but it doesn't seem to do anything. No red x so is there something else I'm missing?

    }
    .nectar-fancy-box .box-bg:after {
      background-color: transparent!important;
    }
    .nectar-fancy-box:hover .box-bg:after {
      background-color: transparent!important;
    }

    Thanks!


  •  1,652
    Andrew replied

    Hi Anna,

    Please try this css:

    .nectar-fancy-box[data-style="hover_desc"][data-color="accent-color"]:before {
        background: linear-gradient(to bottom,rgba(0,0,0,0),#0066cd00 100%);
    }

    Thanks.


  • Anna replied

    Hi Andrew,

    It takes away the overlay on hovering but not on the "original" boxes?

    Thanks!

  •  5,652
    Tahir - SUPPORT replied

    Hey Again,

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    .nectar-fancy-box[data-style="hover_desc"] .box-bg:before, .nectar-fancy-box[data-style="hover_desc"]:before {
        background: transparent !important;
    }

    Thanks

  •   Anna replied privately
  •  5,652
    Tahir - SUPPORT replied

    Hey Again,

    Not sure I understand, could you elaborate a bit more on what you need removed or added ?.

    Thanks 

  •   Anna replied privately
  •  5,652
    Tahir - SUPPORT replied

    Hey Again,

    The screenshot doesn't seem to have gotten attached. Could you post it again?

    Thanks 

  •   Anna replied privately
  •  5,652
    Tahir - SUPPORT replied

    Hey Again,

    Remove the CSS earlier provided and use the below one only.

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    .nectar-fancy-box[data-style="hover_desc"].hovered .box-bg:before {
        opacity: 1;
    }
    .nectar-fancy-box[data-style="hover_desc"]:not(.hovered) .box-bg:before {
        background: transparent !important;
    }

    Thanks

  •   Anna replied privately