Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Pop-up Window Blocked Notification Message CSS styling

  • 3 replies
  • 0 have this problem
  • 1 view
  • Last reply by cor-el

more options

I noticed that after the recent updates, the pop-up notification for blocked pop-ups has changed from yellow to white.. This makes it very difficult to see and I almost missed it. Is there a way to revert this change using userChrome.css?

I don't understand why this unnecessary change was made. I already have my own userChrome style for the entire Firefox because it was frustrating to constantly change it back after each update.

I would appreciate any information on how to revert this change.

Thanks.

I noticed that after the recent updates, the pop-up notification for blocked pop-ups has changed from yellow to white.. This makes it very difficult to see and I almost missed it. Is there a way to revert this change using userChrome.css? I don't understand why this unnecessary change was made. I already have my own userChrome style for the entire Firefox because it was frustrating to constantly change it back after each update. I would appreciate any information on how to revert this change. Thanks.
Attached screenshots

All Replies (3)

more options

Add CSS code to the userChrome.css file in the chrome folder in the Firefox profile folder, best is probably above a possible @namespace line.


notification-message[message-bar-type="infobar"]{
 background: #ffe900 !important;
 color: #0c0c0d !important;
}

Helpful?

more options

Your code didn't help me directly, but thanks to its content I found other examples and it took me a while to put it all together and test it. It's nothing fancy, but it looks better already.

.infobar {

 background: #ffe423 !important;
 color: #0c0c0d !important;
 border-radius: 4px !important;
 /*border: none !important;*/
 padding: 5px 8px !important;
 margin: 0 !important;

}

.container.infobar::before {

 /*display: none !important;*/
 content: "" !important;
 display: block !important;
 width: 3px !important;
 position: absolute !important;
 background: #000000 !important;
 top: 0 !important;
 inset-inline-start: 0 !important;
 height: 100% !important;
 border-start-start-radius: 4px !important;
 border-end-start-radius: 4px !important;

}

.infobar > .icon {

 margin-block:  var(--infobar-vertical-margin, 11px) !important;

}

.notification-message {

 padding-block: var(--infobar-vertical-margin, 2px) !important;
 font-size: 13px !important;

}

.notification-button-container > .notification-button {

 margin-block: var(--infobar-button-vertical-margin, 6px) !important;
 background: #ffffff !important;
 border: 1px solid #ffffff !important;

}

.notification-button-container > .notification-button:hover {

 border: 1px solid #dadada !important;
 background: #f7f7f7 !important;

}

.notification-close {

 margin: var(--infobar-button-vertical-margin, 4px) 8px !important;

}

Helpful?

more options

Sorry about the mix up for posting CSS code from Firefox 78 when trying to find the yellow color used in that version.

I meant to post this code for 115:

notification-message{background: #ffe900 !important; color: #0c0c0d !important;}

Helpful?

Ask a question

You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.