MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
No edit summary Tag: Reverted |
No edit summary Tag: Reverted |
||
| Line 17: | Line 17: | ||
link[rel="apple-touch-icon"] { | link[rel="apple-touch-icon"] { | ||
display: none !important; | 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; | |||
} | |||
} | } | ||
Revision as of 06:58, 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;
}
/* 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;
}
}