Hi. I'm trying to add a span class to the first word of a few buttons (to change the font of the first word). It sometimes works but then it'll fail the next time I save the page with the button on it. Do you know how this can be done?
Another workaround that I thought of would be to use the Fancy Box as a button - since the Box Content let's me add HTML. I could use the Color Box Hover Effect or the Color Box Basic style, but each option has its own problem. The box color needs to be a gradient. That's not an option with the Color Box Basic style. It is an option for the Color Box Hover Effect, but the gradient appears when you hover over it. I need it to show on the Off state.
Is there CSS that I can add to either of those 2 options to get it how I want (gradient color box on the off state, ideally it would change to a solid color on hover)?
Not sure why this is happening but when I use the JS method of adding a span class to the first word, the text after the first word disappears when I hover over the button. Might have something to do with the ::before selector that is added to the nectar buttons? IDK, but when I disable the ::before selector when inspecting the element the text appears again.
Hi. I'm trying to add a span class to the first word of a few buttons (to change the font of the first word). It sometimes works but then it'll fail the next time I save the page with the button on it. Do you know how this can be done?
Hi there,
There isn't a workaround we can think of right now.
Could you try and implement it with some JS like shown here - https://codepen.io/mel/pen/jLEKH
There is a raw HTML and raw JS element on the page builder you can add to the page to aid in this.
Hope you can work it from there.
Hi Andrew
Thanks for your suggestion - I'll look into that.
Another workaround that I thought of would be to use the Fancy Box as a button - since the Box Content let's me add HTML. I could use the Color Box Hover Effect or the Color Box Basic style, but each option has its own problem. The box color needs to be a gradient. That's not an option with the Color Box Basic style. It is an option for the Color Box Hover Effect, but the gradient appears when you hover over it. I need it to show on the Off state.
Is there CSS that I can add to either of those 2 options to get it how I want (gradient color box on the off state, ideally it would change to a solid color on hover)?
Thanks,
Duane
BTW - I'm close to getting the method that you suggested working so don't go to any trouble to answer my workaround question. Thanks.
Not sure why this is happening but when I use the JS method of adding a span class to the first word, the text after the first word disappears when I hover over the button. Might have something to do with the ::before selector that is added to the nectar buttons? IDK, but when I disable the ::before selector when inspecting the element the text appears again.
Hi Speqtrum,
Sorry for the late reply.
Could you try and override the ::before selector on properties such as visibility, opacity etc to make sure the text after first word shows.
Cheers.
Hi Duane,
Sorry for the late reply.
Am sure you are aware this is beyond what we cover as support as its a modification.
Could we have link to the page with this we try and understand that is going on.
Thanks.
Hi Duane,
Could you try this CSS to get the text to appear on hover:
body.material .nectar-button.regular[class*="m-extra-color-gradient-"]:hover:before { opacity: 0 !important; }add it to salient \ general settings - css script related - custom css code.
Hope this helps.
Perfect! Thank you very much!