/* make a few corners round, only supported by moz/firefox/other gecko browsers for now */

#p-cactions ul li, #p-cactions ul li a {

-moz-border-radius-topleft: 1em;

-moz-border-radius-topright: 1em;

}

#content {

-moz-border-radius-topleft: 1em;

-moz-border-radius-bottomleft: 1em;

}

div.pBody {

-moz-border-radius-topright: 1em;

-moz-border-radius-bottomright: 1em;

}

/* same following the css3 draft specs, any browsers supporting this? */

#p-cactions ul li, #p-cactions ul li a {

border-radius-topleft: 1em;

border-radius-topright: 1em;

}

#content {

border-radius-topleft: 1em;

border-radius-bottomleft: 1em;

}

div.pBody {

border-radius-topright: 1em;

border-radius-bottomright: 1em;

}

Rounded corner rules in firefox

[edit]

Print view tweaks

/*

** Place all print-specific rules in an @media print block.

*/

/* save paper with very small fonts */

@media print {

#footer,

#content,

body { font-size: 8pt !important; }

h1 { font-size: 17pt }

h2 { font-size: 14pt }

h3 { font-size: 11pt }

h4 { font-size: 9pt }

h5 { font-size: 8pt }

h6 {

font-size: 8pt;

font-weight: normal;

}

}

/* Advanced things: using :before and :after it's possible to add formatting

this here adds the full href of a link after it (not needed in the current version): */

@media print {

#content a:link:after,

#content a:visited:after {

content: " ( " attr(href) " ) ";

}

}

[edit]

Make the user toolbar a sidebox

Tested to work in Camino and Safari.

/* Transform the user toolbar into a sidebox */

#p-personal {

position:relative;

z-index:3;

width: 11.6em;

}

#p-personal .pBody {

width: 10.8em;

border: none;

margin: 0 0 0.5em 0em;

float: none;

overflow: hidden;

font-size: 95%;

background: White;

border-collapse: collapse;

border: 1px solid #aaaaaa;

padding: 0 0.8em 0.3em .5em;

}

#p-personal ul {

line-height: 1.5em;

list-style-type: square;

list-style-image: url("/style/monobook/bullet.gif");

font-size:95%;

margin: 0.3em 0 0 1.5em;

padding:0;

text-align:left;

text-transform: none;

}

#p-personal li {

display: list-item;

padding:0;

margin: 0 0 0 0;

margin-bottom: 0.1em;

}

/* supress the person icon by your username */

/* needed if not already in place */

li#pt-userpage { background: none }

See the monobook main.css for the full styles in use by default.

[edit]

Monobook menus with serif fonts in the content area

I've hacked together a q&d combinaton of monobook menus with serif fonts in the text area; there are some quirks and bugs (some because the css scheme of wikipedia doesn't seem to be soo thoughtful), but if you want to give it a try or have a look, go to [1] and copy the first part. No warranty; works on Netscape7/Win98 for me ... -- Tillwe 14:05, 30 May 2004 (UTC)

Update (01.06.04): Now also displays table formated things more or less correctly. -- Tillwe 17:45, 1 Jun 2004 (UTC)

[edit]

Moving category links

Moves category links in the upper right corner of content area, and paints them gray -- Tillwe 21:22, 31 May 2004 (UTC)

/******************************************************************/

/* moving catlinks to the right */

/******************************************************************/

/* move the catlinks box */

#catlinks {

position:absolute;

z-index:1;

/* border: 1px solid #aaaaaa;

background: #fafaff; */

right:1em;

top:-0.25em;

width:10.5em;

float:right;

margin: 0.2em;

padding:0.2em;

}

/* format the catlinks itself */

p.catlinks {

color: #aaaaaa;

font-family: Verdana,sans-serif;

font-size:67%;

line-height: 1.5em;

text-align:left;

text-indent:0;

text-transform: none;

white-space:normal;

margin: 0.2em;

}

/* format links in the catlinks (as distinguished from ":" and "|") */

p.catlinks a {

color:#888888;

}

[edit]

Css Links

http://www.csszengarden.com/ -- inspiration

http://css-discuss.incutio.com/ -- highly concentrated info, very comprehensive

http://www.alistapart.com/ -- great articles

http://www.positioniseverything.net/ -- some entertaining ie bugs and more

[edit]

Rounded corners/tabs

Moz: see the rules above

http://www.vertexwerks.com/tests/sidebox/ -- sidebox formatting

http://www.alistapart.com/articles/slidingdoors2/ -- rounded tabs with rollover effect

http://www.alistapart.com/articles/customcorners/ -- another variant for rounded box corners

http://alistapart.com/articles/customcorners2/, Demo of this

http://www.alistapart.com/articles/mountaintop/ -- even weirder corner variants

http://www.virtuelvis.com/gallery/css/rounded/ -- simple freestyle variant using the :before and :after pseudo-elements (only css2 browsers, not in IE)

[edit]

Javascript

As mentioned above, the page to add is called monobook.js in this case. Want to have the same links as in the tabs also at the bottom of the page? - Clone it onload and drop it somewhere near the bottom. Want to add personal links/boxes/whatever ? You can do it.

[edit]

Duplicate edit links at the bottom of the content area

See /bottom tabs

Bottom tabs in Firefox

Simple version of bottom links in action

[edit]

Changing access keys

This works at least in mozilla:

function changeakey() {

var watchtab = document.getElementById('ca-watch');

if(watchtab) {

a = watchtab.childNodes[0];

a.title = 'My personal watch tab title text [alt-3]';

a.accessKey = '3';

}

}

if (window.addEventListener) window.addEventListener("load",changeakey,false);

else if (window.attachEvent) window.attachEvent("onload",changeakey);

[edit]

Some JS links

http://www.quirksmode.org/ -- see the Javascript and DOM section

http://www.alistapart.com/

http://www.quirksmode.org/dom/domform.html -- form cloning (might be possible to upload a few images at once using this, also a good starting point for the structure cloning)

http://www.quirksmode.org/dom/links.html -- more links with good summaries

[edit]

See also

Gallery of user styles

MediaWiki User's Guide: Setting preferences

content page