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.
/* Hide all logos */
.mw-wiki-logo,
.mw-logo,
.mw-logo-icon,
.mw-logo-wordmark,
.vector-logo,
#p-logo,
#p-logo a,
.mw-logo-container {
display: none !important;
visibility: hidden !important;
}
/* Hide favicon references */
link[rel="icon"],
link[rel="shortcut icon"],
link[rel="apple-touch-icon"] {
display: none !important;
}
/* CSS to move Home link to bottom */
#p-navigation .pBody ul {
display: flex;
flex-direction: column;
}
#p-navigation .pBody ul li:first-child {
order: 999; /* Moves to end */
margin-top: auto;
}
/* COMPLETE FLAT DESIGN CSS FOR MEDIAWIKI */
/* Reset all fonts to Arial */
*, body, h1, h2, h3, h4, h5, h6, p, div, span, a, li, td, th,
input, textarea, select, button {
font-family: Arial, sans-serif !important;
}
/* Remove all shadows and borders globally */
* {
box-shadow: none !important;
text-shadow: none !important;
border-radius: 0 !important;
}
/* Main content area - completely clean */
#content {
background: #ffffff !important;
border: none !important;
box-shadow: none !important;
margin: 0 !important;
padding: 20px !important;
}
/* Remove all heading underlines and borders */
h1, h2, h3, h4, h5, h6 {
border: none !important;
border-bottom: none !important;
border-top: none !important;
background: none !important;
background-image: none !important;
margin: 20px 0 15px 0 !important;
padding: 0 !important;
color: #333 !important;
}
/* Page title */
.firstHeading {
border: none !important;
border-bottom: none !important;
background: none !important;
color: #333 !important;
font-size: 28px !important;
font-weight: bold !important;
margin: 0 0 20px 0 !important;
padding: 0 !important;
}
/* Remove all sidebar styling */
.portlet {
background: none !important;
background-image: none !important;
border: none !important;
box-shadow: none !important;
margin: 0 0 15px 0 !important;
}
/* Sidebar headers - completely clean */
.portlet h3, .portlet h5 {
background: none !important;
background-image: none !important;
border: none !important;
border-bottom: none !important;
color: #333 !important;
font-weight: bold !important;
font-size: 14px !important;
padding: 8px 0 5px 0 !important;
margin: 0 !important;
}
/* Sidebar links - clean style */
.portlet .pBody ul {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.portlet .pBody ul li {
margin: 0 !important;
padding: 0 !important;
border: none !important;
background: none !important;
}
.portlet .pBody ul li a {
color: #0066cc !important;
text-decoration: none !important;
padding: 4px 0 !important;
display: block !important;
font-size: 13px !important;
border: none !important;
background: none !important;
}
.portlet .pBody ul li a:hover {
color: #004499 !important;
background: none !important;
text-decoration: underline !important;
}
/* Remove all tab styling */
#p-cactions {
background: none !important;
border: none !important;
margin: 0 !important;
padding: 0 !important;
}
#p-cactions ul {
background: none !important;
border: none !important;
margin: 0 !important;
padding: 0 !important;
}
#p-cactions li {
background: none !important;
border: none !important;
margin: 0 5px 0 0 !important;
padding: 0 !important;
}
#p-cactions li a {
background: none !important;
border: none !important;
color: #0066cc !important;
padding: 8px 15px !important;
text-decoration: none !important;
display: block !important;
}
#p-cactions li.selected a {
background: none !important;
border: none !important;
color: #333 !important;
font-weight: bold !important;
}
#p-cactions li a:hover {
background: #f0f0f0 !important;
color: #004499 !important;
}
/* Remove all table styling */
table {
border: none !important;
border-collapse: collapse !important;
background: none !important;
}
table th, table td {
border: none !important;
background: none !important;
padding: 8px !important;
}
/* Gallery styling - completely clean */
.gallery {
background: none !important;
border: none !important;
padding: 0 !important;
margin: 20px 0 !important;
}
.gallerybox {
background: none !important;
border: none !important;
margin: 10px !important;
padding: 0 !important;
}
.gallerybox .thumb {
background: none !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
}
.gallerybox .gallerytext {
background: none !important;
border: none !important;
padding: 5px 0 0 0 !important;
margin: 0 !important;
font-size: 13px !important;
color: #666 !important;
}
/* Remove all thumb/image backgrounds */
.thumb {
background: none !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
}
.thumbinner {
background: none !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
}
.thumbcaption {
background: none !important;
border: none !important;
padding: 5px 0 0 0 !important;
margin: 0 !important;
font-size: 13px !important;
color: #666 !important;
}
/* Remove infobox styling */
.infobox {
background: none !important;
border: none !important;
margin: 0 0 20px 20px !important;
padding: 0 !important;
width: 300px !important;
}
.infobox th, .infobox td {
background: none !important;
border: none !important;
padding: 5px !important;
vertical-align: top !important;
}
.infobox th {
font-weight: bold !important;
color: #333 !important;
}
/* Remove all form styling */
input, textarea, select {
border: 1px solid #ccc !important;
background: #ffffff !important;
padding: 5px !important;
border-radius: 0 !important;
}
/* Remove footer styling */
#footer {
background: none !important;
border: none !important;
border-top: 1px solid #eee !important;
margin-top: 40px !important;
padding: 20px 0 !important;
color: #666 !important;
font-size: 12px !important;
}
/* Remove personal tools styling */
#p-personal {
background: none !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
}
#p-personal ul {
background: none !important;
border: none !important;
margin: 0 !important;
padding: 0 !important;
}
#p-personal li {
background: none !important;
border: none !important;
margin: 0 5px 0 0 !important;
padding: 0 !important;
}
#p-personal li a {
color: #0066cc !important;
text-decoration: none !important;
padding: 3px 0 !important;
font-size: 13px !important;
}
/* Remove search box styling */
#p-search {
background: none !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
}
#searchInput {
border: 1px solid #ccc !important;
background: #ffffff !important;
padding: 5px !important;
width: 100% !important;
}
/* Remove all special page styling */
.mw-special-Watchlist, .mw-special-Contributions,
.mw-special-RecentChanges {
background: none !important;
border: none !important;
}
/* Remove edit section links styling */
.mw-editsection {
background: none !important;
border: none !important;
font-size: 12px !important;
}
.mw-editsection a {
color: #0066cc !important;
text-decoration: none !important;
}
/* Remove all diff styling */
.diff {
background: none !important;
border: none !important;
}
/* Remove all navigation styling */
.mw-navigation {
background: none !important;
border: none !important;
}
/* Clean body background */
body {
background: #ffffff !important;
margin: 0 !important;
padding: 0 !important;
}
/* Remove Vector skin specific styling */
.vector-menu {
background: none !important;
border: none !important;
}
.vector-menu-tabs {
background: none !important;
border: none !important;
}
.vector-menu-tabs li {
background: none !important;
border: none !important;
}
/* Remove all gradients and effects */
.mw-body, .mw-body-content, .mw-content-ltr,
.mw-content-rtl, .mw-parser-output {
background: none !important;
border: none !important;
box-shadow: none !important;
}
/* Ensure clean layout */
#column-one {
background: none !important;
border: none !important;
padding: 20px !important;
}
#column-content {
background: none !important;
border: none !important;
margin: 0 !important;
}
/* Move Home to bottom of navigation */
#p-navigation .pBody ul {
display: flex;
flex-direction: column;
}
#p-navigation .pBody ul li:first-child {
order: 999;
margin-top: auto;
}
3. How to Apply the CSS
Method 1: Site-wide CSS (Admin required)
1. Go to MediaWiki:Common.css page
2. Add the above CSS code
3. Save the page
4. Clear browser cache (Ctrl+F5)
Method 2: Personal CSS (User-specific)
1. Go to User:YourUsername/common.css
2. Add the CSS code
3. Save the page
4. Clear browser cache
Method 3: Skin Files (Server access required)
1. Edit skin files in /skins/[skin_name]/
2. Add CSS to main.css or screen.css
3. Clear MediaWiki cache
4. Sidebar Menu Reordering
Edit MediaWiki:Sidebar page to change menu order:
* navigation
** Changes|Changes
** Upload File|Upload File
** Surprise me|Surprise me
** Home|Home
* SEARCH
* TOOLBOX
* LANGUAGES
5. Additional Clean Design Features
/* Extra clean features */
/* Remove all Wikipedia-style references */
.reference, .references {
background: none !important;
border: none !important;
font-size: 12px !important;
color: #666 !important;
}
/* Clean external links */
.external {
background: none !important;
padding: 0 !important;
}
/* Remove all category styling */
#catlinks {
background: none !important;
border: none !important;
border-top: 1px solid #eee !important;
margin-top: 30px !important;
padding: 15px 0 !important;
font-size: 13px !important;
}
/* Clean print styling */
@media print {
* {
background: none !important;
border: none !important;
box-shadow: none !important;
}
}