CSSsearch - tableless search form layouts

[imonawave]

here is an addon in the final stages of design. this drops the table based layout for the search fields and uses CSS for layout and formatting. the example shows how each of the 13 field types could be displayed. multiple fields of the same field type, can be formatted differently...

created as a result of the "listingview layout" thread - thanks again to DavidR for getting the switch ($searchbox_type) out of the search page...

zip file contains:
* the "in progress" addon
* csssearch.css - a CSS example
* 3 PNG files - showing field names and field types used in example

tag:
{addon_csssearch_link}

for a live example, follow the link from my post here.

please test it out and share your comments. will plan to submit this as an official release in the near future.

Mike

[argosmedia]

I don't fully understand how it works. I managed to have it display some fields, but not a search form. How can I create a search form with this addon? Just adding the addon tag to a page is clearly not enough, so what to do next?

Any help would be appreciated! I'm no coder, so things like "just add form tags" doesn't really help me :-)

[serkanserttop]

You must replace the {search_fields} tag in the search_page_default.html with {addon_csssearch_link}. The fields you want must be selected from the admin, and you add css definitions to the style.css to format the layout. There were examples of such css styling in the addon to learn from.

[argosmedia]

Cool, it works now! I had added the addon tag to a normal page, instead of the search template :-)

Thanks for your quick reply!

[brandy1j]

Hi, I don't see how you make the layout similar to the examples. I got it to work but its not the same layout.
Can someone send a example of how to make it like the 1st png example. Basically city and state on one line, rent and security deposit on another, .. 2 or 3 options per line so a person wouldn't need to scroll down for hours just picking options. I like the Community features example with checkboxes.
Thanks,
Brandy1J~

[serkanserttop]

You just need to play around with the csssearch.css, below is the first 3 from the addon. If you know how css works, it should be easy. If you don't, just play around by looking at css-cheat-sheet from http://www.ilovejackdaniels.com/chea...s-cheat-sheet/ for quick guide or check out www.w3schools.com for tutorials. Any field you have will be like as below: fieldset.yourlistingfieldname {some css description}

/* ----- CSSSEARCH ADDON FORMATTING ~ start ----- */

/* case 'ptext' AKA Partial Text Match */
fieldset.full_desc { width: 40%; float: left; }
fieldset.full_desc legend { }
fieldset.full_desc div { }
fieldset.full_desc input { margin-left: 1em; background-color: #BEC8C9; width: 10em; }
fieldset.full_desc label {  }

/* case 'pulldown' AKA Pull down menu, 1 selection only */
fieldset.city { width: 50%; float: left; margin-bottom: 2em; }
fieldset.city legend { }
fieldset.city div { }
fieldset.city select { margin-left: 1em; width: 10em; }
fieldset.city label { font-weight: bold; }

/* case 'null_checkbox' AKA Search For Empty(NULL) Values */
fieldset.community_features { width: 50%; border: 1px dashed; clear: both; }
fieldset.community_features legend { display: none; }
fieldset.community_features div { margin: 2em; }
fieldset.community_features input { background-color: transparent; cursor: pointer; }
fieldset.community_features label { padding-left: .5em; cursor: pointer; } 

[serkanserttop]

For checkboxes, you have to change the search options from the listing template editor.
Maybe it is just me, but I hate purple text, or actually my eyes hate purple text.
Personally I don't discriminate on color, whether you are white, black or purple.

[brandy1j]

Thanks for the response.

I don't see a difference in what you posted and whats in the addon. I understand about the purple, but thats my favorite color so I tend to add it without thinking. I'm not sure how to take the "I don't discriminate" part but I guess thats just as well.

I would like an example of how to begin the editing process. For instance if I wanted three options on one row how do I get that? Just a template will get me going. I can figure out the rest from there. I was looking at the sites you linked to and I didn't see that in there although they are good resources.

Can anyone give me a starting point.. Please.

Thanks again,
Brandy1J~
I hope this color isn't offensive to anyone.

[argosmedia]

I hope this color isn't offensive to anyone.

It's not offensive to me, but I don't like it either. Why not just leave the font alone and stick to the default? Using [color="DarkRed"] and [font="Century Gothic"] or any other font variation just doesn't add anything, and it makes the text only harder to read. MODERATED - be nice or be gone.

[brandy1j]

MODERATED - His post was unnecessary. Just try to use a color/font that someone can read easily.