Changing Meta Fields Layout

[freddykruegs]

Let me apologize in advance for another dumb question from a newbie. The search form on my website has categories and meta fields. I like the way my categories are displayed inline but my meta fields are all jumbled together in a row right beneath them.

I was hoping there was a way to configure the appearance/layout of my meta fields using CSS in my "search_template.html" file, rather than define a whole other search form? The only reason I ask is that my level of coding expertise is not very high (obviously), and I would prefer not to deal with the form code unless someone could walk me through it. Thanks!

[Ray]

You can alter the appearance of the custom meta fields via CSS. But it really depends on how it is appearing at the moment, why it is appearing a certain way, and how you want to change it.

In other words, if you can give us a URL to see what you have at the moment, and maybe a screenshot to illustrate what you are after (if it is not evident), we would be able to answer you more specifically as to what you need.

[freddykruegs]

That is great news that I can alter the layout of my meta fields via CSS! Here is the URL to my search page: http://www.commercialviewsf.com/search.php

Basically, I love the way my categories are laid out inline in a horizontal fashion, but I would prefer the meta fields to be laid out in a block style - not just one after the other, all on the same line. Thanks for your help!

[Ray]

Try this:

.zoom_metaform { width: 130px; display: block; }
.zoom_metaform input { margin: 10px; }
.zoom_metaform_multi { vertical-align:top; }

Change the width to how you want it to wrap.

The second line gives some spacing between the input elements.

The .zoom_metaform_multi just controls the multiple select for your "Status:" field so that it flows under the "Status:" text, rather than above.

Hope that helps!

[freddykruegs]

Thank you so much for your help, Ray - you the man! I don't suppose you could help me out with one more layout issue concerning the meta fields? The search page looks exactly as I envisioned, except for I'd prefer if the input boxes for "Min. Square Footage" and "Max. Price" could appear on the same line as their respective field names? Here is the URL again if you need it - http://www.commercialviewsf.com/search.php. Thank you so much for your help!

[Ray]

Try this freddy,

.zoom_metaform { width: 200px; display: block; }
.zoom_metaform input { margin: 15px; }
.zoom_metaform_multi { vertical-align:top; }
.zoom_metaform_numeric { width: 30px; }
.zoom_metaform_multi { margin-right: 80px; }

[freddykruegs]

Hi Ray,

Well your latest suggestions worked like a charm! I am very grateful for your help. Everything is laid out exactly the way I want it. Is there anyway we can make the "Min. Square Footage" field bigger? The box is too small for larger square footage inputs. I tried changing a couple of numbers within the code but it just screwed up the layout you helped me create.

[Ray]

Just change the width attribute of .zoom_metaform_numeric and .zoom_metaform and also the margin-right attribute of .zoom_metaform_multi, accordingly.