How to have forms with different color?

Hey satyenbaldev,

Sure! Are you hoping to have each event have a different color or just change the color for all forms?

If you want to change the color for all forms there are settings to do this on the “Form” tab.

Let me know if this isn’t what you meant.

– Craig

I want each form to be of a different color.

I already know how to change the color of all forms.

So kindly please advise.

Sure!

Are the forms on the single event page created by The Events Calendar or are they on a separate page? Can you share a link? I can provide some CSS to help you!

– Craig

I have created the events using The events calendar. On Monday Wednesday and Friday I will have Online tutoring and on Tuesday and Thursday, I will have In-Person Tutoring. you can see that I have color-coded the days where MWF are red color sessions and Tuesday and Thursday are Yellow to separate online tutoring sessions and In-Person tutoring sessions. I would like that when they click on the yellow(In-Person) tutoring session the form color comes out Yellow and when they click on red(Online) tutoring session the form color comes out Red. Here is the link:

https://scholartutorials.com/events/2021-07/

Appreciate the help!

Hello again,

No problem! Try adding this to the “Custom CSS” area on the “Form” tab:

.tribe_events_cat-inperson .rtec-form-wrapper {
	background: yellow !important;
}
.tribe_events_cat-inperson .rtec-form-field label {
	color: #000 !important;
}

This detects the event category and changes the color to yellow for “In Person” events.

This kind of strategy will work for the free version as well so it’s OK to ask the question here but if you need additional support for the Pro plugin, you can contact us on our website:
https://roundupwp.com/support/

Thanks!

Okay, that worked, but now I would also like to change the ‘submit’ button color to red to give a contrast to the form. How would I do that?

• This reply was modified 3 years, 9 months ago by satyenbaldev.
• This reply was modified 3 years, 9 months ago by satyenbaldev.

You can use this CSS to change the submit button:

.tribe_events_cat-inperson .rtec-form-wrapper .rtec-submit-button {
	color: #fff !important;
	background: red !important;
}

Hoppefully that helps!

– Craig

Okay Craig that worked!,

Almost everything is fixed. Now some other issue popped up. My event titles are exactly the same and have the same number of letters and space, however, some events get split into two lines and some come in one line. How do I put all the events so that they are in one line. Please see the website link below and observe the 9:00am to 11:00am Session & 11:00am to 1:00pm Session.

https://scholartutorials.com/events/2021-07/

It looks like they are all on one line to me:
https://snipboard.io/YAwhuW.jpg

Can you send a screenshot of what you’re seeing on your end?

– Craig

I fixed it yesterday, that is why it looks all good. I used the chrome inspect tool, found the CSS file, and decreased the font size from 98% to 97% and it worked.

Thanks for all your help!

No problem!

I hope you’re having a good week.