Cargo home Twitter Devlog

Adding Search to your site

Last Updated: Oct 01, 2013 02:34PM PDT
Cargo provides functionality for adding a Search function to your site. 
For an example, see But Does it Float (locate the Search field in the right menu bar.)
 
Step 1 of 2: Add the Search form by placing this into your Custom HTML:
 <div id="search_form" data-view="Search"><input type="text" id="search_term" rel="Search:"></div>
Step 2 of 2: In your Custom CSS, find out if the "Search results" classes exist. If so, you're good to go. If not, add the following classes:
 
/* Search results
****************/

#search_form {
    position: absolute;
    top: 35px; left: 35px;
    z-index: 999;
}    

#search_form_results {
    padding-bottom: 90px;
}

.search_header {
    float: left;
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    margin: 0;
    padding: 4px 0;
    width: 145px;
}

#search_form #search_term {
    background: transparent;
    border: 1px solid #808080;
    color: #808080;
    float: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    margin: 0;
    padding: 5px;
    width: 220px;
}

#search_results {
    float: left;
}

.result {
    clear: both;
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 60px;
}

.search_thumb {
    float: left;
    margin: 4px 25px 35px 0px;
}

.search_thumb img {
    width: 120px; height: auto;
}

.search_text {
    width: 500px;
    margin-left: 145px;
}

.search_title a {
    font-weight: bold;
    text-decoration: underline;          
}

.search_title a:hover {
}


.search_title a:active {
}

.search_tags {
    color: #999999;
    font-size: 11px;
}

.search_tags a {
    color: #808080;
    text-decoration: none;
}

.search_tags a:hover {
    background: none;
    color: #808080;
    text-decoration: underline;
}

.search_tags a:active {
    color: #808080;
}
If you want to add the search form to a project or page instead of your Custom HTML, place it in your content area, above a script tag that initializes the search field:
<div id="search_form" data-view="search"><input type="text" id="search_term" rel="Search:"></div>
​​<script>$(document).trigger("loadSearch");</script>
tickets@cargocollective.com
http://assets3.desk.com/
desk
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
Invalid characters found
/customer/en/portal/articles/autocomplete