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. For example, you can use internal CSS tags inside the body element after the AddSearch installation script.
• 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 property to override existing CSS rules.

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.

Widget

You can use the addsWg-widget-container-class selector 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:

/* search result title for widget */
a.addsWg--hit span.addsWg--title {
  font-size: 48px !important;
}

More widget selectors can be found in our selector table.

Search Results Page

You can use the addsRp-searchresults-container-class selector 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:

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

More Search Results Page selectors can be found in our selector table.

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:

/* input field for widget */
form.addsWg-searchfield input.icon {
    min-width: 800px; 
}

/* input field for results page */
form.addsRp-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.

Additional Information

If you want to override AddSearch’s default widget styling in your global stylesheet, you can 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>

the CCS selector should look like this:

nav.navigation-bar div.adds-components {
    ...
}

Widget & Search Results Page selectors

Element	Widget	SRP
Title	h3.addsWg--title	h3.addsRp--title
Category	.addsWg--category	.addsRp--category
Date	.addsWg--published-date	.addsRp--published-date
Highlighted text	.addsWg--highlight	.addsRp--hit-content
Input field	form.addsWg-searchfield	form.addsRp-searchfield
Thumbnail	.addsWg--main-image	span.main-image.html