Difference between revisions of "MediaWiki:Monobook.css"

MyWikiBiz, Author Your Legacy — Thursday November 21, 2024
Jump to navigationJump to search
(Update Monobook.css)
Line 1: Line 1:
/* CSS placed here will affect users of the Monobook skin */
+
/*  
 +
 
 +
==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 or .ns-100 (main & directory namespaces). I then
+
   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;
 
}
 
 
.ns-110 * #content {
 
 
     background: white;
 
     background: white;
 
}
 
}
Line 46: Line 78:
  
 
.ns-0 * #mytabs li {
 
.ns-0 * #mytabs li {
    background: white;
 
}
 
 
.ns-110 * #mytabs li {
 
 
     background: white;
 
     background: white;
 
}
 
}
Line 58: Line 86:
  
 
.ns-0 * #mytabs li a {
 
.ns-0 * #mytabs li a {
    background-color: white;
 
}
 
 
.ns-110 * #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;
 
}
 
 
.ns-110 * #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;
 
}
 
 
.ns-110 * #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;
 
}
 
 
.ns-110 * #content div.thumb {
 
 
     border-color: white;
 
     border-color: white;
 
}
 
}
Line 98: Line 110:
  
 
/* block quotations */
 
/* block quotations */
#content blockquote {
+
#content blockquote {
    font-size: 93.75%; /* equivalent of 15px in 16px default */
+
    font-size: 93.75%; /* equivalent of 15px in 16px default */
    margin: 1em 1.6em; /* same indent as an unordered list */
+
    margin: 1em 1.6em; /* same indent as an unordered list */
}
+
}
#content blockquote p {
+
#content blockquote p {
    line-height:inherit;
+
    line-height:inherit;
}
+
}
+
 
+
/* Display "From Wikipedia, the free encyclopedia" */
/* Bold 'edit this page' link to encourage newcomers */
+
#siteSub {
#ca-edit a { font-weight: bold !important; }
+
    display: inline;
+
    font-size: 92%;
/* Display "User $1, you are already logged in!"
+
    font-weight: normal;
    ([[MediaWiki:Alreadyloggedin]]) in red and bold */
+
}
div.alreadyloggedin { color: red; font-weight: bold; }
+
 
+
#bodyContent #siteSub a {
@media print {
+
    color: #000;
    /* 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: #FFFFFF; } /* 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 {
 
    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 #aaaaaa;
 
    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;
 
     text-decoration: none;
}
+
    background-color: transparent;
+
     background-image: none;
.portlet a:hover {
 
     text-decoration: underline;
 
}
 
 
#p-nav .pBody {
 
 
     padding-right: 0;
 
     padding-right: 0;
}
+
}
+
 
#p-nav a {
+
/* Bold 'edit this page' link to encourage newcomers */
    display: block;
+
#ca-edit a { font-weight: bold !important; }
    width: 100%;
+
 
}
+
/* Display "User $1, you are already logged in!"
+
  ([[MediaWiki:Alreadyloggedin]]) in red and bold */
/* Special characters list below edit window works better without underlining */
+
div.alreadyloggedin { color: red; font-weight: bold; }
#editpage-specialchars a { text-decoration: none; }
+
 
#editpage-specialchars a:hover { text-decoration: underline; }
+
@media print {
+
    /* Do not print edit link in templates using Template:Ed
/* If you don't want to see special characters list at all,
+
      Do not print certain classes that shouldn't appear on paper */
    put the following line in your User:You/monobook.css file
+
    .editlink, .noprint, .metadata, .dablink { display: none }
  (and remove the slash-asterisk comments) */
+
    #content { background: #fff; } /* white background on print */
/* #editpage-specialchars { display: none; } */
+
}
+
 
/* Makes the background of a framed image white instead of gray. */
+
 
/* Only visible with transparent images. */
+
/* Accessibility experiment: make diff changes not just colour-based */
/* See #Framed_image_background_color */
+
 
div.thumb div a img {
+
.diffchange {
    background-color:#ffffff;
+
    font-weight: bold;
}
+
    background-color: inherit;
+
}
/* For positioning icons at top-right, used in Templates
+
 
    "Spoken Article" and "Featured Article" */
+
td.diff-addedline, td.diff-deletedline, td.diff-context {
+
  vertical-align: top;
div.topicon {
+
  font-size: 85%;
  position:absolute;  
+
  color: inherit;
  z-index:100;  
+
}
  top:10px;
+
 
  display: block !important;
+
#pt-login {
}
+
  font-weight: bold;
+
  font-size: 110%;
/* try adding here, this had no effect in [[MediaWiki:Common.css]] */
+
}
.plainlinksneverexpand a.external.text:after {
+
 
  display: none !important
+
form#userlogin {
}
+
  float: left;
+
  padding: 1em 1em .7em 1em;
#coordinates {   
+
  background-color: #ffffe6;
  position:absolute;
+
  border: 2px solid #fc6;
  z-index:1;
+
  color: #000;
  border:none;
+
  margin-right: 2em;
  background:none;
+
}
  right:30px;
+
 
  top:3.7em;
+
form#userlogin table {
  float:right;
+
  float: left;
  margin:0.0em;
+
  background-color: #ffffe6;
  padding:0.0em;
+
  color: #000;
  line-height:1.5em;
+
}
  text-align:right;
+
 
  text-indent:0;
+
p.error {
  font-size:85%;
+
  font-weight: bold;
  text-transform:none;
+
}
  white-space:nowrap;
+
 
}
+
/* Class styles */
+
 
.portlet li {
+
/* .toccolours added here because version in
  list-style-image: url("http://upload.wikimedia.org/wikipedia/en/1/18/Monobook-bullet.png");
+
  monobook/main.css wasn't being used by the print style */
}
+
.toccolours {
+
  border:1px solid #aaa;
li.FA {
+
  background-color:#f9f9f9;
  list-style-image: url("http://upload.wikimedia.org/wikipedia/en/d/d4/Monobook-bullet-star.png");
+
  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>*/