Time/Date form elements not lining up horizontally

[Craig]

Hi Guys,
Time and date form elements are rendering vertically on Twenty Ten. Take a look if you like http://justauditions.com/auditions/community/add/ . I have looked for .bubble as mentioned in similar posts but was not able to find it in the style.css for 2010. Suggestions welcome.

Side note question. Is there a preferred theme that fits best with the pro and community suite of plugins. I’m only at the setup stage of things at the moment so it will be easy to change themes to better suit the plugins. The sites main purpose is to host the events plugins so I’m flexible on theme.

Craig

[Joyce Grace]

Hello Craig, I tried to click on that link, and the only other page you have set up there, and it seems that only people with a login can see the page. I will need to see it to be able to understand fully what you mean by “vertical.”
Or perhaps you got it sorted out?

Regarding themes, Genesis would work well, and we have a full tutorial on getting The Events Calendar to work with that framework: https://theeventscalendar.com/tutorial-integrating-the-events-calendar-w-genesis/ (Genesis is my personal favourite, though it does take a bit of set-up time to get it to fit into a child theme easily)

With Thesis, Headway and the WooThemes, while they don’t integrate seamlessly with our plugin right away, we see them a lot in our support forums, so people are definitely getting by and getting creative with those.

Rob has told me this as well, “Brandon at Epic Era (http://blog.epicerastudio.com/) does solid themes that we know integrate with our plugins, and provide pretty solid responsive layouts at that. I often recommend him when people ask what themes we like.”

Finally, we have a showcase! Maybe it will inspire you 🙂 https://theeventscalendar.com/support/forums/topic/showcase-2-0/

If you want to do something custom, or need to modify anything, you might want to check out our Themer’s guide: https://theeventscalendar.com/support/documentation/events-calendar-themers-guide/

I hope this all helps, and do let me know about the “vertical” alignment stuff when you get a chance!

[Craig]

Sorry Joyce,
I should have known better than sending you a link to a member page. I have set up a username and password for you to use so you can see the problem better. UN: bob PW: bob. The page can be found at My Account>Add an Audition. Here is the link for the sign in page to get you started http://justauditions.com/sign-in/ .
During my testing of the plugins in 2011 on my local host it was working fine. Mind you I had switched to a one column format with no sidebar and modified the width of the page. Thing is, I want to keep the sidebar for other info. This is partly why I asked about preferred themes. I was curious to see if you had developed the plugins on 2010 or 2011. If that had been so then they would render as you intended. I did consider running the calendar on Thesis but didn’t want the complexity that comes with it. Thesis is great in most cases but not for everything. I will also take a good look at Epic Era. Good to know that there are some themes well suited to the calendar and community plugins. Even so, it would be great if you know how to solve this rendering problem with the Time/Date form elements.

Thanks
Craig

[Rob]

Thanks for the follow-up, Craig. Just wanted to confirm that while I’m not sure if Joyce saw this (our email notifications have been misfiring on the forum here), I’ve asked her to take a look when she hits the forums this evening. Stay tuned and thanks for your patience so far.

[Joyce Grace]

Hi Craig,
I see what you mean, but just so we’re on the same page, you are referring to how the “@” symbol is above the date drop-down lists, and then the date field is below those drop-downs right? I don’t see anything else showing up “vertical.” But if you’re referring to the CSS, I only saw one thing in your style.css that could be affecting this:
There is a “vertical-align: baseline;” under:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {

BUT – baseline is default, so I don’t know why it’s giving you this problem. You can try to change that to see what happens (being diligent to back up your files first of course). But since this is perplexing me, what I’m going to do is get Jonah on this and hopefully he’ll reply by tomorrow.

Sorry I wasn’t much help!

[Jonah]

Hi Craig,

I’m not sure how the ‘@’ symbol is getting in there but I have a hunch it might be due to your theme using the wpautop function which is inserting extra markup into the code. That, or you edited the Community events template views and accidentally put in the character.

As for styling, your theme is introducing styles that have a higher specificity (score) in the CSS and so are being applied over the plugins default styling. What you’ll need to do is play around with the CSS to normalize things. For instance your theme is applying:

#content, #content input, #content textarea {
color: #333;
font-size: 16px;
line-height: 24px;
}

…you can override that by applying some CSS with a higher specificity like so:

#content #tribe-community-events input {
color: #000;
Font-size: 13px;
line-height: 21px;
}

…for example.

The rest is up to you to figure out how to normalize things and get everything lined up how you want.

I hope that helps!

Cheers,
Jonah

[Craig]

Hi Rob, Joyce, Jonah. I just now saw you responses. I must have forgotten to tick the notify box. I’ll have a poke around and see how it goes. Thanks for your ideas. Just to let you know the problem came right off the bat of a fresh install of 2010. Kind of surprised me that it rendered that way.

[Craig]

Can I ask, what div contains the start and end date/time elements and what page can find this in. I’ve searched the code on and off for days now and can’t seem to find it.

[Craig]

Turns out that a plugin called Frontend Membership from net chillies is changing the form layout.
I also found the div info that I was looking for.
Thanks for your time and help on this one. You have given me some very useful information and some good cluse on how to solve my problem.

[Jonah]

Hi Craig,

Glad you got it figured out. Let us know if there’s anything else you need with this.

– Jonah

[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