MediaWiki:Common.css
From Applied Science
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/** * Custom CSS for Right Column Ad Banner.
* * The ad element (#right-column-banner-ad) is injected after the main
* content using the SkinAfterContent hook in LocalSettings.php.
* * This CSS uses a Media Query to ensure the ad is ONLY displayed
* when the viewport is wide enough to prevent content overlap.
*/
/* ---------------------------------------------------------------------- */
/* 1. DEFAULT STATE: Hide the ad element by default on small screens. */
/* ---------------------------------------------------------------------- */
#right-column-banner-ad {
display: none; /* Hidden by default */
}
/* ---------------------------------------------------------------------- */
/* 2. MEDIA QUERY: Show the ad only on wide screens (Desktop/Full-screen) */
/* ---------------------------------------------------------------------- */
/* MediaWiki's Vector skin often uses ~1200px or ~1400px as a breakpoint
for the side column. Adjust 1400px if needed for your specific layout.
*/
@media screen and (min-width: 1400px) {
#right-column-banner-ad {
/* Re-enable visibility */
display: block;
/* Positioning as defined before */
position: absolute;
/* Adjust these values based on your specific skin layout. */
/* 15px is a safe padding from the right edge. */
right: 2em;
/* Vertical position: Controls how far down it appears.
Adjust 300px based on how far below the page tools you want it. */
top: 450px;
/* Size */
width: 200px;
/* Visuals */
padding: 0px;
background-color: transparent;
border: 0px;
border-radius: 6px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
/* Ensure it layers correctly (if it was overlapping the toolbox) */
z-index: 10;
}
}
/* CSS placed here will be applied to all skins */
.code {
padding-left:0.5em;
}
.bullet_margin {
padding-left:1.5em;
}