Customizing CSS for QA Submission Title Bar & Button to match Theme

Search Best Practices - Search Front-End
1

I’m trying to customize the CSS for the QA Submission Title Bar and button to match the theme of my other vertical title bars (photo attached for reference). Is there an easier way than updating the answers.scss file or is that the place to do it? Here is what I have in the answers.scss file so far and some of it works but it’s not 100%. Also, the screenshot I took doesn’t reflect these changes but just an example to show what I want it to look like based on the jobs vertical. Thanks!

yxt-QuestionSubmission-titleIconWrapper, yxt-QuestionSubmission-title, yxt-QuestionSubmission-titleDescription, yxt-QuestionSubmission-toggle–expanded, yxt-QuestionSubmission-toggle, yxt-QuestionSubmission-submitButton
{
color: var(–yxt-results-title-bar-text-color);
}
.yxt-QuestionSubmission-titleBar, yxt-QuestionSubmission-submitButton
{
background: var(–yxt-results-title-bar-background)
}

peloton-q&a-scss-question
peloton-q&a-scss-question1484×1462 192 KB

2

Hi John,

Yes, you will need to update the answers.scss file for these customizations. You’re on the right track though! Just make sure your syntax is correct - you need a period (.) before your class names, and a semicolon (;) after each rule.

I would try something like below. It sets the text color of the title/description, icon color of the SVGs, background color for the title bar and the button, and lastly, the hover state behavior of the button.

.yxt-QuestionSubmission-title, 
.yxt-QuestionSubmission-titleDescription
{
  color: var(--yxt-results-title-bar-text-color);
}
.yxt-QuestionSubmission-titleIconWrapper svg, 
.yxt-QuestionSubmission-toggle svg
{
  fill: var(--yxt-results-title-bar-text-color);
}

.yxt-QuestionSubmission-titleBar, 
.yxt-QuestionSubmission-submitButton
{
  background: var(--yxt-results-title-bar-background);
}

.yxt-QuestionSubmission-submitButton:not(:disabled):hover
{
  background: var(--yxt-results-title-bar-background);
  text-decoration: underline;
}

Let me know if you have questions on the CSS!

1 Like
3

Thank you, @afarooque! Super helpful and all looks good. Also now understand what I was doing wrong. You’re the best!