Styling

The SearchStax Site Search solution’s searchstudio-ux-js library comes with a default CSS theme located at:

node_modules/@searchstax-inc/searchstudio-ux-js/dist/styles/mainTheme.css

To use the default styling, simply import this CSS file:

@import 'node_modules/@searchstax-inc/searchstudio-ux-js/dist/styles/mainTheme.css';

Customization

The default CSS classes can be overridden to customize the styling:

.searchstax-search-input {
  /* Override default input styling */
}

.searchstax-result {
  /* Override result styling */
}

/* Override other CSS class names */

For more extensive customization, the SCSS source files can be imported and modified:

@import 'node_modules/@searchstax-inc/searchstudio-ux-js/dist/styles/scss/mainTheme.scss';

// Override SCSS variables and mixins

See the source SCSS files for the various mixins, variables, and selectors that can be customized.

Theming

To create a new theme, the main SCSS file can be used as a starting point:

@import 'mainTheme.scss';

// Override variables and custom CSS

This allows building on top of the default theme with new styling and theme variables.

Questions?

Do not hesitate to contact the SearchStax Support Desk.