Update Custom Branding Elements | Yext Hitchhikers Platform

What You’ll Learn

By the end of this unit, you will be able to:

• Navigate and make edits to the answers.scss file
• Identify when to use the answers.scss file over the answers-variables.scss file
• Find examples of custom styling in the Search reference documentation

Overview

Features or components outside of the standard branding elements we discussed in the previous unit are referred to as custom elements. When creating custom styling, it will often be updates to a single class rather than bulk styling updates (e.g., updating the color of one CTA instead of all CTAs in a search experience).

Any custom styling you want to add can be placed in the static > scss > answers.scss. It’s important that you keep any custom styling (unless otherwise noted in the modules) in this file. This will allow you an easy, singular place to find any customizations you’ve made to your Search experience, which will make it easier when editing or upgrading your site.

When you open the file on a new site, you’ll see the below:

.Answers
{
  // insert Answers scss here e.g.
  //&-nav {
  //  padding-top: 32px;
  //}
}

Place any styling within the Answers class. This will keep it scoped to the components of the pages. Remember, to determine the class names of the elements you want to target, you can inspect the page in question.

In this file, you can also customize features that are defined within the answers-variables.scss file. For example, updating the --yxt-results-title-text-color variable in answers-variables.scss to red will make the title bar for every vertical results on the universal search page turn red. However, if you want each vertical to be a different color, you can update the class for each title separately within the answers.scss file instead. This would look something like:

.HitchhikerResultsStandard--help_articles {
  .HitchhikerResultsStandard-title {
    background-color: red;
  }
}

To see examples of custom styling, see the Custom Code Styling Snippets section of the reference docs.

Note

Try to use the variables you define in answers-variables.scss (which you learned about in the last unit) as much as possible in the custom CSS in answers.scss. This will reduce redundancy in your code, and make it easier if you ever need to change the value of that variable across all style rules it’s used in.

You should also try to use the default styling as much as possible - these reflect our best practices that have been user-tested and account for accessibility and browser/device compatibility.