11

I've created a view with a number of exposed filters, but it is pretty ugly looking.

enter image description here

I'd like to improve the theming, including wrapping the whole thing in a fieldset as well as grouping some of the other elements (like pairing the published and updated inputs), but not sure how to go about this.

I tried to var_dump the form, but it seems to go on forever and my browser locks up, so I can't easily learn anything about the form that way.

I also tried putting the form as a fieldset child in another form, but getting all the form ID information and so on proved problematic (although, I did get the fieldset styling).

Anyone got any pointers?

Update:

I copied over the template from the module to my site's theme directory, and made a start.

<fieldset> <legend>Filters</legend> <div class="views-exposed-form"> <div class="views-exposed-widgets clear-block"> <?php foreach($widgets as $id => $widget): ?> <div class="views-exposed-widget"> <?php if (!empty($widget->label)): ?> <label for="<?php print $widget->id; ?>"> <?php print $widget->label; ?> </label> <?php endif; ?> <?php if (!empty($widget->operator)): ?> <div class="views-operator"> <?php print $widget->operator; ?> </div> <?php endif; ?> <div class="views-widget"> <?php print $widget->widget; ?> </div> </div> <?php endforeach; ?> <div class="views-exposed-widget"> <?php print $button ?> </div> </div> </div> </fieldset>

I can't seem to figure out how to pair up the date fields - I need to somehow modify the widget properties so I can wrap them in HTML (using hook_form_alter doesn't work because the #prefix and #suffix are added to $widget->widget so they break the output)

Improve this question

8 Answers 8

Reset to default
20

Theming Views' exposed form is hard because it doesn't behave like most forms and use its own label mechanism. So, you can't simply use a form_alter hook to add #prefix and #suffix to elements. But using THEME_preprocess_views_exposed_form, you can craft your own suffix/prefix mechanism:

function THEME_preprocess_views_exposed_form(&$variables) { if ($variables['form']['#id'] == 'views-exposed-form-VIEWNAME-DISPLAYID') { foreach ($variables['widgets'] as $id => &$widget) { switch ($id) { case 'first_date_id': $widget->prefix = '<div class="date-widgets-wrapper">'; break; case 'last_date_id': $widget->suffix = '</div>'; break; } } } }

and in the template file

<fieldset> <legend>Filters</legend> <div class="views-exposed-form"> <div class="views-exposed-widgets clear-block"> <?php foreach($widgets as $id => $widget): ?> <?php if (!empty($widget->prefix)) print $widget->prefix; ?> <div class="views-exposed-widget"> <?php if (!empty($widget->label)): ?> <label for="<?php print $widget->id; ?>"> <?php print $widget->label; ?> </label> <?php endif; ?> <?php if (!empty($widget->operator)): ?> <div class="views-operator"> <?php print $widget->operator; ?> </div> <?php endif; ?> <div class="views-widget"> <?php print $widget->widget; ?> </div> </div> <?php if (!empty($widget->suffix)) print $widget->suffix; ?> <?php endforeach; ?> <div class="views-exposed-widget"> <?php print $button ?> </div> </div> </div> </fieldset>
Improve this answer
7

You can copy views-exposed-form.tpl.php from sites/all/modules/views/theme to your theme path to override the template.

Improve this answer
1
  • You can also override for specific views only with patterns like views-exposed-form--view_id.tpl.php or views-exposed-form--view_id--display_id.tpl.php, more info Commented May 16, 2016 at 10:21
3

Also take a look at the Better Exposed Filters module. You'll need the -dev release to get the collapsible filters option, though I'm hoping to get a proper 1.1 release out soon...

Improve this answer
3

You should look into what's in the form['#theme'] item. Better way to do this (better than var_dump()) would be using dsm($form) or even kpr($form), these functions will be availible after you install the devel module (http://drupal.org/project/devel). form['#theme'] should be an array of about 7 elements. These elements are names of theme hooks that are called when this form is being rendered. you can use them to implement you own way of themeing a form.

One of the items will be called views_exposed_form__VIEW_NAME__DISPLAY_ID.

In your module (if you have one) there should be an implementation of hook_theme()

function MYMODULE_theme($existing, $type, $theme, $path) { return array( 'views_exposed_form__VIEW_NAME__DISPLAY_ID' => array( 'function' => 'my_exposed_form_theme_function', 'render element' => 'form', ) ); } // somwhere later in code function my_exposed_form_theme_function($vaiables) { //$vaiables['form'] contains a form array //to display a form element call drupal_render($vaiables['form']['some element']) //don't forget to call drupal_render($form) //after you are done with rendering individual elements // //you can use template_preprocess_views_exposed_form() from // views/theme/theme.inc as an example return "concatenated results of multiple drupal_render() calls"; }
Improve this answer
2

In previous situations I have used Hook_form_alter() to add prefix and suffix to form elements to wrap them up in div which can then be styled. Not sure about wrapping in fieldsets though.

eg. 

$form['submitted']['full_name']['#prefix'] = '<div class="background">'; $form['submitted']['message']['#suffix'] = '</div>';
Improve this answer
1

Use Drupal's hook_form_FORM_ID_alter to modify the form. This is what solved my problem of prefixing a £ character to my price field (put this in your custom module):

function THEME_form_views_exposed_form_alter(&$form, &$form_state, $form_id) { // check this is the right form if ($form['#theme'][0] == 'REPLACE_THIS') { // add the prefix $form['price']['min']['#prefix'] = "£"; } }
Improve this answer
1

Views exposed form layout (D7) module will help you with views exposed form theming.

Improve this answer
0

in the edit page of a view we can check theme information (bottom right corner). It gives the information regarding the template files used by Drupal to render the different parts of the view on screen. By default the template files provided by the views module(inside its theme folder) is used, but in case, where we want to modify the way a view is displayed we can override those template files with custom template files that we can put inside our own custom theme folder (or the theme that is going to be used to display this view)

This theme information shows us how to name a file according to the hierarchy (or the scope of the effect of the template file you are going to override the views own templates.)

Now, this theme information may not show all the template files that the view uses to render this specific view.

so, go to sites/all/modules/views/theme and copy the views-exposed-form.tpl.php (because in this case we want to override the default for rendering filters!)and paste it inside your own theme folder, now you have to follow the same method to control the effect of this overriding template file that you have put inside your own theme folder by renaming it accordingly. e.g. views-exposed-form--your view name-pane name.tpl.php (you will understand the nomenclature by looking at theme:information in the view's edit page)

now you can add css to individual widgets (generated by filter handlers) in this template file and those settings will be applied to the filters.

visit http://eureka.ykyuen.info/2011/07/25/drupal-theme-the-exposed-filter-in-views/

Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.