Forms submit button CSS not being applied on single events

[Hugues]

Hi,
I have some custom css to format the “SUBMIT” button of my forms which works fine on pages but isn’t applied on single events, instead reverting to the default font etc…

This page is fine for example, see the button at the bottom – https://e-ha.co.uk/campfire/distillery-tours/

This event, however, doesn’t see the formatting applied to the “SUBMIT” button of the form: https://e-ha.co.uk/campfire/event/stargazing-and-cocktails-night/

The site is built with the Beaver Builder theme, the forms are built with Formidable Forms

The CSS for the submit button looks like this:

.frm_style_formidable-style.with_frm_style input[type=submit] {
font-family: “Tungsten A”, “Tungsten B”, “Arial”, “Helvetica”, “sans-serif”;
font-style: normal;
font-weight: 600;
letter-spacing: 2px;
}

Can you help please?
Thanks in advance
Hugues

[Geoff B.]

Good evening Hugues and welcome to the Events Calendar Support forum!

Thank you for reaching out to us.

We are sorry to hear about the styling challenges you have been facing.
I would love to help you with this topic.

For more autonomy, I would highly recommend reading the following for styling issues: https://theeventscalendar.com/knowledgebase/using-google-chrome-developer-tools/

With that in mind, the issue is that the font change rule is only applicable to formidable form buttons and has not been set for other buttons on the site.

Try adding the following CSS rule to your style.css file or in your Custom CSS metabox:

.events-single .frm_style_formidable-style.with_frm_style .frm_submit button {
font-family: “Tungsten A”, “Tungsten B”, “Arial”, “Helvetica”, “sans-serif”;
font-style: normal;
font-weight: 600;
letter-spacing: 2px;
}

Let me know how that goes.

Best regards,
Geoff B.

[Hugues]

Thank you Geoff,
This is my second site build with events calendar pro, great product. I remember the great support last time I used it for another client.

I’m now using the Beaver Builder theme and their page builder to build all client sites, an awesome tool! Are you guys talking to the team at BB to possibly strengthen the integration of the events calendar with BB ? I’ve seen your product mentioned a few times on the fb BB forum (hell, I recommended it more than once :-))

With the upcoming launch of their “themer” plugin (currently in Alpha) if would make even more sense.

For example: the “next event” “previous event” links on single events pages inherits the BB theme styles on desktop but revert back to default on small devices, requiring some custom css & media query to fix..

In the end I used the css below, which achieves the right result too – it seems on the event page the button is using a button element and not an input as it does on other pages.

.frm_style_formidable-style.with_frm_style input[type=submit],
.frm_style_formidable-style.with_frm_style .frm_submit button {
font-family: “Tungsten A”, “Tungsten B”, “Arial”, “Helvetica”, “sans-serif”;
font-style: normal;
font-weight: 600;
letter-spacing: 2px;
}

Thanks again
Hugues

[Geoff B.]

Good morning Hugues,

Thank you for your awesome words, they are very appreciated.

Are you guys talking to the team at BB to possibly strengthen the integration of the events calendar with BB ? I’ve seen your product mentioned a few times on the fb BB forum (hell, I recommended it more than once :-))

That is a very interesting idea. The answer is “not that I am aware of”, but I will certainly relay the idea along.

For example: the “next event” “previous event” links on single events pages inherits the BB theme styles on desktop but revert back to default on small devices, requiring some custom css & media query to fix..

I see what you mean. Typically the theme authors end up being the ones that include theme specific CSS to integrate with our plugins.

This makes a lot of sense for many reasons. Mostly because it is impossible for us to keep track of all the themes that are out there and even more to keep track of how they change through time.

In fact, there are several theme that do a fantastic job at that. Avada and Eventica come top of mind.

You are welcome back in our support forums any time 🙂

For now, I am going to close this thread.

Have a great week!

Geoff B.

[Author]

Posts