Back
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.
- 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.
- 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.
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.
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.
Navigate to the
static/scss/answers-variables.scssfile in the file directory. In this file, you can modify variables that will make updates across several classes. Think of this like your stylesheet.
Update your
yxt-color-brand-primaryvariable. 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;
#32a85e.
Update your
hh-answers-background-colorvariable. 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;
Build with Turtlehead TacosWant to follow along with Turtlehead Tacos colors? Use the background color#efefd4.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.
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:
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.scssfile.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.