MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
Created page with "→CSS placed here will be applied to all skins: →1. Target the global top header bar: .mw-header { →Replace 'YOUR_IMAGE_URL' with your actual uploaded image URL: background-image: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url('YOUR_IMAGE_URL'); background-size: cover; background-position: center; background-repeat: no-repeat; →Optional: Adds a bit of depth separation from the rest of the wiki content: borde..." |
No edit summary |
||
| Line 3: | Line 3: | ||
.mw-header { | .mw-header { | ||
/* Replace 'YOUR_IMAGE_URL' with your actual uploaded image URL */ | /* Replace 'YOUR_IMAGE_URL' with your actual uploaded image URL */ | ||
background-image: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url(' | background-image: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url('https://pbs.twimg.com/profile_banners/2049672463005474816/1778779323'); | ||
background-size: cover; | background-size: cover; | ||
background-position: center; | background-position: center; | ||
Revision as of 05:38, 15 June 2026
/* CSS placed here will be applied to all skins */
/* 1. Target the global top header bar */
.mw-header {
/* Replace 'YOUR_IMAGE_URL' with your actual uploaded image URL */
background-image: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url('https://pbs.twimg.com/profile_banners/2049672463005474816/1778779323');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
/* Optional: Adds a bit of depth separation from the rest of the wiki content */
border-bottom: 2px solid var(--border-color-base, #e2d9c8);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}
/* 2. Style text & navigation icons inside the header to remain crisp and readable */
.mw-header,
.mw-header .citizen-header__logo,
.mw-header .citizen-header__item,
.mw-header .citizen-ui-icon {
color: #ffffff !important;
}
/* 3. Force links and navigation text in the header to be white */
.mw-header a,
.mw-header .citizen-header-links a,
.mw-header button {
color: #ffffff !important;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); /* Helps text pop off the image background */
}
/* 4. Fix search bar visibility so it doesn't clash with the background */
.mw-header .citizen-search-form__input {
background-color: rgba(255, 255, 255, 0.15) !important;
backdrop-filter: blur(4px);
border: 1px solid rgba(255, 255, 255, 0.3) !important;
color: #ffffff !important;
}
/* Placeholder fix for search input text */
.mw-header .citizen-search-form__input::placeholder {
color: rgba(255, 255, 255, 0.7) !important;
}