Module Assessment | Yext Hitchhikers Platform
Background
Now that you have the basic set-up of the Search experience complete, it’s time to ensure that the Turtlehead Tacos branding is present. They’ve given you their home page as a reference to pull in styling from there.
In the end of this module, this is what you want your experience to look like:
Your Challenge
Navigate to Pages > Turtlehead Taco Search > Deploys, go to the Code Editor, and click into the master branch. You should expect this to take a couple minutes to load – in the background, it’s starting up a container for your development.
Click “View Live Preview” to open your preview in a new tab.
Run a search for “turtlehead” – this is what it looks like now. Note to yourself how off-brand it is!
Navigate to
static > scss > answers-variables.scss
. Change the color of the text (--yxt-color-text-primary
) to match the color of the paragraph text in the Save the Turtles section at the bottom of the home page .Preview the change to make sure it looks how you want. (Remember to click out of the code editor to trigger an update, open the Tools > Console to make sure the build completes successfully, and then hard refresh your preview page).
Change the background color (
--hh-answers-background-color
) to the Turtlehead Tacos light green that is the background of the “Save the Turtles” section of the home pageIn answers.scss, update the CTAs to have borders. You want the border to be solid with the primary brand color, some padding and some margin. Add the following code to the answers.scss file inside of the .Answers object:
.HitchhikerCTA { border: 1px solid var(--yxt-color-brand-primary); padding: 8px; margin: 0px 8px; }
Preview the change to make sure it looks how you want.
Click commit and enter a commit message describing what you’re doing.
Monitor the build and publish to make sure it’s successful.
Refresh your search (make sure to do a hard refresh in case your browser has cached the page’s styling).
- Make sure that each rule ends with a semicolon
;
, otherwise the CSS will be invalid - Check that brackets
{ }
are closed, and any nested CSS is properly contained within its parent container - Check that you’re targetting the right class - inspect your preview link to determine what class you should target
- Ensure your rule is not being overriden by a more specific rule elsewhere in the CSS
For a refresher on CSS basics, review the Introduction to CSS module