Site Search | SiteApex Support
Developer Tools
Site Keyword Search

Instructions on how to add a keyword search to your Site Apex website template.

  1. Copy Search form to your template (the download below contains accompanying css and go button image if you wish)
  2. Copy php blob to your content area
  3. Create a search results page in Site Apex
  4. Put the URL of your search results page in the form action
  5. Upload finished template to Site Apex and publish site
Basic Form
<form name="searchForm" method="post" action="/yourpageURL.php">
<label for="searchText" class="hidden">Search</label>
<input name="searchText" type="text" class="search_field" id="searchText" onkeydown="javascript:if(event.keyCode == 13){ document.searchForm.submit(); }" value="Site Search" onclick="value=''" size="20" />
<input type="hidden" name="command" value="doSearch" />
<div class="go_button">
<label for="goButton" class="hidden">Go</label>
<input type="image" onclick="javascipt:document.searchForm.submit();" value="search" src="images/go_button.gif" alt="Submit Button" align="left" />
</div>
</form>


php
<?php
$siteSearchTarget = "_self";
@include("./SiteSearch/siteSearch.inc.php");
?>


Download the complete files >>



Styling the Site Search Output
Styles for the Site Search are located in the CSS/styles.css. This "linked" file can be deleted and you can upload a new version with your changes.
  1. Download a copy of styles.css (below)
  2. Edit the Site Search styles
  3. Delete the "linked” styles.css in the CSS folder of the site
  4. Upload your edited copy of styles.css

Download the styles.css here >>

CSS
Below are the default site search styles from the styles.css file. Please note I missed putting a default declaration for SASearchFoundBold, but it can still be added in custom styling.

.SASearchContainer { position: relative; }
.SASearch { font-family: Arial; font-size: 12px; }
.SASearchLink:link, .SASearchLink:visited { color: #000099; text-decoration: none; }
.SASearchLink:hover { color: #000099; text-decoration: underline; }
.SASearchFound { font-family: Arial; font-size: 14px; padding-bottom: 15px; }
.SASearchItemTitle { font-family: Arial; font-size: 14px; font-weight: bold; padding-bottom: 2px; }
.SAPaginationRow { width: 100%; text-align: right; font-family: Arial; font-size: 12px; padding-bottom: 10px; }
.SAPagination { padding-right: 10px; }
.SASearchPageNumber { }
.SASearchPageNumber:link, .SASearchPageNumber:visited { color: #000099; text-decoration: none; }
.SASearchPageNumber:hover { color: #000099; text-decoration: underline; }
.SASearchPageNumberCurrent { font-weight: bold; }
.SASearchPageName { font-family: Arial; font-size: 12px; color: #03774A; padding-bottom: 15px; }

HTML
This is an example of the HTML for the site search.

<div class="SASearchContainer">
<div class="SASearchFound">Showing 1-10 of 25 results for <span class="SASearchFoundBold">Lorem</span></div>
<div class="SAPaginationRow">
<div class="SAPagination">
<a href="?command=doSearch&amp;searchText=Lorem&offset=0" class="SASearchPageNumber">Previous</a> <a href="?command=doSearch&amp;searchText=Lorem&offset=0" class="SASearchPageNumber">1</a> <span class="SASearchPageNumberCurrent">2</span> <a href="?command=doSearch&amp;searchText=Lorem&offset=20" class="SASearchPageNumber">3</a> <a href="?command=doSearch&amp;searchText=Lorem&offset=20" class="SASearchPageNumber">Next</a>
</div>
</div>
<!-- This part repeats -->
<div class="SASearch">
<div class="SASearchItemTitle">Mikes Fishing Emporium</div>
<a href="directoryc473.php?command=viewItem&ID=12" class="SASearchLink" target="_blank"><strong>Mike</strong> Martin<br />
123 Main St North bay ON P1B 1B1<br>......</a>
</div>
<div class="SASearchPageName">http://65.109.70.70/directoryc473.php?command=viewItem&ID=12</div>
<!-- END repeating -->
<div class="SAPaginationRow">
<div class="SAPagination">
<a href="?command=doSearch&amp;searchText=Lorem&offset=0" class="SASearchPageNumber">Previous</a> <a href="?command=doSearch&amp;searchText=Lorem&offset=0" class="SASearchPageNumber">1</a> <span class="SASearchPageNumberCurrent">2</span> <a href="?command=doSearch&amp;searchText=Lorem&offset=20" class="SASearchPageNumber">3</a> <a href="?command=doSearch&amp;searchText=Lorem&offset=20" class="SASearchPageNumber">Next</a>
</div>
</div>
</div>