You can customize the style of your search using CSS so that it better aligns with the look and feel of your brand.  Please note that modifying CSS requires some technical knowledge.

Because many of the styling rules you write may be overriding an existing styling rule for your search, it is important to:

  • Always load your custom styles after the AddSearch styles when possible. If this is not possible, use internal CSS tags inside or after the body element.
  • Use specific styling rules rather than general styling rules. The more specific the rule is, the more likely it will be to take effect.
  • If a rule is not taking effect, add the !important rule to add more importance to the property/value

Additionally, it is not recommended to use CSS rules which will alter positioning or the base HTML structure as these can often break the layout of the search view.

The most advisable option for overriding AddSearch’s default widget styling is to include a CSS class name for the element that wraps AddSearch’s widget, then place that classname at the beginning of the overriding CSS rule. For example, if AddSearch’s widget is placed inside a navigation bar:

<nav class="navigation-bar">
    <div class="adds-components">
        ...
    </div>
</nav>

Widget

The addsWg-widget-container-class selector can be used to modify the general search results container for the Widget view. More specific CSS selectors within this container can be found using your browser’s inspector tool. For example, a styling rule targeting search result titles:


a.addsWg--hit h3.addsWg--title {
    font-size: 24px;
/* search result title */
}

Search Results Page

The addsRp-searchresults-container-class selector can be used to modify the results section of your Search Results Page. As with the Widget view CSS selector, more specific selectors within this container can be targeted for additional modifications. For example:

.addsRp--category {
    color: blue;
/* category tag in the search results */
}

Input field

In the Widget view, the search field can be modified using the class addsWg-searchfield and in the Search Results Page view, the search field can be modified using the class addsRp-searchfield.

This CSS selector can be used to modify various style elements of the input field, for example, the size of the field:

form.addsWg-searchfield input.icon {
    min-width: 800px; 
}

Result Box CSS Class Name

In the Search Designer tool, it is possible to define a Result Box CSS Class Name for the Widget search result view. This option lets users define a results box CSS class name which offers the ability to further control the look of the search results in your style sheet. This field can be found in the Advanced tab of the Widget view in the Search Designer tool.

 

Was this helpful?

Need more help?

We’re always happy to help with code or other questions you might have. Search our documentation, contact support, or connect with our sales team.