Common customizations

There might be cases where you need a little bit extra ✨ that doesn`t come out of the box. It is easy to use events hooks and provide your own styling or

List of common customization:

Custom styling

Out of the box, the JS Implementation and its plugins come pre-styled with some basic default CSS styling. If you wish to change these styles you can override the default classes with your own. Every semantic block has an identifying class name following the same naming convention. The easiest way to look up a specific class for you to override, is to right-click on an element and inspect it in your browser's Development Tools:

Search for CSS classes in DevTools (click to enlarge)

Search for CSS classes in DevTools (click to enlarge)

There you can also see which default styles are applied on an element. To change, for example, the background color on the left sidebar, insert this snippet into your site's HTML:

<style>
.twn-starter .twn-starter__left {
  background-color: red;
}
</style>

Troubleshooting

Here are some troubleshooting tips:

  • If your styles are not getting applied it is important to be specific with your CSS selectors, especially if you define your overriding styles in another stylesheet file, as opposed to creating a new <style> tag in your HTML. Competing declarations have different specificity and might not be picked up by the browser.
  • Consider prepending your selectors with the root class to contain your changes inside, if there ever was another element with the same class outside the implementation. For JS Implementation .twn-starter, for Recommendations JS .twn-slider__wrapper, for Guided Selling JS .twn-guided-selling and for Suggestions JS .twn-suggestions.