SalesLogix web client – Hiding the SpeedSearch option in the web client using custom CSS

In the SalesLogix web client, the speedsearch search tool is added to the top of every page.

This component could be hidden by creating a custom module but a simpler approach is to modify the CSS classes used by the control.  The CSS classes are specific to this search tool so modifying them does not affect other areas.

If you go to the Support Files…css folder under the SalesLogix portal you should see a file called Sage-styles.css
If you edit this page you can change the following CSS sections.  The change you need to make is to change the display: tag from “inline” to “none”.

• ssdropdown
• ssdropdownhighlite
• ssbutton
• ssbuttonhighlite
• tboxinfo (this one is further down the file and you will need to add the entire tag “display : none;”)

The end result should look like this:

.ssdropdown
{
    display : none;
    border-color : #A8A9BE;
    border-style : solid;
    border-width: 1px 1px 1px 0px;
    background-image : url(../images/blue/searchBg.gif);
    background-repeat : repeat;
    margin-right: .5em;
    margin-left : 0px;
    margin-top : 1px;
    padding : 1px 4px 0px 4px;
    float : right;
}
.ssdropdownhighlite
{
    display : none;
    border-color : #A8A9BE;
    border-style : solid;
    border-width: 1px 1px 1px 0px;
    background-image : url(../images/blue/searchBgOrange.gif);
    background-repeat : repeat;
    margin-right: .5em;
    margin-left : 0px;
    margin-top : 1px;
    padding : 1px 4px 0px 4px;
    float : right;
}
.ssbutton
{
    display : none;
    border-color : #A8A9BE;
    border-style : solid;
    border-width: 1px 1px 1px 0px;
    background-image : url(../images/blue/searchBg.gif);
    background-repeat : repeat;
    margin-left : 0px;
    margin-top : 1px;
    padding : 1px 2px 0px 2px;
    float : right;
}
.ssbuttonhighlite
{
    display : none;
    border-color : #A8A9BE;
    border-style : solid;
    border-width: 1px 1px 1px 0px;
    background-image : url(../images/blue/searchBgOrange.gif);
    background-repeat : repeat;
    margin-left : 0px;
    margin-top : 1px;
    padding : 1px 2px 0px 2px;
    float : right;
}

…

.tboxinfo
{
    display : none;
    font-style : italic;
    color : #444444;
    font-size : 90%;
}

 You will also need to make these same changes to the SLXBase.css file.  The SLXBase file is actually used sometimes to generate the content of the Sage-Style.css page, despite what it has defined in the Sage-Style.css page.  So make sure you modify both files to get the effect you want.