Help with Themeing views filter block on Drupal 5.7 - is the attached code the most efficient theming method?
newmediaist - April 7, 2008 - 03:09
| Project: | Views Filter Block |
| Version: | 5.x-1.4 |
| Component: | Miscellaneous |
| Category: | support request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | closed |
Jump to:
Description
Hi -
First off thanks for the block, it has been very handy for me -
I'm rolling up my sleeves and trying to customize the filter block themes - I've come up the following which seems to work (somewhat) - by wrapping each filter block in its own div tags, I can then theme it via the CSS templates.
I'm new to this whole area of drupal, and was therefore wondering if there is a more efficient / "best practices" method for theming views filter blocks?
Thanks
In my theme's template.php:
/* Change the layout of the Views filter boxes */
function phptemplate_views_filterblock($form) {
if ($form['#view_name'] == 'view_filter_block_0') {
$form['filter2']['#size']=15;
$form['filter3']['#size']=15;
$form['#prefix']='<div class="views_filter_block_0">';
$form['#suffix']='</div>';
$form['submit']['#value']='New Submit Text';
}
// return theme_views_filters ($form);
return drupal_render($form);
}
#1
Another option is to go to the page where you are viewing the views filter block form and click view source. Grab the HTML that is your form. You can then create a custom block with this HTML as the content including whatever edits you'd like to make to it. For instance, I didn't want the filters to be select fields (dropdowns)
eg.
<select name="foo"><option value ="volvo">Volvo</option>
<option value ="audi">Audi</option>
</select>
and instead I wanted checkboxes, so I changed the HTML to be,
<input type="checkbox" name="foo" id="Volvo" value="volvo"> <label for="Volvo">Volvo</label><input type="checkbox" name="foo" id="audi" value="Audi"><label for="Audi">Audi</label>
Obviously, any CSS elements, likie divs, etc. that you want to add in can also be added. I think this method will give you more flexibility when theming.
#2
indeed this is exactly what i did, i let the views filter block to handle the action atrribute for the form and all the arguments, and just build my own form in a custom block with pure html based on the one viewsfilterblock created in the first place.
#3
This codes works for me, but it removes all the labels (legends) for each view field. As a result, the user doesn't know what the select fields (drop downs) do.
Is there any way to use the above code, but retain the labels (legends)?
The only draw back with this method is that if you make any changes to the View (or the taxonomy categories/CCK fields that are linked to the View), the custom HTML block doesn't update to reflect the changes.
^_^
#4
this is great. is there anyway to keep them open or get rid of the collapsible capability?
#5
OK, cracked it, credit to Jak from Netiva for sorting this one on my behalf, forget taking code from view source, as outlined, once the view is amended this code is useless. We have a solution that themes every view filter block on the site, and allows the label to go in for each, plus a little CSS for extra theming / positioning / styling etc.
Firstly add the following to your template.php file:
function phptemplate_views_filterblock($form) {
$view = $form['view']['#value'];
// make the 'q' come first
$output = drupal_render($form['q']);
foreach ($view->exposed_filter as $count => $filter) {
$newform["fieldset$count"] = array(
'#type' => 'fieldset',
'#title' => $filter['label'],
'#collapsible' => false,
'#weight' => $count - 1000, // we'll never have this many filters
);
$newform["select$count"]['#collapsed'] = FALSE;
}
foreach ($form as $field => $value) {
if (preg_match('/(op|filter)([0-9]+)/', $field, $match)) {
$curcount = $match[2];
$newform["fieldset$curcount"][$field] = $value;
if (!isset($newform["fieldset$curcount"]['#weight'])) {
$newform["fieldset$curcount"]['#weight'] = $value['#weight'];
}
}
else {
if ($field == 'submit' || drupal_substr($field, 0, 1) == '#') {
unset($curcount);
}
if (isset($curcount)) {
$newform["fieldset$curcount"][$field] = $value;
}
else {
$newform[$field] = $value;
}
}
}
foreach ($view->exposed_filter as $count => $filter) {
if ($filter['is_default']) {
$newform["fieldset$count"]['#collapsed'] = FALSE;
$open = TRUE;
}
else {
$value = $newform["fieldset$count"]["filter$count"]['#default_value'];
if (isset($value)) {
if (is_array($value)) {
foreach ($value as $key => $item) {
if ($item != '') {
$newform["fieldset$count"]['#collapsed'] = FALSE;
$open = TRUE;
}
}
}
elseif ($value != '') {
$newform["fieldset$count"]['#collapsed'] = FALSE;
$open = TRUE;
}
}
}
}
if (!$open) {
$newform["fieldset0"]['#collapsed'] = FALSE;
}
$newform['submit']['#value']='Search';
return theme('views_filterblock_output', $newform);
}
then add the following to your theme's CSS...
#views-filterblock fieldset {
border: 0;
margin: 0;
padding-bottom: 0;
padding-top: 0;
}
#views-filterblock legend {
font-weight: bold;
float: left;
width: 100px;
}
#views-filterblock .form-select {
float: right;
width: 10em;
margin-top: -2.75em;
}
#views-filterblock .form-submit {
margin-bottom: 3em;
}
#views-filterblock #edit-submit {
float: right;
margin: 0.5em;
margin-top: -1.5em;
}
#views-filterblock {
border-bottom: 0px;
}
You can see this in action at www.kitchengoddess.co.uk/cooking/recipe-finder/results and www.jsestateagents.co.uk
Regards
Rob Wild
#6
How exactly can this be used and how can I customize particular block - e.g . the length of the fields, the submit button, etc.?
Thanks
#7
Formatting / styling by different filter block I don't know, the supplied code won't do that. We have deployed this particular version using panels and as so used the class function supplied with that to name each individually and assign backgrounds.
All the rest can be controlled via CSS, take a look around www.kitchengoddess.co.uk/index.php and have a look at the CSS on those filter blocks. We have amended the CSS from that in the previous post to include the following.... (template.php content stays the same as above)
#views-filterblock fieldset {
border: 0;
margin: 0;
padding-bottom: 0;
padding-top: 0;
}
#views-filterblock legend {
font-weight: bold;
margin: 0;
padding: 0;
}
#views-filterblock #edit-submit {
margin: 1px 0;
}
#views-filterblock {
border-bottom: 0px;
}
#views-filterblock #edit-filter1, #views-filterblock #edit-filter0, #views-filterblock #edit-filter2, #views-filterblock #edit-filter3, #views-filterblock #edit-filter4, #views-filterblock #edit-filter5, #views-filterblock #edit-filter6, #views-filterblock .form-select {
width: 250px;
margin-top: -2px;
}
#8
Automatically closed -- issue fixed for two weeks with no activity.
#9
I've already asked here, but this seems closer:
I'm sure this can do what I'm looking for...
@MonoRob: HOW did you deploy this using panels? what exactly do you mean?
I see on your site just what i'm looking for - but can't seem to make it work...
Does this have something do to with arguments? I don't use any in my view... must/should I?
Any help would be highly appreciated! thanks!
#10
Have you come across panels?? Panels will let you control the layout of a page above and beyond the stanard left / right sidebars etc, using this module also provides each element within the panel with a css class and ID, meaning you can control the style very accurately with any semi decent standard of CSS skills.
Unfortunately between posting originally and now the client has decided to hard code the filter blocks, which is a big kick i the teeth for this achievement, but what can you do??
Let me know if this helps??
#11
@MonoRob: I do know panels, and use it oftenly. the problem I think i'm having is more to do with arguments and passing those around between views / filter blocks / panels.
I will have to investigate into this more deeply...
Thanks for the help!
#12
subscribe
#13
Nice work but the code above doesnt work for me ( drupal 5). Im redirected to the frontpage when i hit the submit button