How to override all widget styles on a page

[david_myers]

In our Helsinki ServicePortal we use Icon Link widgets on a page.   I created a page specific style to set the color when you hover over the link.  

a:hover {

color: #07639d;

}

We upgraded to Jakarta and the Icon Link widget now includes Widget specific CSS to style the hover.   It is no longer using my page CSS and it seems the Widget CSS is a higher priority.  

In the widget CSS I now see this, which was not there before the upgrade.  

.text-default {

  color: $brand-primary;

  &:hover {

      color: darken($brand-primary, 20%);

  }

}

[michaelskae]

Hi David,

You can probably use the CSS rule !important on your page specific style, although that is not ideal.

However, the widget was updated in Istanbul and now the text in the widget will automatically pick up the SCSS for the colours in the branding editor:

Configure portal branding

So it may be easier to set up the brand colour for the link, but this will only make the hover colour 20% darker.

Another option could be to clone the widget and provide your own style.

Clone a widget

Mike

[david_myers]

Thanks for the helpful reply.  

I see the text below the icon is applying the correctly styled color that I defined, but only the glyph is using the 20% darker styling from the widget.

Before I use !important or clone/modify the widget I will look to see if there's any other option I have to style it.