Hi there,

I'm using the more options page to offer visitors some terms from two vocabularies. I'm currently trying to style the page with just CSS and it has proven to be an absoloute nightmare because of the tables on the page. One vocabulary only has four terms and for some reason they're displayed in two columns instead of one. I've tried using floats to display the td's under eachother, but after every td some mysterious space showed up even though I've set the margin and padding to 0 for every element in the table (talk about lengthy css :-P). And this is just in firefox, IE7 has some other issues, while IE8 shows it almost the same as firefox.

Now, I won't start some furious semantics-rant on why tables shouldn't be used for layouts. :-)

Is it possible however, to change the theme to not use a table, or even to use a table which does not split the terms into columns?

Thanks in advance!

Comments

weseze’s picture

weseze commented

subscribing

I was thinking of hiding this premade guided search block and showing the real guided search block instead. It can be styled much easier! But for some reason this block doesn't show on the search home page...

weseze’s picture

weseze commented

After some searching and coding I came up with little module that can override most of the generated html with custom code. It doesn't do much but should make it easier to style most of it... And you can build on it to make a better module!

It basically overrides the theme function that makes the nasty tables. I've included some documentation of what's coming in to the function.

Put the files in 'sites/all/modules/extended_faceted_search' and enable the module.

extended_faceted_search.info

; $Id$
name = Extended Faceted Search
description = Extends faceted search to allow better theming off the guided search block on the search home page
core = 6.x

version = "6.x-1.x-dev"

extended_faceted_search.module

<?php
function phptemplate_faceted_search_ui_categories($facet, $categories, $stage)
{
    /*
    print '<!--';
    print_r($facet);
    print '-->';
        <!--taxonomy_facet Object
        (
            [_vocabulary] => stdClass Object
                (
                    [vid] => 10
                    [name] => NAME
                    [description] =>
                    [help] =>
                    [relations] => 1
                    [hierarchy] => 0
                    [multiple] => 1
                    [required] => 0
                    [tags] => 0
                    [module] => taxonomy
                    [weight] => 0
                    [language] =>
                    [nodes] => Array
                        (
                            [page] => page
                        )

                )

            [_sort] => count
            [_max_categories] => 0
            [_key] => taxonomy
            [_status] => 1
            [_weight] => -2
            [_path] => Array
                (
                )

        )
        -->
     */

    /*
    print '<!--';
    print_r($categories);
    print '-->';
<!--Array
(
    [0] => <span class="faceted-search-category"><a href="/?q=SEARCH_ENV_NAME/results/taxonomy%3A197">TERM_NAME</a><span class="faceted-search-count">&nbsp;(38)</span></span>
    [1] => <span class="faceted-search-category"><a href="/?q=SEARCH_ENV_NAME/results/taxonomy%3A211">TERM_NAME</a><span class="faceted-search-count">&nbsp;(26)</span></span>
    ...
)
-->
     */

    /*
    print '<!--';
    print_r($stage);
    print '-->';
<!--select-->
     */

    /**
     * You could implement a switch block here based on an admin setting to determine
     *  how to display the categories:
        switch (variable_get('extended_faceted_search_NAME', FALSE))
        {
            case 'table':
                ;
                break;

            default:
                break;
        }
     */

    $html = '<div class="faceted-search-guided-search-taxonomy-block">';

    if (is_array($categories) && !empty($categories))
    {
        foreach ($categories as $html_for_term)
        {
            $html .= $html_for_term;
        }
    }

    $html .= '</div>';

    return $html;
}
libeco’s picture

libeco commented

Thanks, that's a huge improvement! There's still a table around the categories though. And I also think that a listing of terms semantically belongs in an ul element so I slightly altered your code:

$html = '<div class="faceted-search-guided-search-taxonomy-block">';
... became ...
$html = '<ul class="faceted-search-guided-search-taxonomy-block">';
... and ofcourse the </div> changed to </ul>.

And I also changed
$html .= $html_for_term";
... to ...
$html .= "<li>" . $html_for_term . "</li>";

*edit*
Actually, I just placed this function in my template.php, I don't think I need a module for this change.

function phptemplate_faceted_search_ui_categories($facet, $categories, $stage) {
  $html = '<ul class="faceted-search-guided-search-taxonomy-block">';

  if (is_array($categories) && !empty($categories)) {
      foreach ($categories as $html_for_term) {
          $html .= "<li>" . $html_for_term . "</li>";
      }
  }

  $html .= '</ul>';

  return $html;
}
weseze’s picture

weseze commented

it isn't necesary to put it in a module, you can just put it in template.php.
I made a module of it because I run a multisite Drupal and want to make this hack available to all the sites without having to rewrite en reupload all of my template.php files...

libeco’s picture

libeco commented

I see. Well thanks for it anyway, it's a huge improvement!

cyberwolf’s picture

cyberwolf commented

Subscribing.

nicolasM’s picture

nicolasM commented

#3 works for me.
Thanks libeco !

ha5bro’s picture

ha5bro commented

Awesome, thanks wesley_2mpact!