Bold Hours Status Text

Search Best Practices - Search Front-End
2

Hi @Scott_Howlett,

This is possible by overriding the static > js > hours > open-status > messagefactory.js file in your Jambo repo. Currently, all of the open hours statuses, such as “Open”, “Closed”, and “24 Hours”, live under the same Hours-statusText–current <span> tag. In order to approach the styling in each of these statuses in a differentiated way, you will need to create separate naming conventions for each <span> tag such that you can target and style them separately in your answer.scss file.

Here are the steps:

  1. Tools > Jambo Commands > Override Theme > select the static > js > hours > open-status > messagefactory.js file

  2. Scroll down to the status you want to target. Let’s say we want to target the “Closed” text within the “Closed - Opens at ____” status. On line 46, let’s rename the <span> to something unique such as Hours-statusText–currentClosed:

image
image2470×1278 310 KB

  1. In our answers.scss, let’s target the updated <span> tag with the new naming convention and add some styling:
span.Hours-statusText--currentClosed {
  color: 	#FA9370;
  font-weight: bold;
}

And that should be it! If we update preview and inspect the page, you’ll see the update <span> naming as well as our specific styling:

image
image1382×1258 280 KB

You can apply this same methodology to the various other statuses in the messagefactory.js file. As always when overriding the theme, make sure to take note of your changes in the event that we change this file during a future theme upgrade.

Best,
Sam

1 Like