MediaWiki:Common.css

From Practices and Politics of Representation
Revision as of 06:58, 8 July 2025 by Admin (talk | contribs)
Jump to navigation Jump to search

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;
    }
}