How to theme date combo input side-by-side?

Question

I'd like to theme a date combo field on a node edit form to be side by side, rather than stacked vertically, as shown below. Dates are popups, if that makes a difference.

I'm working with the admin theme Seven, which I've sub-themed, in order to override theme functions or CSS as needed. What is the approach should I take for this kind of customization? Moving the "to" label isn't strictly necessary, but would be nice if possible.

Before

After

Also wondering if there is some good reason why the to and from fields are arranged this way?

Edit: instructions for creating a subtheme are here: https://drupal.org/node/225125 This is an easy way to customize an Admin theme if needed.

Answer 1

Looking at the CSS provided by the module, the boxes are foreseen as block elements. Even the used classes on the form fields are date-no-float, so for some reason they don't want that the fields are shown in column layout ...

The fact that you used a sub theme for your admin, you can add these CSS styles (based on Seven theme) in your css file. These will create the desired result you want.

.date-no-float { float: left; width: auto; clear: none; }
.date-no-float > .form-item > label { float: left; margin: 34px 40px 0 30px; }
.start-date-wrapper { clear: left; }

Answer 2

You could also theme the output of the widget with this template override

http://drupalcontrib.org/api/drupal/contributions!date!date.theme/function/theme_date_combo/7