Support » Plugin: Registrations for the Events Calendar - Event Registration Plugin » How to have forms with different color?

  • Resolved satyenbaldev

    (@satyenbaldev)


    Hey, I would like to have registration forms with different color. How would I do that?

Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Author roundupwp

    (@roundupwp)

    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

    Thread Starter satyenbaldev

    (@satyenbaldev)

    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.

    Plugin Author roundupwp

    (@roundupwp)

    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

    Thread Starter satyenbaldev

    (@satyenbaldev)

    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!

    Plugin Author roundupwp

    (@roundupwp)

    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!

    Thread Starter satyenbaldev

    (@satyenbaldev)

    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?

    Plugin Author roundupwp

    (@roundupwp)

    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

    Thread Starter satyenbaldev

    (@satyenbaldev)

    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/

    Plugin Author roundupwp

    (@roundupwp)

    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

    Thread Starter satyenbaldev

    (@satyenbaldev)

    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!

    Plugin Author roundupwp

    (@roundupwp)

    No problem!

    I hope you’re having a good week.

Viewing 11 replies - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.