MediaWiki:Common.css: Difference between revisions

From Practices and Politics of Representation
Jump to navigation Jump to search
No edit summary
Tag: Reverted
No edit summary
Tag: Reverted
Line 19: Line 19:
}
}


/* CSS to move Home link to bottom */
/* Move Home to bottom of sidebar navigation */
#p-navigation .pBody ul li:first-child {
    order: 999;
    margin-top: auto;
}
 
#p-navigation .pBody ul {
#p-navigation .pBody ul {
     display: flex;
     display: flex;
     flex-direction: column;
     flex-direction: column;
    height: auto;
}
}


#p-navigation .pBody ul li:first-child {
/* CLEAN DESIGN CSS - PRESERVES LAYOUT */
    order: 999; /* Moves to end */
    margin-top: auto;
}


/* COMPLETE FLAT DESIGN CSS FOR MEDIAWIKI */
/* Force all text to Arial font */
 
/* Reset all fonts to Arial */
*, body, h1, h2, h3, h4, h5, h6, p, div, span, a, li, td, th,  
*, body, h1, h2, h3, h4, h5, h6, p, div, span, a, li, td, th,  
input, textarea, select, button {
input, textarea, select, button, .portlet, .pBody {
     font-family: Arial, sans-serif !important;
     font-family: Arial, sans-serif !important;
}
}


/* Remove all shadows and borders globally */
/* Remove shadows and text shadows only */
* {
* {
     box-shadow: none !important;
     box-shadow: none !important;
     text-shadow: none !important;
     text-shadow: none !important;
    border-radius: 0 !important;
}
}


/* Main content area - completely clean */
/* Clean up headings - remove underlines but keep structure */
#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 {
h1, h2, h3, h4, h5, h6 {
    border: none !important;
     border-bottom: none !important;
     border-bottom: none !important;
    border-top: none !important;
     background: none !important;
     background: none !important;
     background-image: none !important;
     background-image: none !important;
    margin: 20px 0 15px 0 !important;
    padding: 0 !important;
     color: #333 !important;
     color: #333 !important;
}
}


/* Page title */
/* Page title clean */
.firstHeading {
.firstHeading {
    border: none !important;
     border-bottom: none !important;
     border-bottom: none !important;
     background: none !important;
     background: none !important;
     color: #333 !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 */
/* Sidebar - clean but preserve layout */
.portlet {
.portlet {
     background: none !important;
     background: none !important;
     background-image: none !important;
     background-image: none !important;
     border: none !important;
     border: none !important;
     box-shadow: none !important;
     /* Keep original margins and padding for layout */
    margin: 0 0 15px 0 !important;
}
}


/* Sidebar headers - completely clean */
/* Sidebar headers - clean */
.portlet h3, .portlet h5 {
.portlet h3, .portlet h5 {
     background: none !important;
     background: none !important;
Line 95: Line 76:
     color: #333 !important;
     color: #333 !important;
     font-weight: bold !important;
     font-weight: bold !important;
    font-size: 14px !important;
    padding: 8px 0 5px 0 !important;
    margin: 0 !important;
}
}


/* Sidebar links - clean style */
/* 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 {
.portlet .pBody ul li a {
     color: #0066cc !important;
     color: #0066cc !important;
     text-decoration: none !important;
     text-decoration: none !important;
     padding: 4px 0 !important;
     background: none !important;
    display: block !important;
    font-size: 13px !important;
     border: none !important;
     border: none !important;
    background: none !important;
}
}


Line 130: Line 92:
}
}


/* Remove all tab styling */
/* Tabs - clean but functional */
#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 {
#p-cactions li {
     background: none !important;
     background: none !important;
     border: none !important;
     background-image: none !important;
     margin: 0 5px 0 0 !important;
     border: 1px solid #ddd !important;
     padding: 0 !important;
     border-bottom: none !important;
}
}


#p-cactions li a {
#p-cactions li a {
     background: none !important;
     background: none !important;
     border: none !important;
     background-image: none !important;
     color: #0066cc !important;
     color: #0066cc !important;
    padding: 8px 15px !important;
     text-decoration: none !important;
     text-decoration: none !important;
     display: block !important;
}
 
