Customizing Look & Feel of Ready-Made Views (Archive)

You can customize the style of your search using CSS definitions. Please note that modifying CSS requires some technical knowledge.

Customizing the search gives you the opportunity to align the look and feel with your brand. You can customize the style of the search using CSS. The most common styles used with our search are:

• font-family, font-size and font-color
• border, border-radius
• background-color
• padding, margin

You can modify the styles of the search Widget search results under Look and Feel in your AddSearch Dashboard. You can also add the styles to your website’s template. Please note that the search input field inherits the styles from your website.

Modifying styles

You can modify CSS styles in the AddSearch Dashboard. Locate the CSS settings from the AddSearch Dashboard with the following instructions:

1. Login to your AddSearch Account
2. Go to Other settings under Setup
3. Scroll down to Look & Feel section at the bottom of the page
4. Modify the CSS to your liking
5. Click Save to submit changes

Search input contains the style definitions for the search input field (where you type the keyword to search for). Search results contain the definitions for the search results in the Widget or Results page views.

By using the following CSS classes and IDs, you can control the styling of your search result titles, description text, and category text:

#addsearch-results .addsearch-result-item-sub h2 {
	font-size: 20px !important;
} /* Search result title */

#addsearch-results .addsearch-result-item-sub p {
	font-size: 16px !important;
} /* Search result description */

#addsearch-results .addsearch_category {
	font-size: 14px !important;
} /* Search result category */

If you have enabled publication dates for your search results, you can modify the styling of the date using the following classes and IDs:

#addsearch-results .addsearch-result-item-sub p span.doc_date em {
    font-size: 14px !important;
} /* Search result date */

Effects of website’s own style settings

The search input field inherits all styles, such as font settings, automatically from your website’s styles. However, the search results box does not inherit your site’s style. You need to manually define the styles of the search results box in the AddSearch Dashboard.

Customize the look and feel on mobile devices

To change styles of the search results on mobile devices use the #addsearch-results.addsearch-m2 selector to style mobile view only and leave the tablet and desktop breakpoints untouched.

#addsearch-results.addsearch-m2 .addsearch-result-item-sub h2 a {
  font-size: 20px; /* Title font size on mobile */
}