MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
/* 1. Target the top header block in Vector Legacy */ | |||
/* 1. Target the | #mw-head { | ||
/* Replace YOUR_IMAGE_URL with your actual uploaded image URL */ | |||
/* Replace | background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('YOUR_IMAGE_URL') !important; | ||
background-image: linear-gradient(rgba(0, 0, 0, 0. | background-size: cover !important; | ||
background-size: cover; | background-position: center !important; | ||
background-position: center; | background-repeat: no-repeat !important; | ||
background-repeat: no-repeat; | height: 160px; /* Gives the header enough room to show the banner */ | ||
} | } | ||
/* 2. | /* 2. Adjust the main page content downward so it doesn't overlap your new banner */ | ||
#content, #mw-panel { | |||
margin-top: 160px !important; /* Must match the height of your #mw-head above */ | |||
} | } | ||
/* 3. | /* 3. Make the navigation tabs and text white so they remain readable over the image */ | ||
#p-personal ul li a, | |||
. | #left-navigation .vectorTabs li a, | ||
#right-navigation .vectorTabs li a, | |||
#p-search h3 { | |||
color: #ffffff !important; | color: #ffffff !important; | ||
text-shadow: 0 1px 3px rgba(0, 0, 0, 0. | text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important; | ||
} | } | ||
/* 4. Fix | /* 4. Fix tab backgrounds so they blend into your banner */ | ||
. | .vectorTabs, .vectorTabs li, .vectorTabs li a { | ||
background- | background-image: none !important; | ||
background-color: transparent !important; | |||
} | } | ||
/* | /* 5. Highlight the active tab slightly so users know what page they are on */ | ||
. | .vectorTabs li.selected { | ||
color: rgba(255, 255, 255, 0. | background-color: rgba(255, 255, 255, 0.15) !important; | ||
border-radius: 4px 4px 0 0; | |||
} | } | ||
Revision as of 05:40, 15 June 2026
/* 1. Target the top header block in Vector Legacy */
#mw-head {
/* Replace YOUR_IMAGE_URL with your actual uploaded image URL */
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('YOUR_IMAGE_URL') !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
height: 160px; /* Gives the header enough room to show the banner */
}
/* 2. Adjust the main page content downward so it doesn't overlap your new banner */
#content, #mw-panel {
margin-top: 160px !important; /* Must match the height of your #mw-head above */
}
/* 3. Make the navigation tabs and text white so they remain readable over the image */
#p-personal ul li a,
#left-navigation .vectorTabs li a,
#right-navigation .vectorTabs li a,
#p-search h3 {
color: #ffffff !important;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}
/* 4. Fix tab backgrounds so they blend into your banner */
.vectorTabs, .vectorTabs li, .vectorTabs li a {
background-image: none !important;
background-color: transparent !important;
}
/* 5. Highlight the active tab slightly so users know what page they are on */
.vectorTabs li.selected {
background-color: rgba(255, 255, 255, 0.15) !important;
border-radius: 4px 4px 0 0;
}