Hints and Tips



If everything works perfectly first time, go and buy a lottery ticket.

More often than not, it will take a lot of tweaking. In other words, a lot of trial and error. So be patient. Chillax. And enjoy the chase!


1. Finding the SearchIcon



Quite often the search icon will be hiding behind a banner image or be positioned somewhere off the top or side of the page.

If that's the case, play around with the top and left values.


If you're working against a light background, add a BLACK background to the searchIcon CSS like this:

#searchIcon {
background: #000 url(http://www.rapidweavercentral.net/etc) no-repeat;
}


If you're working against a dark background, add a WHITE background to the searchIcon CSS like this:

#searchIcon {
background: #fff url(http://www.rapidweavercentral.net/etc) no-repeat;
}


Once you have located and positioned the searchIcon you can then remove the background colours.


2. Finding the Searchbar



If you are having trouble finding the searchBar then in the searchBar CSS alter the display value by, for example, removing the word none:

#searchBar {
background: url(http://www.rapidweavercentral.net/etc..) no-repeat;
display: ;
}

This will make the searchBar visible on the page.


Once you have located and positioned the searchBar correctly, you can then replace the none to hide it again.


3. The Z Index



In some themes — like Delta, for instance — it is necessary to add a z-index value to the searcIcon and searchBar divs in order to stack them on top of the pageHeader graphics.

The following example is taken from the Seeker Project File and Seeker Searchbar CSS snippet:

/* Search Icon */

#searchIcon {
background: url(assets/search_icon_small.png) no-repeat;
cursor: pointer;
float: right;
height: 21px;
position: relative;
right: 40px;
top:120px;
width: 25px;
 z-index:20;
}

/* Search Bar */

#searchBar {
background: url(assets/searchbar_orange_right.png) no-repeat;
display: none;
float: right;
height: 52px;
left:19px;
position: relative;
top:66px;
text-align: center;
width: 273px;
 z-index:20;
}



4. Placing the Searchbar HTML snippet



In Blog pages you can insert the Seeker Searchbar HTML snippet in any of your posts and as long as that post is enabled then the code will work. You can also place the code in the sidebar. For other kinds of plugin pages — for example Collage 2, Formloom, Contact Page etc — you can insert the snippet in the page specific Header areas.

The secret to success is experimentation. For instance, if you're not using the Title or Slogan field in Site Setup, then you can insert it there and it will work for all pages. But note this is for HTML only.



5. RapidSearch CSS




Use these CSS Selectors to customise your RapidSearch Results Page


/* RapidSearch */


.rapidSearch .gs-result {
font-size: 1em;
color: #5D1417;
}

.rapidSearch a.gs-title {
color: #3F76D1;
}

.rapidSearch .gs-snippet {
color: #666666;
padding-top:4px;
}

.rapidSearch .gs-visibleUrl {
color: #98A3B1;
}

.gsc-resultsHeader {
width : 99%;
border-bottom : 1px solid #e9e9e9;
margin-bottom : 14px;
}



6. Collage 2 jQuery Code



To avoid javascript conflicts, use the following code in the Page Inspector > Header > Header tab on Collage 2 pages.


<script src="http://cdn.jquerytools.org/1.0.2/jquery.tools.min.js"></script>
<script type="text/javascript">var $j = jQuery.noConflict();</script>

<script>
        jQuery(function(){
            $j("#searchBar").hide();
                $j("#searchIcon").click(function(){
                    $j("#searchBar").animate({
                        opacity: 'toggle',
                            left: 'toggle'
                        }
                    );
                });
        });
</script>