#p-cactions li.selected {
     background: #ffffff !important;
    border-bottom: 1px solid #ffffff !important;
}
}


#p-cactions li.selected a {
#p-cactions li.selected a {
    background: none !important;
    border: none !important;
     color: #333 !important;
     color: #333 !important;
     font-weight: bold !important;
     font-weight: bold !important;
Line 173: Line 122:
}
}


/* Remove all table styling */
/* Content area - clean background */
table {
#content {
     border: none !important;
     background: #ffffff !important;
     border-collapse: collapse !important;
     border: 1px solid #ddd !important;
     background: none !important;
     /* Keep original margins and padding for layout */
}
}


table th, table td {
/* Gallery - remove gray backgrounds */
    border: none !important;
    background: none !important;
    padding: 8px !important;
}
 
/* Gallery styling - completely clean */
.gallery {
.gallery {
     background: none !important;
     background: none !important;
     border: none !important;
     border: none !important;
    padding: 0 !important;
    margin: 20px 0 !important;
}
}


Line 197: Line 138:
     background: none !important;
     background: none !important;
     border: none !important;
     border: none !important;
    margin: 10px !important;
    padding: 0 !important;
}
}


Line 204: Line 143:
     background: none !important;
     background: none !important;
     border: none !important;
     border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
}


.gallerybox .gallerytext {
.gallerytext {
     background: none !important;
     background: none !important;
     border: none !important;
     border: none !important;
    padding: 5px 0 0 0 !important;
    margin: 0 !important;
    font-size: 13px !important;
     color: #666 !important;
     color: #666 !important;
}
}


/* Remove all thumb/image backgrounds */
/* Image thumbnails - remove gray backgrounds */
.thumb {
.thumb {
     background: none !important;
     background: none !important;
     border: none !important;
     border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
}


.thumbinner {
.thumbinner {
     background: none !important;
     background: none !important;
     border: none !important;
     border: 1px solid #ddd !important;
    padding: 0 !important;
    margin: 0 !important;
}
}


Line 235: Line 165:
     background: none !important;
     background: none !important;
     border: none !important;
     border: none !important;
    padding: 5px 0 0 0 !important;
    margin: 0 !important;
    font-size: 13px !important;
     color: #666 !important;
     color: #666 !important;
}
}


/* Remove infobox styling */
/* Infobox - clean but preserve structure */
.infobox {
.infobox {
     background: none !important;
     background: none !important;
     border: none !important;
     border: 1px solid #ddd !important;
     margin: 0 0 20px 20px !important;
     /* Keep original positioning */
    padding: 0 !important;
    width: 300px !important;
}
}


.infobox th, .infobox td {
.infobox th {
     background: none !important;
     background: none !important;
    background-image: none !important;
     border: none !important;
     border: none !important;
     padding: 5px !important;
     color: #333 !important;
    vertical-align: top !important;
}
 
.infobox th {
     font-weight: bold !important;
     font-weight: bold !important;
    color: #333 !important;
}
}


/* Remove all form styling */
.infobox td {
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;
     background: none !important;
     border: 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 */
/* Tables - clean borders */
#p-personal {
table {
    border-collapse: collapse !important;
     background: none !important;
     background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
}


#p-personal ul {
table th {
     background: none !important;
     background: none !important;
     border: none !important;
    background-image: none !important;
     margin: 0 !important;
     border: 1px solid #ddd !important;
     padding: 0 !important;
     color: #333 !important;
     font-weight: bold !important;
}
}


#p-personal li {
table td {
     background: none !important;
     background: none !important;
     border: none !important;
     border: 1px solid #ddd !important;
    margin: 0 5px 0 0 !important;
    padding: 0 !important;
}
}


#p-personal li a {
/* Forms - clean input fields */
    color: #0066cc !important;
input, textarea, select {
    text-decoration: none !important;
     border: 1px solid #ccc !important;
    padding: 3px 0 !important;
     background: #ffffff !important;
    font-size: 13px !important;
     border-radius: 0 !important;
}
 
