🗓 December 8, 2020: Hitchhikers Office Hours

Webinars and Office Hours
1

Add questions or topics below that you would like to have answered or discussed during this office hours sessions!

2

Can we review popular queries and their intended behavior? Currently they are appearing below query suggestions when clicking into the search bar and I wanted to know if there is a way to remove them here without disabling them entirely?

3

From a styling perspective, I would also like to see a walkthrough of how to round the edges of product-prominentimage cards

1 Like
4

Can we go over how to update the SDK, the difference between the SDK and the theme, and any best practices or considerations while updating?

5

Can we go over setting dashboard notifications for a desired time window? I’ve been trying to set up a report notification so that every week I can see data for the past 7 days, but in the pdf attached to the notification email, the dates are not updating dynamically and are showing data from a few weeks back.

6

Thank you for your questions and for joining Office Hours today! Here’s the recording:

Following up on styling rounded corners on cards, you can follow the code we walked through (see below) - be careful of copying code into Notes and then back again as the spacing is different!

Add the following to your answers.scss file within .Answers {}

.HitchhikerProductProminentImage {
  border-radius: 25px;
}

.HitchhikerProductProminentImage-img {
  border-radius: 25px 25px 0 0;
}

and add the following outside of .Answers {}. Be sure to edit the class name if you’re using a different card. You can use the process we walked through in Office Hours to Inspect the page and find element class names.

.AnswersVerticalGrid .Hitchhiker-3-columns .yxt-Card-child,
.HitchhikerResultsGridThreeColumns-Card--universal {
  border-radius: 25px;
}

image
image2054×1206 314 KB

2 Likes
7

Thanks, Kristy!

The above code works in vertical search, but in universal search, the right-angle borders are still visible.

Any idea on what to target to curve these as well?

Snag_3e860fc
Snag_3e860fc796×226 91 KB

Snag_3e883c6
Snag_3e883c6785×164 69.5 KB

Thank you!

8

Great callout Henry! You can use the same process we walked through during Office Hours to find the class names of the cards you want to target. This is important as you may not be using the same cards as our sample code. Targeting the universal cards may look something like this:

.HitchhikerResultsGridThreeColumns-Card--universal {
  border-radius: 3px
}

I’ve updated the code above to include it as well.