Dan Paul Smith

Interface and visualisation developer.

Friday 19 April 2013

Wiki-read-easier

Have been using Wikipedia a lot recently, the text ran too wide. Fixed it up a little bit with some CSS:




You'll need to create a Wikipedia account, then go to Preferences > Appearance > Shared CSS for all themes (common.css) and paste this in.

You might want to adjust the height for the #toc (table of contents). 500px suits my screen.


div#content { font-family: Helvetica; font-size: 18px; background-color: white; border: 1px solid #A7D7F9; color: black; direction: ltr; margin-left: 30% !important; margin-top: -1px; padding: 1em; width: 40%; } #mw-panel { padding-left: 0.5em; visibility: hidden; } #toc, .toc, .mw-warning { left: 10px; position: fixed; top: 80px; } #left-navigation { left: 10px; } #right-navigation { left: 30%; margin-top: 2.5em; position: absolute; } #p-personal ul { list-style-image: none; list-style-type: none; margin: 0; padding-left: 29%; } table#toc.toc tbody tr td > ul { height:500px; overflow-y:auto; }

This guy spent a bit more time than me on his skin, much nicer:

/*
 * Style by Lupurus
 */

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("wikipedia.org") {

}

@-moz-document regexp("(.*wikipedia.org/wiki/(?!.*:)(?!Main_Page).*)|(.*secure.wikimedia.org/wikipedia/../wiki/(?!.*:)(?!Main_Page).*)") {

#firstHeading {
    width: 800px !important;
    text-align: center !important;
    font-size: 4em !important;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    font-weight: bold !important;
    text-shadow: 4px 4px 0 #DDD;
}
#firstHeading i:first-child {
    font-style: normal !important;
}
#firstHeading, h1, h2, h3, h4 {
    font-family: Palatino !important;
}

#bodyContent {
    width: 800px !important;
    text-align: justify;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    font-family: Palatino !important;
    font-size: 12pt !important;
}

/*
 * border around the article
 */
#content {
    -moz-box-shadow: 0px -10px 30px #BBB;
    -webkit-box-shadow: 0px -10px 30px #BBB;
    box-shadow: 0px -10px 30px #BBB;
    margin: auto !important; 
    width: 800px !important;
    padding: 80px !important; 
    padding-top: 20px !important;
}

body {
    background: #FFFFFF !important;
}

#content {
    background: #FFF !important;    /* removes the border of the menu */
}

/* margins */
.infobox, .tright, .vertical-navbox {
    margin: 0 0 0.5em 2em !important;
}
.tleft {
    margin: 0 2em 0.5em 0 !important;
}

/*
 * hide things
 */
#mw-head, #mw-head-base, #mw-page-base, #footer, .editsection {
    display: none !important;
}

#mw-panel {
    opacity: 0;
}

#mw-panel:hover {
    opacity: 1;
}

/*
 * numbering of the headings
 */
 body {
    counter-reset: headingOne;
 }
#toctitle h2:before {
    content: "" !important;
    counter-reset: headingOne;
}
h2 {
 counter-reset: headingTwo;
}
h2:before {
 counter-increment: headingOne;
 content: counter(headingOne) ".";
}
h3 {
    counter-reset: headingThree;
}
h3:before {
    counter-increment: headingTwo;  
 content: counter(headingOne) "." counter(headingTwo) ".";
}
h4 {
    counter-reset: headingFour;
}
h4:before {
    counter-increment: headingThree;
    content: counter(headingOne) "." counter(headingTwo) "." counter(headingThree) ".";
}
h5:before {
    counter-increment: headingFour;
    content: counter(headingOne) "." counter(headingTwo) "." counter(headingThree) "." counter(headingFour) ".";
}

} 

No comments: