Design Guide - Search Form

Move the Form

The search filter can be moved from the left column to the right column, or any other block references your template provides. For this you simply need to override some layout XML. The way we recommend you make layout XML changes is to let the extension's core files reside in the default theme. Then create your own custom theme. It will automatically inherit from the default theme. Then you can override or copy over just the files you want to change. In this way your changes will not get overwritten when you do upgrades.

    <reference name="right">
        <block type="vaf/search" name="vaf_search" template="vaf/search.phtml" before="-" /> 
    </reference>
    
Change to, for example
    <reference name="left">
        <block type="vaf/search" name="vaf_search" template="vaf/search.phtml" before="-" /> 
    </reference>
    

Use in a .phtml template

You can use the search block from within a Magento template, for example page/html/header.phtml to put a search in the header (this is good in "horizontal" mode).

<?php
$block = $this->getLayout()->createBlock('vaf/search');
$block->setTemplate('vf/vaf/search.phtml');

echo $block->renderView();
?>
    

Use in CMS page

(multiple vehicle searches per page)

Using the following in the content of a CMS page, will pull in the vehicle search.

{{block type="vaf/search" block_id="vaf_search2" template="vf/vaf/search.phtml"}}

However, if you want to use multiple vehicle searches, some in horizontal mode, some in vertical, it would be done in the following manner. First search.phtml would be duplicated to search-horizontal.phtml, next find the line that looks like the following:

echo $helper->display( $this, $level, $prevLevel );

Change to:
echo $helper->display( $this, $level, $prevLevel, false );

Next, instead of calling in the block like so:

{{block type="vaf/search" block_id="vaf_search2" template="vf/vaf/search.phtml"}}

You would use:
{{block type="vf/vaf/search" block_id="vaf_search2" template="vaf/search-horizontal.phtml"}}

Display Horizontally

To display the search horizontally use the [search]->insertBrTag setting to turn off the <br> tags. Then open vaf/vaf.xml and change reference="left" to reference="content" (or another named reference for where in the template the block should be displayed). You must put it in a wide parent block. If you leave it on the sidebar, the br tag will have no visible effect.

Style With CSS

You will see there is a vafStyle.css.php that comes with the extension. You are encourated to NOT put your CSS into this file, since it gets overwrote on upgrades. Please put all of your own custom CSS into your actual theme specific file. (ex skin/frontend/default/default/boxes.css)

You can easily target specific parts of the search with your CSS to style it. First we will ensure all labels show on their own line.

#vafForm>label {
    display:block;
}
You can also target all the selects
#vafForm>select {
    border:1px red solid;   
}
Or style only a specific select box
#vafForm>#makeSelect {
    border:1px blue solid;
}