Skip to main content

Customizing Look & Feel of Ready-Made Views

You can customize AddSearch's Widget and Search Results Page styles by applying your own CSS rules. This allows you to align the search UI with your brand's design. Note that editing CSS requires familiarity with CSS syntax and browser developer tools.

Best Practices for Custom CSS​

  • Load your custom styles after AddSearch's CSS: Ensure your stylesheets or CSS blocks load after the AddSearch styles to override them successfully. For example, place your internal CSS within the <body> tag after the AddSearch installation script. See internal CSS examples.
  • Use specific CSS selectors: Target elements precisely to increase the chance your styles apply correctly.
  • Add !important if necessary: If your style does not take effect, append !important to force override existing rules.
  • Avoid modifying base HTML structure or positioning: Changes in DOM structure or positioning can break the layout of the search views.

Customizing the Widget View​

Use the addsWg-widget-container-class selector to target the main search results container in the Widget view. For specific elements within this container, use more specific selectors obtained via your browser’s inspector.

Example: Change font size of search result titles in the Widget:

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

Find additional Widget CSS selectors in the selector table.

Customizing the Search Results Page (SRP)​

Target the results section of the Search Results Page with the addsRp-searchresults-container-class selector. Customize specific elements inside this container, using more precise selectors from your browser’s developer tools.

Example: Change the color of category tags:

/* Category tag in Search Results Page */
.addsRp--category {
  color: blue !important;
}

Refer to the selector table for more SRP selectors.

Styling the Input Field​

  • In the Widget view, style the search input field via the addsWg-searchfield class.
  • In the Search Results Page view, use the addsRp-searchfield class.

Examples:

/* Widget input field size */
form.addsWg-searchfield input.icon {
  min-width: 800px !important;
}

/* Search Results Page input field size */
form.addsRp-searchfield input.icon {
  min-width: 800px !important;
}

Using Result Box CSS Class Name​

In the Search Designer tool's Widget view under the Advanced tab, you can define a Result Box CSS Class Name. This class is added to search result boxes and lets you create targeted CSS rules for further customizing the results appearance.

Overriding Widget Styling in Global Stylesheets​

If you include the AddSearch widget inside an element with a specific CSS class (for example, a navigation bar), prepend that class to your CSS selectors to scope your styles.

Example:

<nav class="navigation-bar">
  <!-- AddSearch widget here -->
  <div class="adds-components"></div>
</nav>

CSS selector:

nav.navigation-bar div.adds-components {
  /* Your custom styles */
}

Widget and Search Results Page Selectors​

ElementWidget SelectorSearch Results Page Selector
Titlea.addsWg--hit span.addsWg--titlespan.addsRp--title
Category.addsWg--category.addsRp--category
Date.addsWg--published-date.addsRp--published-date
Highlighted Text.addsWg--highlight.addsRp--hit-content
Input Fieldform.addsWg-searchfield input.iconform.addsRp-searchfield input.icon

For more details on CSS practices, refer to CSS HowTo.