SP Widget CSS is not showing up for certain portals/themes

[yundlu316]

Our team built a table widget for Service Portal and defined our own CSS instead of using bootstrap classes.  Our widget looks great with the ootb HRJ theme:

Our CSS is pretty normal, but we chose to not use bootstrap classes for a bit more flexibility:

.red, .yellow, .green {
  text-align: center;
}

.red {
  background: rgba($overdue,0.5);
}

.yellow {
  background: rgba($due-today,0.5);
}

.green {
  background: rgba($due-later,0.5);
}

.empty-state-content {
  color: $danger;
  text-align: center;
  margin-bottom:0;
}

.flex {
  display: flex;
  align-items: center;
  //justify-content: space-between;
}

.table {
  display: table;
  padding:10px;
}

.table-header {
  font-weight: bold;
}

.table-row {
  display: table-row;
}

.table-row:not(:first-child):hover {
  background: $color-row-hover;
  //font-weight:bold;
}

.table-row:not(:last-child) .table-cell, .table-row .table-header {
	border-bottom: 1px solid $color-light;
}

.table-cell, .table-header {
  display: table-cell;
  padding: 10px;
}

When we switch the portal to something other than hrportal (for example, sp), all of our table styles disappear:

Any thoughts on why this happens and how to fix it?  Thanks!

[Allen Andreas · Accepted solution]

How are you switching to another portal? Do you mean you placed this widget on another portal's page?

Which creates a new instance...

Then did you check that the CSS in that instance is actually there?

Please mark reply as Helpful/Correct, if applicable. Thanks!

[Allen Andreas]

Hi,

Please mark my post as Helpful/Correct if I've assisted you. Thanks!

[yundlu316]

Hi Allen, so if the hrportal theme has predefined SCSS elements such as $black = #000000 and the sp portal theme does NOT have that defined, and I use $black in the widget CSS...will that cause the sp portal page to not render the styles?

[ChrisBurks]

It depends on where you are placing and defining the variable and CSS. If the variable is defined within the theme or portal form and the page is used in a different portal that is using a different theme then yes it WON'T work because it doesn't exist in that portal or its theme.