submit event form, CSS ???

[kimberly]

Hello, first off, great plugin! I am seeking help with where or how to change the colors for the form to “submit an event”

#1 I got the calendar page and the submitted event page looking how I want by searching this site
http://roanokecraftbeer.com/calendars/
http://roanokecraftbeer.com/calendar/parkway-brewing-2nd-annual-oyster-roast/

#2 but the form for the “submit an event” doesn’t look good, the background colors (white), font colors, form box colors (grey), all need to be changed and i’m not sure where or how to do it, can anyone help?

here is the form.. http://roanokecraftbeer.com/calendars/community/add

any and all help is greatly appreciated, thanks, Joe

[kimberly]

anyone? I just need to get the /add page looking good and I can start promoting my new community calendar, thanks again in advance!

[George]

Hey Kimberly,

While we only offer very limited support for customizations and style tweaks, the good news is that you should be able to achieve most of the customizations you’re aiming to make with just a bit of custom CSS.

For example, here’s a bit of custom CSS I tested on your site to remove that white backgrounds on form field boxes:

.tribe-events-community-details {
    background: none !important;
}

Here’s how that looked on your site → https://cloudup.com/cjj9KQerExX

I hope this helps get you started! Try adding it to the bottom of your theme’s style.css file and see if it helps.

For further specific tweaks, I’d definitely recommend installing and learning the basics of a free tool like Firebug if you use FireFox, or the Developer Tools for either Safari or Chrome.

All of these free tools have a thing called an Inspector Tool within them, which you can use to basically just mouse over specific elements whose styling you’d like to change, and see what CSS you’d have to write to change the styles.

Let us know if this helps!

Cheers,
George

[kimberly]

Thanks George!, after a little tweaking, I got the look I was after on all pages with this…

.single-tribe_events .tribe-events-event-meta, .tribe-events-community-details { background: #4B4A48; }
}

just a couple more things if possible

#1 is the length value for the time boxes on the /add page in a specific file or is it a CSS value? I am wanting to change the length to a smaller value so that I can get hours/minutes/am-pm lined up beside each other

#2 how can I change the background color of the submit button to match my #4B4A48 value? i tried adding some input.button values to the css but that didn’t work

thanks again in advance, if this is outside the realms of support I understand

Joe

[George]

Hey Joe,

I’m glad you were able to get that CSS working!

As for your other questions, these things are a bit outside the scope of support here…but here are some thoughts 🙂

For #1, unfortunately, the layout here is dictated by both CSS and the HTML of the submission page itself – the HTML, specifically, has these elements contained within an HTML table, which has some pretty specific laying-out of elements and takes some working to change. There are two solutions here that I can think of – first, you can try to force the table rows into alignment anyways, though this will take a lot of CSS and I don’t know exactly how to do it in a reliable way. Secondly, you can alter the layout of the submission page itself, for which you should consult our official Themer’s Guide → https://theeventscalendar.com/knowledgebase/themers-guide/

As for #2, try CSS like the following:

.tribe-events-community-footer input#post {
    background: #4b4a49;
}

Here’s how that looks for me – nice! – https://cloudup.com/cKjwAuzveXe

I hope this helps, Joe!

Cheers,
George

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts