Style Modules with CSS

You can use cascading style sheets (CSS) to style modules that you embed in your websites. You might want to do this to match the look-and-feel of Site Search modules with the look-and-feel of your website.

CSS development environment

You can use either or both of these CSS development environments:

  • Test environment – A number of tools exist for front-end development with HTML and CSS.

    One such tool is CodePen. If you use CodePen, whitelist the domains https://codepen.io/ and https://s.codepen.io/. Note that pens in the free version of CodePen are freely accessible on the Internet.

  • Test or production website – You can test CSS rule sets for modules on your production website or a test website.

How CSS styling works

  1. The HTML elements in modules have class attributes that specify names for the HTML elements.

    For example, the start of the HTML for the <cloud-search-box> looks like this:

    <cloud-search-box>
      <div class="lw-search-box">
        <div class="lw-suggestion-wrapper">

    You see the class attributes lw-search-box and lw-suggestion-wrapper.

  2. In CSS, you add rule sets with selectors that reference module HTML elements, and with declarations that specify how to style the elements.

    For example, here is a CSS rule set that colors the border of the search box blue:

    /* Search box border */
    cloud-search-box .lw-search-box .lw-suggestion-wrapper {
      border-color: blue;
    }

This is a https://cssreference.io/[reference for CSS development^].

How to style HTML elements with CSS

  1. Copy the rule sets we provide and paste them into your cascading style sheets.

  2. Edit the declarations in the rule sets to get the module styling you desire.

Sample HTML

This is an example of a very simple HTML page with two-column layout that has embedded Site Search modules.

<doctype html>
<head>
<!-- Lucidworks.cloud embed script -->
<script async="false" src="https://cloudapps1.stage.lucidworks.cloud/search/embed/v1/ui/loader.js?language=en"></script>
</head>
<body>
<header>
  <h1>My custom website</h1>
</header>
<div class="search-container">
  <div class="left-column">
    <cloud-more-like-this></cloud-more-like-this>
    <cloud-facets></cloud-facets></div>
  <div class="main-column">
    <cloud-search-box></cloud-search-box>
    <cloud-tabs></cloud-tabs>
    <cloud-results></cloud-results>
  </div>
</div>
</body>

For CodePen, you don’t supply the <html> and <body> elements, and you place the <script> element in the body (in the HTML panel):

<!-- Lucidworks.cloud embed script -->
<script async="false" src="https://mysearchapp.lucidworks.cloud/search/embed/v1/ui/loader.js?language=en"></script>
<header>
  <h1>My custom website</h1>
</header>
<div class="search-container">
  <div class="left-column">
    <cloud-more-like-this></cloud-more-like-this>
    <cloud-facets></cloud-facets></div>
  <div class="main-column">
    <cloud-search-box></cloud-search-box>
    <cloud-tabs></cloud-tabs>
    <cloud-results></cloud-results>
  </div>
</div>

Copy and paste the loader-script snippet from your Site Search app, or edit the URL shown above.

Sample CSS

These code snippets indicate ways in which you can customize your CSS to override the default CSS used by Site Search modules.

Starting point

Before styling modules, these rule sets specify a font family for the page and the color of elements in the <header>. They also provide the two-column layout.

body {
  font-family: Arial;
}

header {
  color: purple;
}

.search-container {
  display: flex;
}

.left-column {
  width: 30%;
  padding: 10px;
}

.main-column {
  width: 67%;
  align-content: right;
  padding: 10px 0;
}

Second, we override CSS rule sets to adjust the position of the Search Box module and the padding around facets:

cloud-search-box {
  margin-left: 14px;
  margin-bottom: 20px;
  display: flex;
}

cloud-facets .facet-list .filter-list {
  padding: 0;
}

Now we have our starting point for CSS customization, which looks like this:

No module customization

Search Box modules

Following are examples of CSS rule sets for customizing the appearance of Search Box modules:

/*                        */
/*  Search Box Overrides  */
/*                        */

/* Search Box border */
cloud-search-box .lw-search-box .lw-suggestion-wrapper {
  border: 0;
  border-bottom: 1px solid brown;
  border-radius: 0px;
  box-shadow: none;
  margin: 20px;
}

/* Search Box text */
cloud-search-box .lw-search-box input {
  color: purple;
}

/* Search Box placeholder text */
cloud-search-box .lw-search-box input::placeholder {
  color: orange;
}

/* Suggestions dropdown box */
cloud-search-box .lw-search-box .lw-suggestion-wrapper .lw-suggestions {
  //border: 0;
  //border-bottom: 1px solid brown;
  border-radius: 0px;
  box-shadow: none;
  margin: o;
}

/* Document quick links */
cloud-search-box .lw-search-box .lw-suggestion-wrapper .lw-suggestions .result:hover {
  background-color: purple;
}
cloud-search-box .lw-search-box .lw-suggestion-wrapper .lw-suggestions .result:hover a {
  color: white;
}
cloud-search-box .lw-search-box .lw-suggestion-wrapper .lw-suggestions .result-list a {
  color: purple;
}

