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: url('https://kintara.gg/site/img/bg1.png') !important;
background-position: top center !important;
}
#mw-page-base, #mw-head-base {
background-image: none !important;
background-color: transparent !important;
}
/* 2. Resize and scale the actual logo image inside the link */
#p-logo a {
display: block !important;
width: 120px !important; /* Change this value to resize the width */
height: 120px !important; /* Change this value to resize the height */
background-size: contain !important; /* Forces the image to scale perfectly without cutting off */
background-position: center !important;
background-repeat: no-repeat !important;
margin: 0 auto !important; /* Centers the logo image inside the 160px column box */
}
/* 5. Force the header text and navigation labels to be Pale Greenish-Yellow */
#p-personal ul li a,
.vectorTabs li a,
#p-search h3,
.vectorMenu h3 span,
#mw-panel div.portal h3 {
color: #d8eb78 !important; /* Pale greenish-yellow */
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9) !important; /* Keeps it legible against the banner */
}
/* 6. Fix user link hover states so they shift colors cleanly when highlighted */
#p-personal ul li a:hover,
.vectorTabs li a:hover {
color: #ffffff !important; /* Shifts to pure white on hover for a nice interactive feel */
}
/* 7. Update the active/selected tab outline structure */
.vectorTabs li.selected a {
background-color: rgba(216, 235, 120, 0.18) !important; /* Transparent greenish-yellow tint background */
border: 1px solid rgba(216, 235, 120, 0.4) !important; /* Soft glow border around the tab */
border-radius: 4px;
color: #ffffff !important;
}
/* 8. Optional: Change the magnifying glass search button tint to match */
#searchButton {
filter: invert(88%) sepia(21%) saturate(990%) hue-rotate(24deg) brightness(97%) contrast(93%) !important;
}