Input boxes colors

[Michelle]

I tried changing the color of the input boxes in my theme but that didn’t work so I changed the css files directly in the plugin and it still didn’t work to change the colors on my site. The text color appears to change fine but not the input boxes. Where are you hiding this?

.tribe-events-style-full .woocommerce .quantity input {
background-color: #cc0033;
border: 1px solid #000000;
color: #FFFFFF;
}
.tribe-event-tickets input[type=”date”],
.tribe-event-tickets input[type=”time”],
.tribe-event-tickets input[type=”datetime-local”],
.tribe-event-tickets input[type=”week”],
.tribe-event-tickets input[type=”month”],
.tribe-event-tickets input[type=”text”],
.tribe-event-tickets input[type=”email”],
.tribe-event-tickets input[type=”url”],
.tribe-event-tickets input[type=”password”],
.tribe-event-tickets input[type=”search”],
.tribe-event-tickets input[type=”tel”],
.tribe-event-tickets input[type=”number”],
.tribe-event-tickets textarea,
.tribe-event-tickets select {
background-color: #cc0033;
border: 1px solid #000000;
color: #FFFFFF;
}

.tribe-event-tickets-plus-meta input[type=”text”],
.tribe-event-tickets-plus-meta input[type=”email”],
.tribe-event-tickets-plus-meta input[type=”url”],
.tribe-event-tickets-plus-meta input[type=”password”],
.tribe-event-tickets-plus-meta textarea {
background-color: #cc0033;
border: 1px solid #000000;
color: #FFFFFF;
}

.tribe-event-tickets-plus-meta select {
background-color: #cc0033;
border: 1px solid #000000;
color: #FFFFFF;
}

[Geoff B.]

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

Thank you for reaching out to us.

We are sorry to hear about your challenges changing the input box colours.
I would love to help you with this topic.

Because the display is deeply impacted by both your theme and your specific settings, would it be possible to get an example URL that includes such input fields on your site ?

This way, we will be able to minimize the back and forth.

Hang in there and have a good weekend,

Geoff B.

[Michelle]

Hi Geoff. It appears the changes are only not occurring on the RSVP. They work on ticket purchases.

https://www.knitnpurl.com/event/pools-in-the-river-kal/2017-03-15/ should look like
https://www.knitnpurl.com/event/entrelac-drawstring-bag/2017-03-14/

[Geoff B.]

Good evening Michelle,

Thank you for your answer.

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

.tribe-tickets-rsvp .tribe-ticket.quantity input.tribe-ticket-quantity {
background-color: #cc0033;
color: white;
}

Let me know if that helps.

Have a great day!

Geoff B.

[Michelle]

Hi Geoff. Goodness, I never received an email that you responded to this but that code did work. However, the text boxes that need to be completed when 1 RSVP is selected are still grey. https://www.knitnpurl.com/event/not-sew-vest-kal/2017-03-11/ Please select 1 to RSVP and you will see the Full Name, Email text entry boxes and RSVP selection boxe are still grey.

Thanks!

[Geoff B.]

Good evening Michelle,

Thank you for writing back.

I am glad that we are making progress on this one.

Unfortunately, due to a very high level of requests we are receiving, I will only be able to complete your request this weekend.

We apologize for the delay.

Thank you for your understanding.

Best regards,

Geoff B.

[Geoff B.]

Hello again Michelle,

Thank you for hanging in there.

Based on what I can see on your site, it looks like the boxes are now white, but the text is still light grey.

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

textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input, select { color: black !important }

Additionally, if you are interested in becoming independent with CSS rules, I would highly recommend the following: https://theeventscalendar.com/knowledgebase/using-google-chrome-developer-tools/

Please let me know if you need anything else.

Best regards,

Geoff B.

[Michelle]

I wanted the input boxes red (not white) like the rest of the site. However, your code suggestion worked for the bgcolor.

textarea, input[type=”text”], input[type=”password”], input[type=”datetime”], input[type=”datetime-local”], input[type=”date”], input[type=”month”], input[type=”time”], input[type=”week”], input[type=”number”], input[type=”email”], input[type=”url”], input[type=”search”], input[type=”tel”], input[type=”color”], .uneditable-input, select { background-color: #cc0033 !important }

Thanks!

[Geoff B.]

Good morning Michelle,

I am super stoked that this worked out for you.

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