/* Remove search box styling */
#p-search {
    background: none !important;
     border: none !important;
     padding: 0 !important;
     margin: 0 !important;
}
}


/* Search box */
#searchInput {
#searchInput {
     border: 1px solid #ccc !important;
     border: 1px solid #ccc !important;
     background: #ffffff !important;
     background: #ffffff !important;
     padding: 5px !important;
     border-radius: 0 !important;
    width: 100% !important;
}
}


/* Remove all special page styling */
/* Personal tools - clean */
.mw-special-Watchlist, .mw-special-Contributions,
#p-personal ul li a {
.mw-special-RecentChanges {
    color: #0066cc !important;
    text-decoration: none !important;
     background: none !important;
     background: none !important;
    border: none !important;
}
}


/* Remove edit section links styling */
#p-personal ul li a:hover {
.mw-editsection {
    color: #004499 !important;
    text-decoration: underline !important;
}
 
/* Footer - clean */
#footer {
     background: none !important;
     background: none !important;
     border: none !important;
     border: none !important;
     font-size: 12px !important;
     border-top: 1px solid #eee !important;
    color: #666 !important;
}
}


/* Edit section links */
.mw-editsection a {
.mw-editsection a {
     color: #0066cc !important;
     color: #0066cc !important;
     text-decoration: none !important;
     text-decoration: none !important;
}
/* Remove all diff styling */
.diff {
     background: none !important;
     background: none !important;
    border: none !important;
}
}


/* Remove all navigation styling */
.mw-editsection a:hover {
.mw-navigation {
     color: #004499 !important;
     background: none !important;
     text-decoration: underline !important;
     border: none !important;
}
}


/* Clean body background */
/* Categories */
body {
#catlinks {
    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;
     background: none !important;
     border: none !important;
     border: none !important;
    border-top: 1px solid #eee !important;
    color: #666 !important;
}
}


/* Remove gradients from Vector skin */
.vector-menu-tabs li {
.vector-menu-tabs li {
     background: none !important;
     background-image: none !important;
    border: none !important;
}
}


/* Remove all gradients and effects */
.vector-menu-tabs a {
.mw-body, .mw-body-content, .mw-content-ltr,
     background-image: none !important;
.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;
}
}


Line 410: Line 280:
     margin-top: auto;
     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
/* Clean body but preserve layout */
** Changes|Changes
body {
** Upload File|Upload File
     background: #ffffff !important;
** Surprise me|Surprise me
     /* Keep original margins for layout */
** 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 */
/* Preserve column layout */
.external {
#column-one, #column-content {
    /* Keep original positioning and sizing */
     background: none !important;
     background: none !important;
    padding: 0 !important;
}
}


/* Remove all category styling */
/* Remove only visual effects, keep structure */
#catlinks {
.mw-body, .mw-body-content {
     background: none !important;
     background: none !important;
     border: 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;
    }
}
}

Revision as of 07:01, 8 July 2025

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

/* Move Home to bottom of sidebar navigation */
#p-navigation .pBody ul li:first-child {
    order: 999;
    margin-top: auto;
}

#p-navigation .pBody ul {
    display: flex;
    flex-direction: column;
    height: auto;
}

/* CLEAN DESIGN CSS - PRESERVES LAYOUT */

/* Force all text to Arial font */
*, body, h1, h2, h3, h4, h5, h6, p, div, span, a, li, td, th, 
input, textarea, select, button, .portlet, .pBody {
    font-family: Arial, sans-serif !important;
}

/* Remove shadows and text shadows only */
* {
    box-shadow: none !important;
    text-shadow: none !important;
}

/* Clean up headings - remove underlines but keep structure */
h1, h2, h3, h4, h5, h6 {
    border-bottom: none !important;
    background: none !important;
    background-image: none !important;
    color: #333 !important;
}

/* Page title clean */
.firstHeading {
    border-bottom: none !important;
    background: none !important;
    color: #333 !important;
}

/* Sidebar - clean but preserve layout */
.portlet {
    background: none !important;
    background-image: none !important;
    border: none !important;
    /* Keep original margins and padding for layout */
}

