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.

/* 1. Clear out Vector's default background slices */
body {
    background-image: none !important;
    background-color: #f4f1ea !important; /* Sets your global site background color below the header */
}
#mw-page-base, #mw-head-base {
    background-image: none !important;
    background-color: transparent !important;
    height: 0 !important;
}

/* 2. Create the unified full-width header banner container */
#mw-head {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100% !important;
    height: 180px; /* Adjust height to match how much of your art you want visible */
    
    /* Replace YOUR_IMAGE_URL with your actual uploaded image URL */
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('YOUR_IMAGE_URL') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* 3. Push the main content container down so it doesn't clip underneath the banner */
#content {
    margin-top: 180px !important; /* Must match the height of your #mw-head above */
}

/* 4. Push the left-side navigation panel (Logo + Sidebar) down to match */
#mw-panel {
    top: 180px !important;
}

/* 5. Make all text, links, and search icons sitting inside the banner readable */
#p-personal ul li a,
.vectorTabs li a,
#p-search h3,
.vectorMenu h3 span {
    color: #ffffff !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8) !important;
}

/* 6. Strip the default backgrounds from the navigation tabs so they embed cleanly */
.vectorTabs, .vectorTabs li, .vectorTabs li a {
    background-image: none !important;
    background-color: transparent !important;
    border: none !important;
}

/* 7. Subtle highlight for the active tab to preserve navigation clarity */
.vectorTabs li.selected a {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-radius: 4px;
    color: #ffffff !important;
}