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. Apply the banner image globally across the entire screen width */
body {
    background-color: #f4f1ea !important; /* Base site color below the header */
    background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url('https://pbs.twimg.com/profile_banners/2049672463005474816/1778779323') !important;
    background-repeat: no-repeat !important;
    background-size: 100% 160px !important; /* Spans 100% width, locked to 160px tall */
    background-position: top center !important;
}

/* 2. Clear out Vector's old-school default background blocks */
#mw-page-base, #mw-head-base {
    background-image: none !important;
    background-color: transparent !important;
    height: 160px !important;
}

/* 3. Shift the left sidebar (and your logo) up so it cleanly overlays the banner art */
#mw-panel {
    position: absolute !important;
    top: 0 !important;
    padding-top: 20px !important; /* Gives the logo a clean breathing room from the screen edge */
    z-index: 100 !important;
}

/* 4. Shift the action links/tabs down to look integrated with the layout style */
#right-navigation, #left-navigation {
    margin-top: 110px !important; 
}
#p-personal {
    top: 10px !important; /* Keeps login/utility links perfectly lined up at the top-right */
}

/* 5. Force the header text and navigation labels to be white for high visibility */
#p-personal ul li a,
.vectorTabs li a,
#p-search h3,
.vectorMenu h3 span,
#mw-panel div.portal h3 {
    color: #ffffff !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8) !important;
}

/* 6. Make left navigation links below the banner dark again so they stay readable */
#mw-panel div.portal div.body ul li a {
    color: #0645ad !important;
    text-shadow: none !important;
}

/* 7. Clean up the native button styling so it embeds seamlessly */
.vectorTabs, .vectorTabs li, .vectorTabs li a {
    background-image: none !important;
    background-color: transparent !important;
    border: none !important;
}
.vectorTabs li.selected a {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-radius: 4px;
}