Sanjoy Roy

[MCM, MCP, SCJP] – Senior PHP Programmer

Magento – How to display 3 select boxes in a single row in advance search page (li)?


Steps:
Modify the /public_html/skin/frontend/default/f001/css/custom.css file:
(f001 is your defind template)

At the end add the following: custom.css
————————————————————————–
#rim_diameter_inches_li .multiselect {width:70px;}

#tyre_width_li .multiselect {width:50px;}

#profile_li .input-box .multiselect {width:60px;}

#rim_diameter_inches_li {width: 60px; float: left; }
#tyre_width_li{float: left;background-image: url(../images/search-splitter.gif);
background-repeat: no-repeat;
background-position: right center;}
#tyre_width_li .input-box {width: 70px; }

#profile_li {
width: 70px;
float: left;
}
#profile_li .input-box {width: 50px;  float: left; }
#rim_diameter_inches_li .input-box {float: left; width: 50px;}
———————————————————————–

The form fields are:
Defind in /public_html/app/design/frontend/base/default/template/catalogsearch/advanced/form.phtml file:
<pre>

<ul id=”advanced-search-list”>
<li id=”tyre_width_li”>
<label for=”tyre_width”>Tyre Size</label>
<div>
<select name=”tyre_width” id=”tyre_width” title=”Width (mm)”><option value=”” selected=”selected”>All</option><option value=”54″>175</option><option value=”53″>185</option><option value=”67″>195</option><option value=”80″>205</option><option value=”79″>215</option><option value=”78″>225</option><option value=”77″>235</option><option value=”76″>245</option><option value=”75″>265</option><option value=”74″>275</option><option value=”73″>287</option><option value=”72″>295</option><option value=”71″>314</option><option value=”70″>315</option></select>                        </div>

</li>
<li id=”profile_li”>
<label for=”profile”></label>
<div>
<select name=”profile” id=”profile” title=”Profile”><option value=”” selected=”selected”>All</option><option value=”26″>35</option><option value=”25″>40</option><option value=”24″>45</option><option value=”23″>55</option><option value=”22″>60</option><option value=”21″>65</option><option value=”20″>70</option><option value=”19″>75</option><option value=”18″>80</option><option value=”17″>NA</option></select>                        </div>

</li>
<li id=”rim_diameter_inches_li”>
<label for=”rim_diameter_inches”></label>
<div>
<select name=”rim_diameter_inches” id=”rim_diameter_inches” title=”RIM diameter inches”><option value=”” selected=”selected”>All</option><option value=”36″>14</option><option value=”35″>14C</option><option value=”88″>15</option><option value=”87″>16</option><option value=”86″>16C</option><option value=”85″>17</option><option value=”84″>18</option><option value=”83″>19</option><option value=”82″>20</option><option value=”81″>22.5</option></select>                        </div>

</li>
<div style=”clear: both; padding-left: 170px;”><b>WIDTH</b>&nbsp;(mm)&nbsp;/&nbsp;<b>PROFILE</b>&nbsp;<b>RIM</b> (diameter inches)
</div>                                    <li id=”size_li”>
<label for=”size”>Size</label>
<div>

<input name=”size” id=”size” value=”” title=”Size” type=”text”>
</div>

</li>
<li id=”speed_li”>
<label for=”speed”>Speed</label>
<div>
<input name=”speed” id=”speed” value=”” title=”Speed” type=”text”>
</div>

</li>
<li id=”brand_li”>
<label for=”brand”>Brand</label>
<div>
<input name=”brand” id=”brand” value=”” title=”Brand” type=”text”>
</div>

</li>
<li id=”pattern_li”>

<label for=”pattern”>Pattern</label>
<div>
<input name=”pattern” id=”pattern” value=”” title=”Pattern” type=”text”>
</div>

</li>
<li id=”price_li”>
<label for=”price”>Price</label>
<div>

<input name=”price[from]” value=”” id=”price” title=”Price” type=”text”>
<span>-</span>
<input name=”price[to]” value=”” id=”price_to” title=”Price” type=”text”>
<small>(AUD)</small>
</div>
</li>
</ul>

</pre>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: