In Theme 1.19, we’ve introduced a series of updates to the theme to give it a more modern look! 
These updates were made after user testing and user behavior research. The new default UI was updated to increase engagement with your search experience.
Here’s what we updated:
- Default colors
- Border radius (universal sections and sections on vertical will be rounded by default)
- Increased the default width of the experience
- Updated the default font to Source Sans Pro from Open Sans
- Updated default font sizes so the experience is slightly bigger
- Updated spacing
- Removed “Filters” title for Facets and removed lines between collapsed facets
Default UI Before:
Default UI After:
Upgrade Implications:
You can choose to either:
- Embrace the new UI and update any top-level styling to align with the new look and feel
- Preserve your current UI and keep the styling the same
Both options will require some work when you upgrade.
Option One: Use Updated Styling
A video walkthrough of the below updates can be found here 
1. Default colors
We updated the default colors. Most noticeably, we’re encouraging a white background by default, since most website backgrounds are white. That said, you should update this to blend in with your website – Answers should be an extension of your site’s branding.
If you are still using our default colors, feel free to update to them:
| Default value in v1.18 and prior | Default value in 1.19 |
|---|---|
| // control colors | // control colors |
--yxt-color-borders: #dcdcdc; |
--yxt-color-borders: #d8d8d8; |
--yxt-color-brand-primary: #0f70f0; |
--yxt-color-brand-primary: #5387d7; |
--yxt-color-background-highlight: #fafafa; |
--yxt-color-background-highlight: white; |
--hh-view-results-button-hover-color: #0c5ecb; |
--hh-view-results-button-hover-color: #4a7ac1; |
--hh-answers-background-color: #eeeff0; |
--hh-answers-background-color: white; |
2. Border radius (universal sections and sections on vertical will be rounded by default)
Our user testing showed us that rounder edges are more engaging than hard corners. So, we’re making the update! Some of you may have already done this using css overrides. As long as you haven’t explicitly updated this, this should just work for you when you upgrade. Are sharp corners part of your brand guidelines? No problem, you can use CSS to override.
In the future, if you want to update the border radius, you can add this variable to the answers-variables.scss file:
Under “// common border variables”, add --yxt-border-radius: 5px;
3. Increased the default width of the experience
This one we’re particularly excited about. Previously, the default width was pretty narrow - designed to really focus people on the page. But, you all have shown that you want to surface a lot of awesome content on result cards, so we decided to give you a bit more real estate to do this.
When you upgrade, you’ll need to add or update the following in answers-variables.scss file
| Default value in v1.18 and prior | Default value in 1.19 |
|---|---|
| n/a - new | $container-width: 1000px; |
//theme specific variables |
|
--hh-universal-grid-margin: 8px; |
|
// breakpoint variables |
|
$breakpoint-collapsed-filters: $container-width + 279px; |
|
$breakpoint-expanded-filters: $container-width + 280px; |
|
//theme specific variables |
//theme specific variables |
--hh-answers-container-width: 700px; |
--hh-answers-container-width: #{$container-width}; |
--hh-universal-grid-three-columns-width: 212px; |
--hh-universal-grid-three-columns-width: calc(calc(100% - var(--hh-universal-grid-margin) * 6) / 3); |
--hh-universal-grid-two-columns-width: 326px; |
--hh-universal-grid-two-columns-width: calc(calc(100% - var(--hh-universal-grid-margin) * 4) / 2); |
With the wider default width, you’ll notice the images on the product-prominent-image cards get pretty big. You may either want to add padding to the images, or increase the number of columns of your cards.
To accomplish the latter, you’ll need to override some of the width settings included in the three-column layout.
Before proceeding, if you’re hoping to add 4 columns, we’d recommend upgrading to version 1.20 of our theme and using our new built-in 4 column layout.
To insure the universal section has four column, update the --hh-universal-grid-three-columns-width variable in your answers-variables.scss
--hh-universal-grid-three-columns-width: calc(calc(100% - 8px * 8)/4)
To update the vertical grid to have four columns, add the following to your answers.scss
.AnswersVerticalGrid .Hitchhiker-3-columns .yxt-Card {
width: 25%;
}
A future theme release will include these new options by default.
4. Updated Spacing
To allow the experience to breathe a bit more, we updated the base spacing. If you do not want this change, no need to update the --yxt-base-spacing variable.
| Default value in v1.18 and prior | Default value in 1.19 |
|---|---|
// spacing variable, used in padding/margins across the site |
// spacing variable, used in padding/margins across the site |
--yxt-base-spacing: 16px |
--yxt-base-spacing: 20px; |
5. Updated the default font to Source Sans Pro from Open Sans
OpenSans is so 2020! Just kidding… But seriously, we decided to update our default font based on some more user testing to Source Sans Pro. Many of you have already overridden the font to use whatever font(s) you use on your main website, which is great! For those of you still using Open Sans, feel free to keep that. Or you can update to use our new font.
If you aren’t using custom fonts and want to switch over, navigate to the static/fonts.scss file and
A. Update the --yxt-font-family to use Source Sans Pro instead of “Open Sans”
--yxt-font-family: "Source Sans Pro","Open Sans",system-ui,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
B. Remove or comment out the Open Sans font declarations
In other words, remove or comment out the below:
@font-face
{
font-family: "Open Sans";
src: url('../assets/fonts/opensans-regular-webfont.woff') format("woff");
font-weight: $font-weight-normal;
font-style: normal;
font-display: swap;
}
@font-face
{
font-family: "Open Sans";
src: url('../assets/fonts/opensans-bold-webfont.woff') format("woff");
font-weight: $font-weight-bold;
font-style: normal;
font-display: swap;
}
@font-face
{
font-family: "Open Sans";
src: url('../assets/fonts/opensans-semibold-webfont.woff') format("woff");
font-weight: $font-weight-semibold;
font-style: normal;
font-display: swap;
}
C. Add the new Source Sans Pro font declarations
@font-face
{
font-family: "Source Sans Pro";
src: url('../assets/fonts/source-sans-pro-v14-latin-300.woff') format("woff");
font-weight: $font-weight-light;
font-style: normal;
font-display: swap;
}
@font-face
{
font-family: "Source Sans Pro";
src: url('../assets/fonts/source-sans-pro-v14-latin-regular.woff') format("woff");
font-weight: $font-weight-normal;
font-style: normal;
font-display: swap;
}
@font-face
{
font-family: "Source Sans Pro";
src: url('../assets/fonts/source-sans-pro-v14-latin-600.woff') format("woff");
font-weight: $font-weight-semibold;
font-style: normal;
font-display: swap;
}
@font-face
{
font-family: "Source Sans Pro";
src: url('../assets/fonts/source-sans-pro-v14-latin-700.woff') format("woff");
font-weight: $font-weight-bold;
font-style: normal;
font-display: swap;
}
6. Updated default font sizes so the experience is slightly bigger
We decided to increase the font sizes - this is a fairly subtle change but we think it’s worth it! Again, you may have already overridden the font sizes to align with your brand, in which case feel free to skip this update, otherwise you can find our new suggested font sizes below. These should be included in your static/fonts.scss file.
Default value in v1.18 and prior
--yxt-font-size-xs: 10px;
--yxt-font-size-sm: 12px;
--yxt-font-size-md: 14px;
--yxt-font-size-md-lg: 16px;
--yxt-font-size-lg: 18px;
--yxt-font-size-xlg: 20px;
--yxt-font-size-xxlg: 40px;
Default value in 1.19
--yxt-font-size-xs: 12px;
--yxt-font-size-sm: 14px;
--yxt-font-size-md: 16px;
--yxt-font-size-md-lg: 18px;
--yxt-font-size-lg: 20px;
--yxt-font-size-xlg: 22px;
--yxt-font-size-xxlg: 42px;
Finally, add the following variables to your answers-variables.scss file (recommended under // component specific variable overrides
--yxt-alternative-verticals-emphasized-font-weight: var(--yxt-font-weight-semibold);
--yxt-filters-and-sorts-font-size: var(--yxt-font-size-md);
7. Removed “Filters” title for Facets and removed lines between facets
Lastly, we made some updates to the facets UI to make it a bit simpler and cleaner. This includes:
- Removing the “Filters” title at the top
- Removed the lines between the Facet fields
If you want to keep the filter title, add this to your answers.scss file:
.AnswersVerticalStandard.CollapsibleFilters .yxt-FilterBox-titleContainer, .AnswersVerticalGrid.CollapsibleFilters .yxt-FilterBox-titleContainer {
display: flex;
}
If you want to keep the lines between the facet fields, add this to your answers.scss file:
.yxt-FilterBox-filter+.yxt-FilterBox-filter {
border-top: .0625rem solid var(--yxt-color-borders);
}
.AnswersVerticalStandard.CollapsibleFilters .yxt-FilterOptions-fieldSet, .AnswersVerticalGrid.CollapsibleFilters .yxt-FilterOptions-fieldSet {
margin: .75rem 0;
}
Summary of Changes
If you want a summary of the changes by file, you can reference the below:
answers-variables.scss
| Default value in v1.18 and prior | Default value in 1.19 |
|---|---|
| n/a - new | $container-width: 1000px; |
//theme specific variables |
|
--hh-universal-grid-margin: 8px; |
|
// component specific variable overrides |
|
--yxt-alternative-verticals-emphasized-font-weight: var(--yxt-font-weight-semibold); |
|
--yxt-filters-and-sorts-font-size: var(--yxt-font-size-md); |
|
// breakpoint variables |
|
$breakpoint-collapsed-filters: $container-width + 279px; |
|
$breakpoint-expanded-filters: $container-width + 280px; |
|
// control colors |
// control colors |
--yxt-color-borders: #dcdcdc; |
--yxt-color-borders: #d8d8d8; |
--yxt-color-brand-primary: #0f70f0; |
--yxt-color-brand-primary: #5387d7; |
--yxt-color-background-highlight: #fafafa; |
--yxt-color-background-highlight: white; |
--hh-view-results-button-hover-color: #0c5ecb; |
--hh-view-results-button-hover-color: #4a7ac1; |
--hh-answers-background-color: #eeeff0; |
--hh-answers-background-color: white; |
//theme specific variables |
//theme specific variables |
--hh-answers-container-width: 700px; |
--hh-answers-container-width: #{$container-width}; |
--hh-universal-grid-three-columns-width: 212px; |
--hh-universal-grid-three-columns-width: calc(calc(100% - var(--hh-universal-grid-margin) * 6) / 3); |
--hh-universal-grid-two-columns-width: 326px; |
--hh-universal-grid-two-columns-width: calc(calc(100% - var(--hh-universal-grid-margin) * 4) / 2); |
// spacing variable, used in padding/margins across the site |
// spacing variable, used in padding/margins across the site |
--yxt-base-spacing: 16px |
--yxt-base-spacing: 20px; |
Fonts.scss
| Default value in v1.18 and prior | Default value in 1.19 |
|---|---|
--yxt-font-size-xs: 10px; |
--yxt-font-size-xs: 12px; |
--yxt-font-size-sm: 12px; |
--yxt-font-size-sm: 14px; |
--yxt-font-size-md: 14px; |
--yxt-font-size-md: 16px; |
--yxt-font-size-md-lg: 16px; |
--yxt-font-size-md-lg: 18px; |
--yxt-font-size-lg: 18px; |
--yxt-font-size-lg: 20px; |
--yxt-font-size-xlg: 20px; |
--yxt-font-size-xlg: 22px; |
--yxt-font-size-xxlg: 40px; |
--yxt-font-size-xxlg: 42px; |
| n/a - new | --yxt-autocomplete-text-font-size: var(--yxt-font-size-md-lg); |
Font declarations before
@font-face
{
font-family: "Open Sans";
src: url('../assets/fonts/opensans-regular-webfont.woff') format("woff");
font-weight: $font-weight-normal;
font-style: normal;
font-display: swap;
}
@font-face
{
font-family: "Open Sans";
src: url('../assets/fonts/opensans-bold-webfont.woff') format("woff");
font-weight: $font-weight-bold;
font-style: normal;
font-display: swap;
}
@font-face
{
font-family: "Open Sans";
src: url('../assets/fonts/opensans-semibold-webfont.woff') format("woff");
font-weight: $font-weight-semibold;
font-style: normal;
font-display: swap;
}
Font declarations after
@font-face
{
font-family: "Source Sans Pro";
src: url('../assets/fonts/source-sans-pro-v14-latin-300.woff') format("woff");
font-weight: $font-weight-light;
font-style: normal;
font-display: swap;
}
@font-face
{
font-family: "Source Sans Pro";
src: url('../assets/fonts/source-sans-pro-v14-latin-regular.woff') format("woff");
font-weight: $font-weight-normal;
font-style: normal;
font-display: swap;
}
@font-face
{
font-family: "Source Sans Pro";
src: url('../assets/fonts/source-sans-pro-v14-latin-600.woff') format("woff");
font-weight: $font-weight-semibold;
font-style: normal;
font-display: swap;
}
@font-face
{
font-family: "Source Sans Pro";
src: url('../assets/fonts/source-sans-pro-v14-latin-700.woff') format("woff");
font-weight: $font-weight-bold;
font-style: normal;
font-display: swap;
}
Option Two: Preserve Current Styling
To completely preserve your current styling, get ready to start forking! If you want to keep everything as is, you just need to shadow the files from the Theme before you upgrade. Here are all of the files that we updated as part of the styling changes:
- Top level files
- static/scss/answers/theme.scss
- static/scss/answers/common/mixins.scss
- Pages
- static/scss/answers/templates/vertical-grid.scss
- static/scss/answers/templates/vertical-standard.scss
- static/scss/answers/templates/vertical-map.scss
- static/scss/answers/templates/universal-standard.scss
- Cards - shadow the scss for any cards you are using. Files will look like this:
- static/scss/answers/cards/standard.scss
- static/scss/answers/cards/faq-accordion.scss
- static/scss/answers/cards/link-standard.scss
- static/scss/answers/cards/location-standard.scss
- static/scss/answers/cards/menuitem-standard.scss
- static/scss/answers/cards/event-standard.scss
- static/scss/answers/cards/financial-professional-location.scss
- static/scss/answers/cards/job-standard.scss
- static/scss/answers/cards/product-prominentimage-clickable.scss
- static/scss/answers/cards/professional-location.scss
- static/scss/answers/cards/product-standard.scss
- Direct Answer
- static/scss/answers/directanswercards/allfields-standard.scss
- Universal sections:
- static/scss/answers/universalsectiontemplates/common.scss
- static/scss/answers/universalsectiontemplates/grid-three-columns.scss
- static/scss/answers/universalsectiontemplates/grid-two-columns.scss
- Templates:
- static/scss/answers/collapsible-filters/collapsible-filters-templates.scss
- static/scss/answers/collapsible-filters/collapsible-filters.scss