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 date combo before

After date combo 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.

2 Answers 2


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; }
  • 1
    @ Mike Vranckx - Excellent. This worked straightaway, and the result looks just like the After screen above.
    – Dave Bruns
    Nov 17, 2013 at 17:40

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


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.