/* Query completion */
cloud-search-box .lw-search-box .lw-suggestion-wrapper .lw-suggestions .lw-sug-title {
  color: white;
  padding: 10px;
  background-color: orange;
}
cloud-search-box .lw-search-box .lw-suggestion-wrapper .lw-suggestions li {
  color: purple;
}
cloud-search-box .lw-search-box .lw-suggestion-wrapper .lw-suggestions li:hover {
  background-color: purple;
  color: white;
}

Here is a screenshot of these customizations:

Search Box with customized CSS

Topic Tabs modules

Following are examples of CSS rule sets for customizing the appearance of Topic Tab modules:

/*                        */
/*  Topic Tabs overrides  */
/*                        */

/* Unselected tab labels */
cloud-tabs ol.tabs .tab .label a {
  color: purple;
}

/* Selected tab label */
cloud-tabs ol.tabs .tab.active .label a {
  font-weight: bold;
}

/* Tab results count */
cloud-tabs ol.tabs .tab .label a span.metadata {
  color: brown;
}
cloud-tabs ol.tabs .tab.active .label a span.metadata {
  color: green;
}

Here is a screenshot of these customizations:

Topic Tabs with customized CSS

Results modules

Following are examples of CSS rule sets for customizing the appearance of Results modules:

/*                     */
/*  Results overrides  */
/*                     */

/* Number of results */
cloud-results .response-statistics {
  color: orange;
}

/* All linked fields */
cloud-results .results .result .field a {
  color: orange;
}

/* Linked title fields */
cloud-results .results .result .field.tk-stl-title a {
  color: purple;
}

/* All nonlinked fields */
cloud-results .results .result .field {
  color: brown;
}

/* All field labels */
cloud-results .results .result .field .tk-stl-label {
  color: green;
  font-weight: bold;
}

/* Specific field label (change domain to any other field name) */
cloud-results .results .result .field[data-field="domain"] .tk-stl-label {
  color: red;
  font-weight: initial;
}

/* Specific field label (change domain to any other field name) */
cloud-results .results .result .field[data-field="domain"] {
  color: blue;
}

/* Pagination link colors */
cloud-results .pagination .tk-stl-pagination-arrows .page a {
  color: green;
}

/* Hover color for pagination */
cloud-results .pagination .tk-stl-pagination-arrows .page:hover {
  background-color: green;
}
cloud-results .pagination .tk-stl-pagination-arrows .page:hover a {
  color: white;
}

/* Facet and query breadcrumbs */
cloud-results
  .breadcrumbs
  .tk-stl-breadcrumb-capsules-categorygroup
  .breadcrumb.remove-group {
  background-color: green;
}
cloud-results
  .breadcrumbs
  .tk-stl-breadcrumb-capsules-categorygroup
  .breadcrumb.last {
  background-color: purple;
}
cloud-results
  .breadcrumbs
  .tk-stl-breadcrumb-capsules-categorygroup
  .breadcrumb.last
  a {
  color: white;
}
cloud-results
  .breadcrumbs
  .tk-stl-breadcrumb-capsules-categorygroup
  .breadcrumb.clearall {
  background-color: transparent;
}
cloud-results
  .breadcrumbs
  .tk-stl-breadcrumb-capsules-categorygroup
  .breadcrumb.clearall
  a {
  color: brown;
}

/* Pagination highlight color */
cloud-results .pagination .tk-stl-pagination-arrows .page.active {
  background-color: green;
}

Here is a screenshot of these customizations:

Results with customized CSS

Facets modules

Following are examples of CSS rule sets for customizing the appearance of Facets modules:

/*                    */
/*  Facets overrides  */
/*                    */

/* Facet title */
cloud-facets .facet-list .facet-title {
  font-weight: bold;
  color: purple;
}

/* Facet filters */
cloud-facets .facet-list .filter {
  color: orange;
}

/* Facet filter pagination (show more and show less) */
cloud-facets .facet-list .filter-list-controls a {
  font-weight: bold;
  color: green;
}

/* Facet count color */
cloud-facets .facet-list .filter .metadata .count {
  background-color: green;
  color: white;
}

Here is a screenshot of these customizations:

Facets with customized CSS

More Like This modules

Following are examples of CSS rule sets for customizing the appearance of More Like This modules:

/*                            */
/*  More Like This overrides  */
/*                            */

/* Remove the border */
cloud-more-like-this {
  padding: 0 10px; // adjust padding
  border: 0;
}
cloud-more-like-this .lw-smart-panel {
  border: none;
  box-shadow: none;
}

/* Title color and size */
cloud-more-like-this .lw-smart-panel h4 {
  color: orange;
  font-weight: bold;
}

/* Subtitle */
cloud-more-like-this .lw-smart-panel h5 {
  color: purple;
}

/* All More Like This Links */
cloud-more-like-this .lw-smart-panel .result .tk-stl-description a {
  color: brown;
}

/* More Like This document URL */
cloud-more-like-this .lw-smart-panel .result .tk-stl-url.tk-stl-description a {
  color: orange;
}

Here is a screenshot of these customizations:

More Like This with customized CSS

Final result

Our final result after the CSS customization in the sections above looks like this:

All modules customized