Location Bias Styling

[Ariana_Lavelli]

Hi all!

I’m trying to customize the CSS of the location bias component, but I’ve failed in targeting a few times now. Is there something special I need to do?

I’ve tried targeting the overall class, the container, and the .yxt-locationbias-update loc. I’ve even gone as far as adding !important so that it would override the styling that’s being applied currently (which I can’t find in either the variables or the css files).

This is the styling I want:

.yxt-locationBias
{
line-height: 1.86667;
font-size: 15px;
font-weight: normal;
font-family: “Graphik-Regular”;
border-top: solid 1px #ffb500;
margin: 40px 0;
padding-top: 12px;
color: #000;

  a {

  font-weight: medium;
  font-family: "Graphik";
  color: #000;
  text-decoration: underline;
  text-decoration-color: #ffb500;
  transition: color 0.25s;
  }

  a:hover, a:focus {
    color: #7a6754;
  }

}

This is the styling currently:

This is the goal:

Unfortunately, this is not updating accordingly and I tried to target all of the classes, so unsure what else I can do.

Thanks!

[Sam_Torres]

Hey @Ariana_Lavelli - your styling is in good shape, and I’ve helped you identify the classes below (this is a sample starting point which should get you moving in the right direction):

.yxt-LocationBias {
  strong {
    color: black;
  }
}

.yxt-locationBias-locSource {
  color: black;
}

.yxt-locationBias-updateLoc {
  text-decoration: underline;
  color: black;
  text-decoration-color: #ffb500;
  font-weight: bold;
  &:hover{
    text-decoration: none;
  }
} 

The above produces the below, which appears close to your desired effect:

Let me know if this helps,
Sam

[Ariana_Lavelli]

Hi Sam!

I included the following:

And it didn’t work:

How did you get it to render as you did?

Best,
Ariana

[Sam_Torres]

Make sure you place it outside of the main Answers class in answer.scss. The location bias component is in a separate class in the footer.

[Ariana_Lavelli]

Thanks Sam!!

In the same vein, how would you go about updating the location bias top border so it autofits to the borders of the above sections:

Thanks!
Ariana