Styling required fields

[lucy maddison]

Hi,
How do I style all my required fields text?
(red and normal, not italic)

Thanks

[Cliff]

Hi, Lucy. We wouldn’t provide such styling, per our Scope of Support / Terms, but the “required” text does have the “req” class: https://cl.ly/0C1h0B141802

You could use JavaScript to traverse to the actual form field and/or its label and add a special class or just inline styling. Or you could do a Template Override (our “how-to” walk-through video may be helpful, too) of the Community Events template files and add the classes at the start via PHP.

Do note that your custom styling should take into account that the “error” class exists and gets applied if you submit the form without all required fields. You might just want to add this class to all the labels via template override.

If you need some coding help, you may want to ask your developer or reference our documentation and list of known customizers.

[lucy maddison]

Ok thanks, I have located the required field and altered it. Its v hard
to know what is called what. You cna also see in the form that some
titles are my custom font “ad lib” and some are not. Where do I change
them all to the same. Also how to re,ove the annoying grey line under
“add new event”

[lucy maddison]

Hi, got the H tags now just the gray line and the submit button to get!

[Cliff]

Lucy, please understand that we do not provide styling support, but here’s a video to demonstrate how to use the browser’s inspector to find the selectors you’re needing to target:

Here’s some CSS from the video: https://cl.ly/1t2l083T1y23

body.tribe_community_edit .tribe-community-events .tribe-section .tribe-section-header {
border-bottom: none;
margin-bottom: 0;
}

I hope it goes well for you from here forward.

[lucy maddison]

Hi Cliff,
Thank you for taking the time to make a video. I’m sure all this is easy and obvious to you. I have never used Dev tools in Chrome. So have spent one hour looking up on Google what it is , where to find it, how to use the inspector.
I tried screenshooting and rewritten the CSS you suggested and it didn’t work. I could spend all day trying to sort this out and it will take you 5 minutes. Amazingly I have created 100s of websites without needing to get so far into code as Modern tribe seems to expect.
All I want to do is remove the grey line and padding under Add new event and cannot locate it. (see ref) its really easy for you. And its my birthday. please help!

[Cliff]

Thanks for sharing.

You can reference our KB article Using Google Chrome Developer Tools.

And you can add the custom CSS code I shared previously via your child theme’s style.css file, via WordPress 4.7’s Customizer CSS settings, or via a third-party plugin (not guaranteed or supported by us), like:

• SiteOrigin CSS (helps you visually build CSS selectors via its Inspector and Visual Editor, if that’ll help you)
• Simple Custom CSS
• Jetpack (supports regular CSS and the LESS and Sass pre-processors)

If you’re not a CSS expert, Jetpack’s Custom Design reference may prove helpful.

Please let me know how it goes for you.

[Support Droid]

Hey there! This thread has been pretty quiet for the last three weeks, so we’re going to go ahead and close it to avoid confusion with other topics. If you’re still looking for help with this, please do open a new thread, reference this one and we’d be more than happy to continue the conversation over there.

Thanks so much!
The Events Calendar Support Team

[Author]

Posts