MinimalBanners slims down the banner notifications that appear above the site header whenever a user receives announcements from Fandom or performs certain actions. Lastly, MinimalBanners limits the number of banner notifications visible at any given time to three (until all have been dismissed or the page is reloaded) in order to prevent this monstrosity.
Installation
Configuration
All of the below CSS snippets must be inserted below the import in order to work.
Not so slim
If the MinimalBanners are just a bit too slim, this CSS can be used to increase their height:
.wds-banner-notification__container .wds-banner-notification {
min-height: 30px;
}
Raise 30 to any desired value.
Legibility
MinimalBanners decreases font-size slightly. If the text is too small, this CSS can be used to increase its size:
/* For desktop */
.wds-banner-notification__container .wds-banner-notification .wds-banner-notification__text {
font-size: larger|large|x-large|xx-large;
}
/* For mobile */
@media only screen and (max-width: 768px) {
.wds-banner-notification__container .wds-banner-notification .wds-banner-notification__text {
font-size: larger|large|x-large|xx-large;
}
}
Quantity
This CSS can be used to increase or decrease the number of visible banner motifications:
.wds-banner-notification__container .wds-banner-notification:nth-of-type(3) ~ .wds-banner-notification {
display: none;
}
Replace 3 with any positive integer.
Optional JS
The (optional) JS will give you a button in the my tools menu that, when clicked, hides all banners currently on the page by closing them.
Changelog
- 02/07/2019
- Initial revision.
- 02/08/2019
- Complementary JavaScript added by Sophiedp.
- 09/19/2020
- UCP support completed.