Difference between revisions of "MediaWiki:Monobook.css"
MyWikiBiz, Author Your Legacy — Saturday October 25, 2025
Jump to navigationJump to search (Update Monobook.css) |
|||
| Line 1: | Line 1: | ||
| − | /* CSS | + | /* |
| + | |||
| + | ==CSS for Monobook skin only== | ||
| + | |||
| + | '''Notice to Administrators!''' | ||
| + | |||
| + | Any changes to [[Mediawiki:Monobook.css|Monobook.css]] or [[MediaWiki:Common.css|Common.css]] should be first proposed to [[Centiare:Water Cooler]]. | ||
| + | |||
| + | Furthermore, changes should probably be made in | ||
| + | [[MediaWiki:Common.css]] rather than this page, unless there is no effect in | ||
| + | [[MediaWiki:Common.css]]. | ||
| + | |||
| + | Testing can be done on your own user Monobook.css. | ||
| + | (In [[Mozilla]] and [[Opera (web browser)|Opera]], you can also test style changes dynamically with the [http://www.squarefree.com/bookmarklets/webdevel.html test styles] bookmarklet from squarefree.com. It pops up a window for adding style rules, and updates the page as you type.) | ||
| + | |||
| + | Always check with the [http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fen.wikipedia.org%2Fw%2Findex.php%3Ftitle%3DMediaWiki%3AMonobook.css%26action%3Draw%26ctype%3Dtext%2Fcss&usermedium=all W3C CSS Validation Service] after any changes. | ||
| + | |||
| + | Thank you. | ||
| + | |||
| + | <pre><nowiki>*/ | ||
| + | |||
| + | /* Don't display some stuff on the main page */ | ||
| + | body.page-Main_Page #t-cite, | ||
| + | body.page-Main_Page #lastmod, | ||
| + | body.page-Main_Page #siteSub, | ||
| + | body.page-Main_Page #contentSub, | ||
| + | body.page-Main_Page h1.firstHeading { | ||
| + | display: none !important; | ||
| + | } | ||
/* the tagline */ | /* the tagline */ | ||
| Line 16: | Line 44: | ||
text-align: right; | text-align: right; | ||
} | } | ||
| + | |||
| + | /* | ||
| + | #fundraising { | ||
| + | text-align: center; | ||
| + | border: 1px solid gray; | ||
| + | padding: 5px; | ||
| + | } | ||
| + | */ | ||
/****************************/ | /****************************/ | ||
| Line 22: | Line 58: | ||
/* Make all non-namespace pages have a light blue content area. This is done by | /* Make all non-namespace pages have a light blue content area. This is done by | ||
setting the background color for all #content areas to light blue and then | setting the background color for all #content areas to light blue and then | ||
| − | overriding it for any #content enclosed in a .ns-0 | + | overriding it for any #content enclosed in a .ns-0 (main namespace). I then |
do the same for the "tab" background colors. --Lupo */ | do the same for the "tab" background colors. --Lupo */ | ||
| Line 34: | Line 70: | ||
.ns-0 * #content { | .ns-0 * #content { | ||
| − | |||
| − | |||
| − | |||
| − | |||
background: white; | background: white; | ||
} | } | ||
| Line 46: | Line 78: | ||
.ns-0 * #mytabs li { | .ns-0 * #mytabs li { | ||
| − | |||
| − | |||
| − | |||
| − | |||
background: white; | background: white; | ||
} | } | ||
| Line 58: | Line 86: | ||
.ns-0 * #mytabs li a { | .ns-0 * #mytabs li a { | ||
| − | |||
| − | |||
| − | |||
| − | |||
background-color: white; | background-color: white; | ||
} | } | ||
| Line 70: | Line 94: | ||
.ns-0 * #p-cactions li a { | .ns-0 * #p-cactions li a { | ||
| − | |||
| − | |||
| − | |||
| − | |||
background-color: #fbfbfb; | background-color: #fbfbfb; | ||
} | } | ||
.ns-0 * #p-cactions li.selected a, .ns-0 * #p-cactions li a:hover { | .ns-0 * #p-cactions li.selected a, .ns-0 * #p-cactions li a:hover { | ||
| − | |||
| − | |||
| − | |||
| − | |||
background-color: white; | background-color: white; | ||
} | } | ||
.ns-0 * #content div.thumb { | .ns-0 * #content div.thumb { | ||
| − | |||
| − | |||
| − | |||
| − | |||
border-color: white; | border-color: white; | ||
} | } | ||
| Line 98: | Line 110: | ||
/* block quotations */ | /* block quotations */ | ||
| − | + | #content blockquote { | |
| − | + | font-size: 93.75%; /* equivalent of 15px in 16px default */ | |
| − | + | margin: 1em 1.6em; /* same indent as an unordered list */ | |
| − | + | } | |
| − | + | #content blockquote p { | |
| − | + | line-height:inherit; | |
| − | + | } | |
| − | + | ||
| − | + | /* Display "From Wikipedia, the free encyclopedia" */ | |
| − | + | #siteSub { | |
| − | + | display: inline; | |
| − | + | font-size: 92%; | |
| − | + | font-weight: normal; | |
| − | + | } | |
| − | + | ||
| − | + | #bodyContent #siteSub a { | |
| − | + | color: #000; | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
text-decoration: none; | text-decoration: none; | ||
| − | + | background-color: transparent; | |
| − | + | background-image: none; | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
padding-right: 0; | padding-right: 0; | ||
| − | + | } | |
| − | + | ||
| − | + | /* Bold 'edit this page' link to encourage newcomers */ | |
| − | + | #ca-edit a { font-weight: bold !important; } | |
| − | + | ||
| − | + | /* Display "User $1, you are already logged in!" | |
| − | + | ([[MediaWiki:Alreadyloggedin]]) in red and bold */ | |
| − | + | div.alreadyloggedin { color: red; font-weight: bold; } | |
| − | + | ||
| − | + | @media print { | |
| − | + | /* Do not print edit link in templates using Template:Ed | |
| − | + | Do not print certain classes that shouldn't appear on paper */ | |
| − | + | .editlink, .noprint, .metadata, .dablink { display: none } | |
| − | + | #content { background: #fff; } /* white background on print */ | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | /* Accessibility experiment: make diff changes not just colour-based */ | |
| − | + | ||
| − | + | .diffchange { | |
| − | + | font-weight: bold; | |
| − | + | background-color: inherit; | |
| − | + | } | |
| − | + | ||
| − | + | td.diff-addedline, td.diff-deletedline, td.diff-context { | |
| − | + | vertical-align: top; | |
| − | + | font-size: 85%; | |
| − | + | color: inherit; | |
| − | + | } | |
| − | + | ||
| − | + | #pt-login { | |
| − | + | font-weight: bold; | |
| − | + | font-size: 110%; | |
| − | + | } | |
| − | + | ||
| − | + | form#userlogin { | |
| − | + | float: left; | |
| − | + | padding: 1em 1em .7em 1em; | |
| − | + | background-color: #ffffe6; | |
| − | + | border: 2px solid #fc6; | |
| − | + | color: #000; | |
| − | + | margin-right: 2em; | |
| − | + | } | |
| − | + | ||
| − | + | form#userlogin table { | |
| − | + | float: left; | |
| − | + | background-color: #ffffe6; | |
| − | + | color: #000; | |
| − | + | } | |
| − | + | ||
| − | + | p.error { | |
| − | + | font-weight: bold; | |
| − | + | } | |
| − | + | ||
| − | + | /* Class styles */ | |
| − | + | ||
| − | + | /* .toccolours added here because version in | |
| − | + | monobook/main.css wasn't being used by the print style */ | |
| − | + | .toccolours { | |
| − | + | border:1px solid #aaa; | |
| − | + | background-color:#f9f9f9; | |
| − | + | padding:5px; | |
| − | + | font-size: 95%; | |
| + | } | ||
| + | |||
| + | /* Remove padding from external links displayed without icon */ | ||
| + | #bodyContent .plainlinks a {padding: 0 !important} | ||
| + | |||
| + | |||
| + | #p-nav h5 { | ||
| + | display: none; | ||
| + | } | ||
| + | |||
| + | .portlet a { | ||
| + | text-decoration: none; | ||
| + | } | ||
| + | |||
| + | .portlet a:hover { | ||
| + | text-decoration: underline; | ||
| + | } | ||
| + | |||
| + | #p-nav .pBody { | ||
| + | padding-right: 0; | ||
| + | } | ||
| + | |||
| + | #p-nav a { | ||
| + | display: block; | ||
| + | width: 100%; | ||
| + | } | ||
| + | |||
| + | /* Special characters list below edit window works better without underlining */ | ||
| + | #editpage-specialchars a { text-decoration: none; } | ||
| + | #editpage-specialchars a:hover { text-decoration: underline; } | ||
| + | |||
| + | /* If you don't want to see special characters list at all, | ||
| + | put the following line in your User:You/monobook.css file | ||
| + | (and remove the slash-asterisk comments) */ | ||
| + | /* #editpage-specialchars { display: none; } */ | ||
| + | |||
| + | /* Makes the background of a framed image white instead of gray. */ | ||
| + | /* Only visible with transparent images. */ | ||
| + | /* See #Framed_image_background_color */ | ||
| + | div.thumb div a img { | ||
| + | background-color:#fff; | ||
| + | } | ||
| + | |||
| + | /* For positioning icons at top-right, used in Templates | ||
| + | "Spoken Article" and "Featured Article" */ | ||
| + | |||
| + | div.topicon { | ||
| + | position:absolute; | ||
| + | z-index:100; | ||
| + | top:10px; | ||
| + | display: block !important; | ||
| + | } | ||
| + | |||
| + | /* try adding here, this had no effect in [[MediaWiki:Common.css]] */ | ||
| + | .plainlinksneverexpand a.external.text:after { | ||
| + | display: none !important | ||
| + | } | ||
| + | |||
| + | #coordinates { | ||
| + | position:absolute; | ||
| + | z-index:1; | ||
| + | border:none; | ||
| + | background:none; | ||
| + | right:30px; | ||
| + | top:3.7em; | ||
| + | float:right; | ||
| + | margin:0.0em; | ||
| + | padding:0.0em; | ||
| + | line-height:1.5em; | ||
| + | text-align:right; | ||
| + | text-indent:0; | ||
| + | font-size:85%; | ||
| + | text-transform:none; | ||
| + | white-space:nowrap; | ||
| + | } | ||
| + | |||
| + | .portlet li { | ||
| + | list-style-image: url("http://upload.wikimedia.org/wikipedia/en/1/18/Monobook-bullet.png"); | ||
| + | } | ||
| + | |||
| + | li.FA { | ||
| + | list-style-image: url("http://upload.wikimedia.org/wikipedia/en/d/d4/Monobook-bullet-star.png"); | ||
| + | } | ||
| + | |||
| + | .mw-plusminus-pos { | ||
| + | color: #006400; | ||
| + | } | ||
| + | |||
| + | .mw-plusminus-neg { | ||
| + | color: #8B0000; | ||
| + | } | ||
| + | |||
| + | /* Infobox template style */ | ||
| + | |||
| + | .infobox { | ||
| + | border: 1px solid #aaa; | ||
| + | background-color: #f9f9f9; | ||
| + | color: black; | ||
| + | } | ||
| + | |||
| + | .infobox.bordered td, | ||
| + | .infobox.bordered th { | ||
| + | border: 1px solid #aaa; | ||
| + | } | ||
| + | |||
| + | /* styles for bordered infobox with merged rows */ | ||
| + | .infobox.bordered .mergedtoprow td, | ||
| + | .infobox.bordered .mergedtoprow th { | ||
| + | border-top: 1px solid #aaa; | ||
| + | border-right: 1px solid #aaa; | ||
| + | } | ||
| + | |||
| + | .gallerybox .thumb img { | ||
| + | background: #F9F9F9; | ||
| + | } | ||
| + | |||
| + | .infobox.bordered .mergedrow td, | ||
| + | .infobox.bordered .mergedrow th { | ||
| + | border-right: 1px solid #aaa; | ||
| + | } | ||
| + | /*</nowiki></pre>*/ | ||
Revision as of 00:36, 6 June 2007
/*
==CSS for Monobook skin only==
'''Notice to Administrators!'''
Any changes to [[Mediawiki:Monobook.css|Monobook.css]] or [[MediaWiki:Common.css|Common.css]] should be first proposed to [[Centiare:Water Cooler]].
Furthermore, changes should probably be made in
[[MediaWiki:Common.css]] rather than this page, unless there is no effect in
[[MediaWiki:Common.css]].
Testing can be done on your own user Monobook.css.
(In [[Mozilla]] and [[Opera (web browser)|Opera]], you can also test style changes dynamically with the [http://www.squarefree.com/bookmarklets/webdevel.html test styles] bookmarklet from squarefree.com. It pops up a window for adding style rules, and updates the page as you type.)
Always check with the [http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fen.wikipedia.org%2Fw%2Findex.php%3Ftitle%3DMediaWiki%3AMonobook.css%26action%3Draw%26ctype%3Dtext%2Fcss&usermedium=all W3C CSS Validation Service] after any changes.
Thank you.
<pre><nowiki>*/
/* Don't display some stuff on the main page */
body.page-Main_Page #t-cite,
body.page-Main_Page #lastmod,
body.page-Main_Page #siteSub,
body.page-Main_Page #contentSub,
body.page-Main_Page h1.firstHeading {
display: none !important;
}
/* the tagline */
#siteSub {
display: inline;
font-size: 100%;
font-weight: bold;
color: #01459A;
border-bottom-style: none;
}
#siteNotice {
margin-top:5px;
padding-left: 4px;
font-style: italic;
text-align: right;
}
/*
#fundraising {
text-align: center;
border: 1px solid gray;
padding: 5px;
}
*/
/****************************/
/* BEGIN LIGHT BLUE SECTION */
/****************************/
/* Make all non-namespace pages have a light blue content area. This is done by
setting the background color for all #content areas to light blue and then
overriding it for any #content enclosed in a .ns-0 (main namespace). I then
do the same for the "tab" background colors. --Lupo */
#content {
background: #F8FCFF; /* a light blue */
}
#content div.thumb {
border-color: #F8FCFF;
}
.ns-0 * #content {
background: white;
}
#mytabs li {
background: #F8FCFF;
}
.ns-0 * #mytabs li {
background: white;
}
#mytabs li a {
background-color: #F8FCFF;
}
.ns-0 * #mytabs li a {
background-color: white;
}
#p-cactions li a, #p-cactions li a:hover, #p-cactions li.selected a {
background-color: #F8FCFF;
}
.ns-0 * #p-cactions li a {
background-color: #fbfbfb;
}
.ns-0 * #p-cactions li.selected a, .ns-0 * #p-cactions li a:hover {
background-color: white;
}
.ns-0 * #content div.thumb {
border-color: white;
}
/**************************/
/* END LIGHT BLUE SECTION */
/**************************/
/* block quotations */
#content blockquote {
font-size: 93.75%; /* equivalent of 15px in 16px default */
margin: 1em 1.6em; /* same indent as an unordered list */
}
#content blockquote p {
line-height:inherit;
}
/* Display "From Wikipedia, the free encyclopedia" */
#siteSub {
display: inline;
font-size: 92%;
font-weight: normal;
}
#bodyContent #siteSub a {
color: #000;
text-decoration: none;
background-color: transparent;
background-image: none;
padding-right: 0;
}
/* Bold 'edit this page' link to encourage newcomers */
#ca-edit a { font-weight: bold !important; }
/* Display "User $1, you are already logged in!"
([[MediaWiki:Alreadyloggedin]]) in red and bold */
div.alreadyloggedin { color: red; font-weight: bold; }
@media print {
/* Do not print edit link in templates using Template:Ed
Do not print certain classes that shouldn't appear on paper */
.editlink, .noprint, .metadata, .dablink { display: none }
#content { background: #fff; } /* white background on print */
}
/* Accessibility experiment: make diff changes not just colour-based */
.diffchange {
font-weight: bold;
background-color: inherit;
}
td.diff-addedline, td.diff-deletedline, td.diff-context {
vertical-align: top;
font-size: 85%;
color: inherit;
}
#pt-login {
font-weight: bold;
font-size: 110%;
}
form#userlogin {
float: left;
padding: 1em 1em .7em 1em;
background-color: #ffffe6;
border: 2px solid #fc6;
color: #000;
margin-right: 2em;
}
form#userlogin table {
float: left;
background-color: #ffffe6;
color: #000;
}
p.error {
font-weight: bold;
}
/* Class styles */
/* .toccolours added here because version in
monobook/main.css wasn't being used by the print style */
.toccolours {
border:1px solid #aaa;
background-color:#f9f9f9;
padding:5px;
font-size: 95%;
}
/* Remove padding from external links displayed without icon */
#bodyContent .plainlinks a {padding: 0 !important}
#p-nav h5 {
display: none;
}
.portlet a {
text-decoration: none;
}
.portlet a:hover {
text-decoration: underline;
}
#p-nav .pBody {
padding-right: 0;
}
#p-nav a {
display: block;
width: 100%;
}
/* Special characters list below edit window works better without underlining */
#editpage-specialchars a { text-decoration: none; }
#editpage-specialchars a:hover { text-decoration: underline; }
/* If you don't want to see special characters list at all,
put the following line in your User:You/monobook.css file
(and remove the slash-asterisk comments) */
/* #editpage-specialchars { display: none; } */
/* Makes the background of a framed image white instead of gray. */
/* Only visible with transparent images. */
/* See #Framed_image_background_color */
div.thumb div a img {
background-color:#fff;
}
/* For positioning icons at top-right, used in Templates
"Spoken Article" and "Featured Article" */
div.topicon {
position:absolute;
z-index:100;
top:10px;
display: block !important;
}
/* try adding here, this had no effect in [[MediaWiki:Common.css]] */
.plainlinksneverexpand a.external.text:after {
display: none !important
}
#coordinates {
position:absolute;
z-index:1;
border:none;
background:none;
right:30px;
top:3.7em;
float:right;
margin:0.0em;
padding:0.0em;
line-height:1.5em;
text-align:right;
text-indent:0;
font-size:85%;
text-transform:none;
white-space:nowrap;
}
.portlet li {
list-style-image: url("http://upload.wikimedia.org/wikipedia/en/1/18/Monobook-bullet.png");
}
li.FA {
list-style-image: url("http://upload.wikimedia.org/wikipedia/en/d/d4/Monobook-bullet-star.png");
}
.mw-plusminus-pos {
color: #006400;
}
.mw-plusminus-neg {
color: #8B0000;
}
/* Infobox template style */
.infobox {
border: 1px solid #aaa;
background-color: #f9f9f9;
color: black;
}
.infobox.bordered td,
.infobox.bordered th {
border: 1px solid #aaa;
}
/* styles for bordered infobox with merged rows */
.infobox.bordered .mergedtoprow td,
.infobox.bordered .mergedtoprow th {
border-top: 1px solid #aaa;
border-right: 1px solid #aaa;
}
.gallerybox .thumb img {
background: #F9F9F9;
}
.infobox.bordered .mergedrow td,
.infobox.bordered .mergedrow th {
border-right: 1px solid #aaa;
}
/*</nowiki></pre>*/