/* Sidebar headers - 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;
}

/* Sidebar links - clean style */
.portlet .pBody ul li a {
    color: #0066cc !important;
    text-decoration: none !important;
    background: none !important;
    border: none !important;
}

.portlet .pBody ul li a:hover {
    color: #004499 !important;
    background: none !important;
    text-decoration: underline !important;
}

/* Tabs - clean but functional */
#p-cactions li {
    background: none !important;
    background-image: none !important;
    border: 1px solid #ddd !important;
    border-bottom: none !important;
}

#p-cactions li a {
    background: none !important;
    background-image: none !important;
    color: #0066cc !important;
    text-decoration: none !important;
}

#p-cactions li.selected {
    background: #ffffff !important;
    border-bottom: 1px solid #ffffff !important;
}

#p-cactions li.selected a {
    color: #333 !important;
    font-weight: bold !important;
}

#p-cactions li a:hover {
    background: #f0f0f0 !important;
    color: #004499 !important;
}

/* Content area - clean background */
#content {
    background: #ffffff !important;
    border: 1px solid #ddd !important;
    /* Keep original margins and padding for layout */
}

/* Gallery - remove gray backgrounds */
.gallery {
    background: none !important;
    border: none !important;
}

.gallerybox {
    background: none !important;
    border: none !important;
}

.gallerybox .thumb {
    background: none !important;
    border: none !important;
}

.gallerytext {
    background: none !important;
    border: none !important;
    color: #666 !important;
}

/* Image thumbnails - remove gray backgrounds */
.thumb {
    background: none !important;
    border: none !important;
}

.thumbinner {
    background: none !important;
    border: 1px solid #ddd !important;
}

.thumbcaption {
    background: none !important;
    border: none !important;
    color: #666 !important;
}

/* Infobox - clean but preserve structure */
.infobox {
    background: none !important;
    border: 1px solid #ddd !important;
    /* Keep original positioning */
}

.infobox th {
    background: none !important;
    background-image: none !important;
    border: none !important;
    color: #333 !important;
    font-weight: bold !important;
}

.infobox td {
    background: none !important;
    border: none !important;
}

/* Tables - clean borders */
table {
    border-collapse: collapse !important;
    background: none !important;
}

table th {
    background: none !important;
    background-image: none !important;
    border: 1px solid #ddd !important;
    color: #333 !important;
    font-weight: bold !important;
}

table td {
    background: none !important;
    border: 1px solid #ddd !important;
}

/* Forms - clean input fields */
input, textarea, select {
    border: 1px solid #ccc !important;
    background: #ffffff !important;
    border-radius: 0 !important;
}

/* Search box */
#searchInput {
    border: 1px solid #ccc !important;
    background: #ffffff !important;
    border-radius: 0 !important;
}

/* Personal tools - clean */
#p-personal ul li a {
    color: #0066cc !important;
    text-decoration: none !important;
    background: none !important;
}

#p-personal ul li a:hover {
    color: #004499 !important;
    text-decoration: underline !important;
}

/* Footer - clean */
#footer {
    background: none !important;
    border: none !important;
    border-top: 1px solid #eee !important;
    color: #666 !important;
}

/* Edit section links */
.mw-editsection a {
    color: #0066cc !important;
    text-decoration: none !important;
    background: none !important;
}

.mw-editsection a:hover {
    color: #004499 !important;
    text-decoration: underline !important;
}

/* Categories */
#catlinks {
    background: none !important;
    border: none !important;
    border-top: 1px solid #eee !important;
    color: #666 !important;
}

/* Remove gradients from Vector skin */
.vector-menu-tabs li {
    background-image: none !important;
}

.vector-menu-tabs a {
    background-image: none !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;
}

/* Clean body but preserve layout */
body {
    background: #ffffff !important;
    /* Keep original margins for layout */
}

/* Preserve column layout */
#column-one, #column-content {
    /* Keep original positioning and sizing */
    background: none !important;
}

/* Remove only visual effects, keep structure */
.mw-body, .mw-body-content {
    background: none !important;
    border: none !important;
}