Step 5: Match Your Brand's Styling

Your Search experience should blend into your website naturally, using the same brand colors and basic styling. In this step, we’ll walk you through how to update these in the Pages frontend.

  1. Navigate to Pages in the navigation bar and click the Search Results Page site. Think of this like the command center for your Search results page. You can do things like view your Staging and Production environments (where you can monitor your site builds or publish your site), or click into the Code Editor to view and commit changes to the GitHub repository for your site.

Pages Sites Screen

  1. Click on “View Code Editor”. This is your GitHub Repository. In the left sidebar, you’ll see the available branches, which to start off should just be “Master”.

Hover over the Master branch and hit the pencil icon to get into your files.

Click the pencil icon on Master

From here, you can see all of your files (arranged in the directory on the left), make changes to those files, preview those changes and commit those changes to your repository.

Navigate to Code Editor

  1. Click “View Live Preview” in the upper right. This will spin up a preview of your site in the browser, just like you would do if you were developing locally. By the time you’ve navigated to the code editor, your preview is already there and ready to go! When you click into the code editor, we are spinning up a container for dynamic code editing and preview behind the scenes. All you need to do is click View Live Preview at the top of the code edtior to open your local site in a new tab in your browser.

  2. Navigate to the static/scss/answers-variables.scss file in the file directory. In this file, you can modify variables that will make updates across several classes. Think of this like your stylesheet.

Search Variables

  1. Update your yxt-color-brand-primary variable. Update the variable to match the primary color of your brand. You can type in:

    • a color (like “red” or “lightgreen”)
    • a hex-value (like #0f70f0)

    For example, either of these would work:

    --yxt-color-brand-primary: #FF0000;
    --yxt-color-brand-primary: red;
light bulb
Build with Turtlehead Tacos
Want to follow along with Turtlehead Tacos colors? Use the color #32a85e.
  1. Update your hh-answers-background-color variable. Update the variable to set the background color for your experience. You can type in:

    • a color (like “white” or “lightgray”)
    • a hex-value (like #EEEEEE)

    For example, either of these would work:

    --hh-answers-background-color: #EEEEEE;
    --hh-answers-background-color: white;
    light bulb
    Build with Turtlehead Tacos
    Want to follow along with Turtlehead Tacos colors? Use the background color #efefd4.
  2. View your updated Preview. As you’re making changes, we’ll automatically update your preview whenever you click out of the code editor. If you open up the Tools > Console, you’ll see a preview refresh start building immediately when you click out of code editing. If you refresh your preview tab while an update is in progress, you’ll see an error page – don’t be alarmed! Just wait for your preview update to complete and refresh the page.

    live preview completed view

  3. Refresh your Preview. Do a hard-refresh of your preview page to see how it looks. On a Mac, you can do this with cmd-shift-R. On Windows, you can do ctrl-F5 or ctrl-shift-R. Not sure what “hard-refresh” means? Check out this article .

    If you’ve followed along with the Turtlehead Tacos branding, your site will look something like this: Turtlehead Tacos Branding

  4. Make any other adjustments to variables. Play around with any of the other variables and repeat steps 7-9 to use the preview to help you find what’s “just right.” If you’re feeling ambitious, you can modify any specific styling in the static/scss/answers.scss file.

  5. Commit your code by clicking Commit, filling out a commit message and clicking Save. The most important step! You want to save your work so you’ll need to commit your changes to the GitHub Repository. If you want to publish to production, you should also add a Commit Tag.

light bulb
Your preview URL should be valid for a few hours, or you can go back into the code editor to generate a new one later. We recommend that you can keep this open so you can see how changes to your Knowledge Graph in Step 2 impact your search experience.

Congratulations, you’ve completed the last step to customize your experience!