MediaWiki:Common.css
Jump to navigation
Jump to search
Note: After saving, 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)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.
/********************************************
* Holdfast Wiki — Global Background System
* Banner (top-left) + Dark Gradient Column + Parchment Base
********************************************/
/* ===== Variables ===== */
:root {
--hf-banner-w: 1250px; /* Banner width */
--hf-banner-h: 300px; /* Banner height */
--hf-leftcol-w: 5000px; /* Dark sidebar column width */
--hf-parchment: #E1DCCE; /* Base page color */
--hf-left-top: #2F2D2B; /* Gradient top color */
--hf-left-bot: #1E1E1D; /* Gradient bottom color */
}
/* ===== Page Background (no shifting, full overlay) ===== */
html, body {
margin: 0 !important;
background:
/* 1) Holdfast banner (top-left only) */
url("/Special:FilePath/BannerImage.png") left top no-repeat,
/* 2) Full-width dark gradient (ensures top bar and left sidebar share tone) */
linear-gradient(to bottom, var(--hf-left-top) 0%, var(--hf-left-bot) 100%) left top repeat-y,
/* 3) Global parchment underneath everything */
var(--hf-parchment);
background-size:
var(--hf-banner-w) var(--hf-banner-h), /* banner */
var(--hf-leftcol-w) 100%, /* dark column gradient */
auto; /* parchment */
background-attachment: fixed, fixed, fixed;
background-color: var(--hf-parchment);
background-repeat: no-repeat, no-repeat, repeat;
}
/* ===== Transparent interface elements ===== */
#mw-page-base,
#mw-head-base,
#mw-head,
.vector-header-container,
#mw-panel,
#column-one,
.mw-sidebar {
background: transparent !important;
}
/* ===== Opaque parchment for main content ===== */
#content,
.mw-body,
.vector-body .mw-body,
.mw-workspace-container,
.mw-content-container {
background: var(--hf-parchment) !important;
position: relative;
z-index: 1;
}
/* ===== Sidebar text & link colors over dark gradient ===== */
#mw-panel,
#column-one,
.mw-sidebar {
color: #EEEDEB !important;
background: transparent !important;
}
#mw-panel a,
#column-one a,
.mw-sidebar a {
color: #EEEDEB !important;
text-decoration: none;
}
#mw-panel a:hover,
#column-one a:hover,
.mw-sidebar a:hover {
color: #5A65EA !important;
text-decoration: underline;
}
/* ===== Optional: subtle divider line between column and content ===== */
body::before {
content: "";
position: fixed;
left: var(--hf-leftcol-w);
top: 0;
width: 1px;
height: 100%;
background: rgba(217, 215, 209, 0.25);
pointer-events: none;
z-index: 0;
}
/* ===== Sidebar width adjustment ===== */
/* For Vector (legacy and 2022) and other skins */
#mw-panel,
.vector-menu,
.mw-sidebar,
#column-one {
width: 200px !important; /* sets sidebar width */
}
/* Shift the content area accordingly */
#content,
.mw-body,
.vector-body,
.mw-content-container {
margin-left: 180px !important; /* same as sidebar width */
}
/* === Custom Site Logo: Holdfast White/Gold Compass === */
/* For both Vector (legacy) and Vector-2022 skins */
#p-logo a,
.mw-wiki-logo {
background-image: url("/Special:FilePath/Holdfast_Logo_White_Gold_Compass.png") !important;
background-size: contain !important; /* scale proportionally */
background-repeat: no-repeat !important;
background-position: center !important;
width: 150px !important; /* adjust width */
height: 150px !important; /* adjust height */
display: block;
}
/* Optional: hide default text title if it shows up */
#p-logo-text,
.mw-wiki-logo-text {
display: none !important;
}