Changing Call to Action Button Visited Color

Beaver Builder
1

Hi folks

I’d like to be able to change the call to action button visited color in the callout module. The visited color (and maybe even the focus color?) defaults to the hover color which I don’t want. Is there a way to code a custom css so that I can get around this? I’ve tried different (custom) css methods but still get the same result as the default setting.

Cheers

2

Hey John,

Would you mind explaining how that would work? What I mean is that if you are using a callout module with the click to action set, wouldn’t it be taking the user away from that specific page so that they wouldn’t be able to see the active color? I suppose it would be possible with a bit of custom CSS. Let me know on the use case and if you need assistance with some CSS and we’ll go from there!

Best,
Billy

3

John,
of course you can style the different states with CSS. This is basic knowledge and you can read about it here: W3C CSS. There are a lot of other resources out there as well. If you prefer video learning check out LevelUpTuts: CSS Tutorials. They have free CSS3 Tutorials as well.

Best regards,
Leo

4

Leo: thanks for the links - that LevelUpTuts guy is great - a gifted teacher!

Billy: Thanks for getting back. Okay, let’s look at the callout module. There’s an h3 title class (fl-callout-title) and another class beneath that for the link styling (fl-callout-title-link). My challenge is trying to style (through css) the a:hover, and a:visited. Styling the a is straight forward: .my-custom-css .fl-callout-title-link {styling-info: here;} but I get stuck at styling the a:hover and a:visited. Similarly (and referring to my original post), there’s an issue for me in styling the .fl-callout-cta-link class. Any help would be great :slight_smile:

5

Hey John,

Would you mind sending me a link to your site and the page in question so I can take a look? To clarify, are we discussing adding hover and active color to the callout button or the callout title?

Best,
Billy

6

John,
isn’t it just

a.beaver-builder-class { color: blue; }
a.beaver-builder-class:visited, a.beaver-builder-class:focus { color: green; }
a.beaver-builder-class:hover { color: white, }

If the colors are not cascading through you might need to use !important like

a:visited { color: green !important; }

Regards, Leo

7

Thanks Leo - that’s the syntax I was struggling with. Many thanks!

8

[Content Hidden]

9

[Content Hidden]