css for styling Drupal form labels & fields inline?
Does anyone have a generic CSS rule set for styling Drupal forms so that the field labels appear inline with their fields? I've worked on some projects where forms needed to be styled that way and while I've been able to get them working I've not been overly satisfied with the end result. I'm hoping that someone with more CSS chops might have already conquered the problem and be willing to share their solution.
I wrote a rough proof-of-concept Drupal module to apply Uni-Form CSS markup to Drupal forms, but for a variety of reasons (see "Uni-form Cons" below), it ended up being more kludgey than I had hoped. Does anyone have a more Drupal-specific CSS file, that I might use in the module instead of Uni-Form? If not, is anyone interested in working with me to come up with one?
Uni-form Cons
* Drupal's default form output isn't what Uni-Form expects, so there was a fair amount of theme overriding required.
* The Uni-Form inlineLabel styling doesn't seem to work well for fields with more than 2 or 3 checkboxes or radio buttons.
* Uni-Form's "blockLabels" style is similar to Drupal's default style, so about half of the Uni-Form CSS is superfluous within Drupal.
* Uni-Form is CreativeCommons licensed, so it would have to be downloaded separately.
* Uni-Form also includes a jquery script for highlighting fields, but it requires that the Jquery Update module be applied in order to work properly.
overriding a theme function
Not only the css can be tweaked, but you can override the way drupal output each form item.
on api.drupal.org, look for the theme function that create the form item :
http://api.drupal.org/api/function/theme_form_element/5
it looks like this :
<?phpfunction theme_form_element($element, $value) {
$output = '<div class="form-item">'."\n";
$required = !empty($element['#required']) ? '<span class="form-required" title="'. t('This field is required.') .'">*</span>' : '';
if (!empty(
$element['#title'])) {$title = $element['#title'];
if (!empty($element['#id'])) {
$output .= ' <label for="'. $element['#id'] .'">'. t('!title: !required', array('!title' => filter_xss_admin($title), '!required' => $required)) ."</label>\n";
}
else {
$output .= ' <label>'. t('!title: !required', array('!title' => filter_xss_admin($title), '!required' => $required)) ."</label>\n";
}
}
$output .= " $value\n";if (!empty(
$element['#description'])) {$output .= ' <div class="description">'. $element['#description'] ."</div>\n";
}
$output .= "</div>\n";return
$output;}
?>
Now you just need to drop this into your template.php file, replace 'theme_form_element' by '[name of your theme]_form_element' to activate it for your theme, and adapt the output markup as needed.
Then you can add your custom css :)
The Drupal Agency >> www.raincitystudios.com <<
Me on the Web >> www.couzinhub.com <<
thanks
Thanks for the response. I was aware of the ability to override theme output, but have you used that technique to output form field labels to appear inline with their fields. If so, do you have any code examples for that? It appears that the code above is the original theme_form_element() function, not an override example.
Also, when doing the overriding at the theme layer like that, is there an easy way to avoid having it rewrite all form output? In most cases, I'd like to avoid overriding Drupal's built-in administration forms.
When you're using a theme
When you're using a theme function, you just define what's going to be output by this function. So if you just need to change the label, find which theme function outputs them, and just twaek it in your template.php.
The thing is that if you only want to modify the template of the label, you have to use the entire theme function that contains the output for the label. You can't, in drupal 5, only decide to modify the label. But the function above is really only for label and descrption, so it's very close to what you want I think.
for example, in the following, I just modify the function so the label is just a span, so it becomes inline :
<?phpfunction theme_form_element($element, $value) {
$output = '<div class="form-item">'."\n";
$required = !empty($element['#required']) ? '<span class="form-required" title="'. t('This field is required.') .'">*</span>' : '';
if (!empty(
$element['#title'])) {$title = $element['#title'];
if (!empty($element['#id'])) {
$output .= ' <span>'. t('!title: !required', array('!title' => filter_xss_admin($title), '!required' => $required)) ."</span>\n";
}
else {
$output .= ' <span>'. t('!title: !required', array('!title' => filter_xss_admin($title), '!required' => $required)) ."</span>\n";
}
} $output .= " $value\n";
if (!empty(
$element['#description'])) {$output .= ' <div class="description">'. $element['#description'] ."</div>\n";
} $output .= "</div>\n";
return
$output;}
?>
Hi
Hi,
Can we apply uniform- css to drupal forms.Just i tried it.I am not getting any idea about this.If you don't mine,please send some of the samples.
How I applied uniform-css in drupal themes?
Thanks in advance Matt
Regards,
Raj.
one example...
(Tested in Drupal 6)
For a specific field I just use
.field-class label, .field-class{
display: inline;
}
For multiple fields you can try replacing .field-class with something more generic, like .form-item. Each field is structured more or less like this:
<div class="form-item" id="edit-field-name-wrapper"><label for="edit-field-name">Name: </label>
<input maxlength="x" name="name" id="edit-field-name" size="y" value="z" class="form-text" type="text">
</div>
Where "field-name" is your field's name as it appears in the $form (between brackets [ and ]).
You could also prefix and suffix the form element with your class of choice if you have control over the form.
Depending on the needs, I either put the CSS in the theme, or in a separate CSS file and add it in my module only on specific pages. Hope this helps!
I'm no CSS expert, so if anyone has better suggestions, feel free to jump in.