MediaWiki:Common.css

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)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* 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 */
    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;
}