Results 1 to 3 of 3

Thread: Customize Search Page Field Display

  1. #1
    Join Date
    May 2003
    Location
    San Jose, Costa Rica
    Age
    38
    Posts
    117

    Default Customize Search Page Field Display

    * UPDATED - April 02, 2010 - Addon is now ver 0.03 and install instructions have been clarified *

    This little addon provides the ability for you to customize the way fields are displayed on the search page. It is basically a replica of the search fields.

    Install NOTE: This addon only replaces the template tag which renders the fields on the search page. This means you must still maintain the other form fields on the template.

    CURRENT VER: 0.03

    Download Link: http://www.ticovista.com/custom-search-display.zip
    Demo: http://www.ticovista.com/beta/reales...=search_step_2

    There are a few steps to get this addon working on your site:

    Step 1 - Download the addon zip and unzip to your computer

    Step 2 - Customize the search page and field wrappers:

    Change these lines in the addon to customize the html wrapper around each field.

    Code:
    /* SEARCH CONTAINER DIVS */
    
    define(__field_area_begin__, '<div class="boxSearchFieldArea">');
    define(__field_area_end__, '</div>');
    
    define(__field_caption_begin__, '<div class="boxSearchCaption">');
    define(__field_caption_end__, '</div>');
    
    define(__field_begin__, '<div class="boxSearchField">');
    define(__field_end__, '</div>');
    
    /* CHECKBOX CONTAINER DIVS */
    
    define(__checkbox_area_begin__, '<div class="boxSearchCheckboxArea">');
    define(__checkbox_area_end__, '</div>');
    
    define(__checkbox_caption_begin__, '<div class="boxSearchCheckboxCaption">');
    define(__checkbox_caption_end__, '</div>');
    
    define(__checkbox_choices_begin__, '<div class="boxSearchCheckboxChoices">');
    define(__checkbox_choices_end__, '</div>');
    
    define(__checkbox_begin__, '<div class="boxSearchCheckbox">');
    define(__checkbox_end__, '</div>');
    
    /* CLEAR FLOATING ELEMENTS */
    
    define(__clearer__, '<div class="clearer"></div>');
    NOTE: Only change the values within the define(__value__, 'YOUR HTML HERE'); unless you know what your doing then you can play with the actual function. Update your CSS or change the class to fit your site structure!

    Step 3 - Add the CSS to the very bottom of your existing CSS [ http://www.yoursite.com/open-realty/...style_main.css ]:

    CSS for default wrapper divs

    Code:
    /* SEARCH PAGE: SELECT CRITERIA
     ============================================================================ */
    
    .clearer {
    	clear: both;
    }
    
    .boxSearchCriteria {
    	padding-left: 1%;
    	padding-right: 1%;
    }
    
    .boxSearchFieldArea {
    	clear: both;
    	padding-top: 2%;
    	padding-bottom: 2%;
    	border-bottom: 1px dashed #ccc;
    }
    
    .boxSearchSplit {
    	width: 50%;
    	float: left;
    }
    
    .boxSearchCaption {
    	font-weight: bold;
    	float: left;
    	width: 20%;
    	min-width: 150px;
    	color: navy;
    }
    
    .boxSearchField {
    	float: left;
    }
    
    .boxSearchCheckboxArea {
    	clear: both;
    	padding-top: 2%;
    	padding-bottom: 2%;
    	border-bottom: 1px dashed #ccc;
    }
    
    .boxSearchCheckboxCaption {
    	font-weight: bold;
    	padding-bottom: 2%;
    	color: navy;
    }
    
    .boxSearchCheckboxChoices {
    }
    
    .boxSearchCheckbox {
    	float: left;
    	width: 25%;
    	min-width: 150px;
    }
    Step 4 - Customize the search template located [ http://www.yoursite.com/open-realty/...e_default.html ]:

    Replace the template tag {search_fields} with the addon tag {addon_search_page}.

    Example of my search_page_default.html

    Code:
    <form action="index.php" method="get">
    	{addon_search_page}
    	<div class="boxSearchFieldArea">
    		<div class="boxSearchCaption">{lang_text_search}</div>
    		<div class="boxSearchField">{full_text_search}</div>
    		<div class="clearer"></div>
    	</div>
    	<div class="boxSearchFieldArea">
    		<div class="boxSearchField">{show_only_with_images} {lang_show_only_with_images}</div>
    		<div class="clearer"></div>
    	</div>
    	<div class="clearer"></div>
    	<p><input type="hidden" name="action" value="searchresults" /></p>
    	<p>{search_type}</p>
    	<p align="center"><input type="submit" value="SEARCH" class="greenBtn" /></p>
    	<br />
    </form>
    Step 5 - Upload the folder search to your addons directory

    /* CHANGE LOG - Ver 0.03 */

    BUG FIX - "checkbox_or" (thank you for pointing this out Nuwanda)
    BUG FIX - "clearer" (thank you for pointing this out tara14)
    Last edited by nickCR; 10-24-2008 at 04:28 PM. Reason: Added template example for clarification of usage.
    Regards,

    Nick

    Over 2100 Costa Rica Real Estate listings at TicoVista.

    -- PLEASE DO NOT SEND ME LINK OR LISTING EXCHANGE REQUEST --

  2. #2
    Join Date
    Mar 2009
    Posts
    2

    Default Re: Customize Search Page Field Display

    Must also add the following css:

    .clearer {
    clear: both;
    }

  3. #3
    Join Date
    Dec 2008
    Posts
    31

    Default IMPORTANT!! Bug in this addon fixed.

    IMPORTANT!!

    First, thanks for the essential little addon.

    Now, it has a bug that was a bug in the core and is now, obviously, a bug in the addon.

    This thread explains what the bug was:

    http://support.open-realty.org/showthread.php?t=21826

    The bug was fixed in subsequent OR versions but this addon uses the buggy previous version.

    I've fixed it in this addon and here it is:
    Attached Files Attached Files

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •