Adjust Coloring

Support Solutions
1

Hi,

I am curious if I am able to update the coloring/styling of my Answers Experience once I’ve integrated with Zendesk.

image
image1531×796 47.7 KB

Our brand’s colors are blue :blue_square: and gold :yellow_square:, so I would love for the ‘Help Articles’ header background to be blue with the text color as gold (and replicate for other headers as well).

Thanks!

2

Hi -

Please see here for step by step to add the colors:

  1. Within the Yext platform, go to Pages > Sites > Edit > View Code Editor
  2. Click on the pencil icon next to ‘master’ on the left-hand side
  3. Once your environment is initialized, click Static > scss > answers.scss on the left-hand side of your page
  4. Click ‘View Live Preview’ at the top of the page to view a preview of your Answers Experience
  5. Within Live Preview, identify the element you’d like to adjust:
  • Right click on the page and click ‘Inspect’
  • Click the mouse logo at the top-left of the new window that appears
  • Hover over the element you’d to adjust and click once your selector chooses the right div
  1. Once you select the element, copy the css on the right-hand side of the page in the ‘Styles’ window
  • For example, if you selected the titleLabel, copy
    .HitchhikerResultsStandard-titleLabel {
    …
    }
  1. Paste this code snippet into the answers.scss file, and add the following line of code within the curly brackets:
  • color: [insert color];

For more information, visit our training on Frontend Branding and Styling here.

Let us know if you have any other questions!

1 Like