10,860
editsAd placeholder
MediaWiki:Vector.css: Difference between revisions
Jump to navigation
Jump to search
no edit summary
No edit summary |
No edit summary |
||
| Line 28: | Line 28: | ||
* == Advertisement == | * == Advertisement == | ||
* | * | ||
* On Vector (desktop) we show | * On Vector (desktop) we show two ad units: | ||
* | * - Header: Static location, usually top-right of the article, below search. | ||
* - Sidebar: Sticky (follows on scroll), within the sidebar. | |||
* | * | ||
* The | * The divs for the ads are added via hooks in LocalSettings.php. | ||
* | * | ||
* The "mw-ads-enabled" class is added via a hook in LocalSettings. It's only | * The "mw-ads-enabled" class is also added via a hook in LocalSettings.php. | ||
* It's only added for anonymous visitors, but could be added explicitly for | |||
* testing | * testing or if you're a masochist who loves ads. | ||
*/ | */ | ||
/* | /* | ||
* === | * === Header ad banner === | ||
* | |||
* There are two possible layouts for this: | |||
* - If the screen is wide enough, it's to the right of the article header, | |||
* which will get a maximum width to leave place for the banner. | |||
* - If the screen is too narrow, the ad banner will be above the article's | |||
* header, and will be centered. | |||
*/ | */ | ||
/* The container for the ad. */ | |||
/* The container for the ad | |||
#bg3wiki-header-ad { | #bg3wiki-header-ad { | ||
display: none; | display: none; | ||
| Line 64: | Line 58: | ||
width: 468px; | width: 468px; | ||
height: 60px; | height: 60px; | ||
border: 1px dashed var(--bdr-color); | border: 1px dashed var(--bdr-color); | ||
align-content: center; | align-content: center; | ||
overflow: hidden; | overflow: hidden; | ||
} | |||
/* The wide layout where the header ad is to the top-right. */ | |||
@media screen and (min-width: 1200px) { | |||
/* Make room for the banner to the right of the heading. */ | |||
.mw-ads-enabled #firstHeading { | |||
/* Make a bit more vertical room for the banner. */ | |||
margin-top: 22px; | |||
/* Ad banner is 468px. Add another 16px as padding. */ | |||
max-width: calc(100% - 468px - 16px); | |||
} | |||
.mw-ads-enabled .mw-indicators { | |||
/* In sync with the 16px above. */ | |||
margin-right: 16px; | |||
} | |||
#bg3wiki-header-ad { | |||
float: right; | |||
} | |||
} | |||
/* The narrow layout where the header ad is above the article header. */ | |||
@media screen and (max-width: 1199px) { | |||
#bg3wiki-header-ad { | |||
margin: auto; | |||
} | |||
} | } | ||