loading

Answers SCSS - Updating Custom Elements| Hitchhikers Platform

What You’ll Learn

In this section, you will learn:

  • How to further customize your Answers experience with CSS
  • Common Examples

Using CSS to Update an Answers 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 the answers.scss file. This will allow you an easy, singular place to find any customizations you’ve made to your answers 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 Answers components of the pages.

Remember, to determine the class names of the elements you want to target, you can Inspect the page in question.

light bulb
Tip

Use the variables you define in answers-variables.scss (which you learned about in the last unit) as much as possible. 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. Make sure you test any CSS changes thoroughly to ensure they meet our standards.

Common Examples

Updating the CTA Styling

You may want to emphasize CTAs by inverting the colors (white text on a color background). You can do so by updating color and background-color attributes on items with class HitchhikerCTA. We’ve also added some padding so it looks good on desktop and mobile.

.HitchhikerCTA{
  color: white;
  background-color: #0f70f0;
  padding: 4px 8px;
}

Custom CTA

Updating the Title Bar Styling

In the last unit, you learned how to use the --yxt-results-title-bar answers variables to update some of the components of the title bar. To finish this out, all you need to do is set the color for the following classes as your --yxt-results-title-bar-text-color.

.yxt-Results-titleIconWrapper, .yxt-Results-title, .yxt-Results-viewAllLink:link, .yxt-Results-viewAllLink:visited, .yxt-Results-viewAllLink:hover
{
  color: var(--yxt-results-title-bar-text-color);
}

Custom CTA

unit Quiz
+20 points
Daily Quiz Streak Daily Quiz Streak: 0
Quiz Accuracy Streak Quiz Accuracy Streak: 0
    Error Success Question 1 of 2

    According to our best practices, which file(s) should you add custom Answers-specific SCSS rules to? (Select all that apply)

    Error Success Question 2 of 2

    Can you use variables defined in answers-variables.scss in your answers.scss rules?

    You're a star! ⭐️

    You've already completed this quiz, so you can't earn more points.You completed this quiz in 1 attempt and earned 0 points! Feel free to review your answers and move on when you're ready.
1st attempt
0 incorrect
Splash Loading