Global Notice: Background image and color disappears frequently

[LilTrashPanda (Anna)]

I’ve updated the CSS of the Global Notice (#ember811 and .alert.alert-info) to appear different in 5 specific categories (still default on Main Page and other categories), however I’ve noticed that either when using the “Back” shortcut to go from a “child” category to a “parent” (both of which share the edited CSS) or navigating to the Main Page and then back in to one of the categories that has the edited CSS, there are times when the Global Notice loses its background image and color entirely.

Although I’m not certain of the exact steps needed to reproduce this issue, it does happen fairly often and requires a hard refresh (ctrl+f5) to bring those elements back.

Normal:

Bugged:

Here’s my CSS related to the Global Notice:

#ember811 {
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  background-image: url("http://www.deformers.com/_images/bgrd-iconX991.png");
  background-repeat: no-repeat;
  background-position: left;
  background-color: #7c6ba3;
  border: 10px solid transparent;
  border-radius: 6px;
  margin: 5px 0 20px 0px;
}

.alert.alert-info {
  color: #f4f4f4;
  background-color: rgba(244, 244, 244, 0);
  //width: 84%;
  padding: 10px;
  margin: 0px 0px 0px 170px;
}

[tgxworld (Alan Tan)]

Aha #ember811 is the reason why the style isn’t being applied consistetly.

https://meta.discourse.org/t/ember-numbers-do-they-change/23970/2?u=tgxworld

.alert-global-notice will probably be the class that you want to use

[LilTrashPanda (Anna)]

Ah, I see!

After a bit of troubleshooting, looks like I was able to get it to look like I wanted it to using this new Class. Thanks so much!

For others that may be interested in the updated CSS (since things definitely got weird after I changed it), here ya go:

.alert-global-notice {
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  background-image: url("http://www.deformers.com/_images/bgrd-iconX991.png");
  background-repeat: no-repeat;
  background-position: left;
  padding-left: 175px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: 5px;
  background-color: #7c6ba3;
  border-left: 10px solid transparent;
  border-top: 8px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid transparent;
  border-radius: 6px;
  margin: 16px 0px 16px 0px;
}

.alert.alert-info {
  color: #f4f4f4;
}