Okay
  Public Ticket #2468244
Change fancy box hoover text color
Closed

Comments

  • claudiapp started the conversation
    July 9, 2020 at 5:46pm

    Hi,

    how can I change the icon and text color on hoover

    http://prntscr.com/tevxc8 

    On hoover the background is yellow (and I like it that way) but I want the text to be in a custom color instead of white. How can I do that?

    Thank you!

  •  3,022
    Andrew replied
    July 9, 2020 at 6:34pm

    Hi there,

    Can you share a link to your website so that we see possible css for that.

    Thanks.

  •   claudiapp replied privately
  •  3,022
    Andrew replied
    July 10, 2020 at 3:43pm

    Hi claudiapp,

    You forgot to include login url page.

    Thanks.

  •   claudiapp replied privately
  •  3,022
    Andrew replied
    July 13, 2020 at 8:08am

    Hi there,

    The following custom css will change. Please add in Salient > General settings > CSS/Script related:

    .nectar-fancy-box[data-style="color_box_hover"]:hover .inner-wrap *, .nectar-fancy-box[data-style="color_box_hover"]:hover .inner-wrap, .nectar-fancy-box[data-style="color_box_hover"][data-color*="gradient"] .inner i.hover-only, .nectar-fancy-box[data-style="parallax_hover"] [class^="icon-"].icon-default-style, .nectar-fancy-box[data-style="default"] .inner > i[data-color*="color"] {
    color: blue !important;
}

    Hope this helps.

  • claudiapp replied
    July 14, 2020 at 3:36pm

    Hi, thank You!

    Althought it worked, It triggered 2 alerts:  https://prnt.sc/thndgg and https://prnt.sc/thne34. How can I solve this?

    Also, how can I change the text color before mousse over? https://prnt.sc/thnpo4

    Thank You!

  •  8,992
    Tahir replied
    July 15, 2020 at 7:04am

    Hey Again,

    Those warnings can be ignored,

    Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):

    #slide-out-widget-area.fullscreen .menuwrapper li a, #slide-out-widget-area.fullscreen-alt .menuwrapper li a {
    color: #084686 !important;
}

    Thanks


    ThemeNectar Support Team 

  • claudiapp replied
    July 15, 2020 at 4:25pm

    Hi,

    Nothing changes with the code you gave, and there are no red crosses in the Custom CSS box, as you can see here http://prntscr.com/tids1d , What am I doing wong?


    Also, what's the code to change this colors on mouse over? http://prntscr.com/tidvex

    Thanks once again!

  •  8,992
    Tahir replied
    July 16, 2020 at 6:29am

    Hey Again,

    Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):

    .nectar-drag-indicator {
    mix-blend-mode: normal !important;
}
.nectar-drag-indicator i {
    color: #2d3a4c !important;
}
.nectar-drag-indicator:before {
    border: 2px solid #2d3a4c !important;
}

    Thanks

    ThemeNectar Support Team 

  • claudiapp replied
    July 16, 2020 at 11:51am

    That las code worked thank you!

    but still... this code to change the text beforre mouse over: 

    #slide-out-widget-area.fullscreen .menuwrapper li a, #slide-out-widget-area.fullscreen-alt .menuwrapper li a {    color: #084686 !important;
}

    Is not working...

  •  8,992
    Tahir replied
    July 16, 2020 at 3:04pm

    Hey Again,

    The Warnings can be ignored. Just make sure there is no Red Cross.

    Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):

    .nectar-fancy-box[data-style="color_box_hover"] .inner-wrap h3, .nectar-fancy-box[data-style="color_box_hover"] .inner-wrap p {
    color: #f8a551 !important;
}

    Thanks

    ThemeNectar Support Team 

  • claudiapp replied
    July 16, 2020 at 3:21pm

    ir worked. Thanks :)