Wikipedia CSS Refresh

If you spend as much time as Brandon does on Wikipedia, you know that the current Wikipedia design is clunky, busy and has been known to cause severe ophthalmological conditions.

Yes, there are others who have made their own changes to Wikipedia with huge graphics and a completely new browsing experience. This project is a little simpler. It just takes the Wikipedia you know and love/hate and takes away all of the junk you don't need while adding a little bit of style and sexy.

Wikipedia CSS Refresh - OLD WIKIPEDIA.jpg

Wikipedia CSS Refresh Sleek and Sexy.jpg

How to get this style on Wikipedia:

Install a custom CSS extension on your browser. Brandon uses Stylebot for Chrome.
Copy and paste the entire following CSS code into the custom stylesheet in the extension.
Enjoy a totally refreshing Wikipedia experience!

Wikipedia is a community-based encyclopedia and this stylesheet follows the same principle. The CSS certainly isn't perfect and there are limitations due to the inconsistencies in the way that Wikipedia pages are built and elements are tagged. That said, if you find a fix to any of the problems in this code, please drop Brandon a line!

Report a CSS Fix

<< BACK TO PORTFOLIO

#bodyContent {
    margin: 0 30px;
}

#ca-edit span a {
    background-color: #eee;
    border-left: 1px solid #fff;
    display: none;
}

#content {
    background-color: transparent;
    border-right: 1px solid #999;
    color: rgba(0, 0, 0, 0.8);
    font-family: 'Open Sans', sans-serif;
}

#firstHeading {
    margin: 30px 30px 0;
}

#mp-left, #mp-right, #mp-middle, #mp-lower {
    background-color: #f2f2f2;
    border: 0;
    padding: 10px 20px;
}

#mp-topbanner {
    background-color: #eee;
    border: none;
    float: left;
    height: auto;
    margin-bottom: 20px;
    margin-top: 25px;
    padding: 10px;
    width: 100%;
}

#mp-topbanner li {
    font-size: 14px;
    list-style: none;
    margin: 0;
}

#mp-topbanner li a {
    background-color: transparent;
    border: 1px solid #fff;
    display: block;
    margin-bottom: 2px;
    padding: 5px;
    text-align: center;
}

#mp-topbanner li a:hover {
    background-color: #fff;
    text-decoration: none;
}

#mp-topbanner ul {
    margin: 0;
}

#mw-head {
    background-color: #fff;
}

#mw-panel {
    display: none;
}

#p-personal {
    display: none;
}

#p-personal li {
    margin-left: 10px ;
}

#p-search form, #p-search input {
    background: none;
    margin: 0;
}

#siteSub {
    display: none;
}

#toc h2, .toc h2 {
    font-weight: 700;
}

#toctitle {
    text-align: left;
}

#toctitle h2 {
    font-family: 'Open Sans', sans-serif;
}

.infobox {
    border: 0;
}

.pBody {
    padding-bottom: 5px ;
    padding-top: 5px ;
}

.pBody li {
    margin: 10px 0 ;
}

a {
    color: #00648e;
    font-weight: 400;
}

a.mw-wiki-logo {
    display: none;
}

body {
    font-family: 'Open Sans', sans-serif;
    padding: 0;
}

div {
    font-family: 'Open Sans', sans-serif;
}

div#contentSub {
    color: #ccc;
    margin-left: 0;
    margin-top: 10px;
}

div#contentSub a {
    color: #999;
}

div#footer {
    float: left;
    margin: 0;
    padding: 0;
    width: 100%;
}

div#mw-head {
    background-image: url('https://image.freepik.com/free-icon/wikipedia-logo_318-65113.jpg');
    background-position: 25px;
    background-repeat: no-repeat;
    background-size: 80px;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}

div#mw-navigation {
}

div#mw-page-base {
}

div#p-search {
    margin: 0 ;
    width: 100% ;
}

div#right-navigation {
    float: left;
    margin: 30px 30px 30px 130px ;
    width: 91%;
}

div#simpleSearch {
    background: none;
    height: auto;
    margin: 0;
    max-width: 100%;
    padding: 0;
    width: 100%;
}

div#simpleSearch #searchButton {
    display: none;
}

div#simpleSearch #searchInput {
    font-size: 28px;
    font-weight: 300;
    padding: 5px 5px 8px 8px;
    text-transform: lowercase;
}

div#toc ul li {
    margin-bottom: 2px;
}

div.hatnote {
    color: #ccc;
    font-family: 'Open Sans', sans-serif;
    font-style: normal;
    padding: 0;
}

div.hatnote a {
    color: #999;
}

div.mw-body {
    float: left;
    margin: 0;
    padding: 0;
    width: 100%;
}

div.mw-indicator a img {
    display: none;
}

div.thumb {
    width: 25%;
}

div.thumb.tleft {
    margin: 0 30px 30px 0;
}

div.thumb.tright {
    margin: 0 0 30px 30px;
}

div.thumbcaption {
    font-size: 10px;
    padding: 0;
    text-align: left;
}

div.thumbinner {
    background-color: transparent;
    border-width: 0;
    padding: 0;
    width: 100%;
}

div.toc {
    padding: 30px;
}

div.vectorTabs {
    display: none;
}

em, i {
    font-style: italic;
}

form#searchform {
    width: 96%;
}

h1 {
    font-size: 36px;
}

h1.firstHeading {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
}

h2 {
    font-family: 'Open Sans', sans-serif;
    font-size: 30px;
}

h3 {
    font-family: 'Open Sans', sans-serif;
    font-size: 24px;
    font-weight: 700;
}

img.thumbimage {
    border-width: 0;
    height: auto;
    margin-bottom: 10px;
    width: 100%;
}

img.wmamapbutton.noprint {
    display: none;
}

li.collapsible span a {
    background-color: #eee;
    border-left: 1px solid #fff;
    display: none;
}

li.selected span a {
    border: 0 1px solid #fff;
    display: none;
}

p, ul li {
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 0.08px;
    line-height: 26px;
    margin-bottom: 30px;
    max-width: 1100px;
    text-align: left;
    word-wrap: break-word;
}

strong, b {
    font-weight: 400;
}

table.ambox {
    border: 1px solid #ea6f2f ;
    margin: 20px 0 ;
    max-width: 100% ;
    min-width: 500px ;
    padding: 10px ;
}

table.infobox {
    background-color: transparent;
    font-size: 10px;
    font-weight: 300;
    margin-bottom: 30px;
    margin-left: 30px;
    margin-top: 0;
    padding: 0;
    width: 25%;
}

table.infobox b, table.infobox strong {
    font-weight: 400;
}

table.infobox caption {
    font-size: 22px;
    font-weight: 300;
    margin-bottom: 10px;
    padding: 0;
    text-align: left;
}

table.infobox div {
    color: #666;
    font-size: 1em;
    margin-bottom: 15px;
}

table.infobox div a {
    color: #00648e;
    font-weight: 400;
}

table.infobox img {
    height: auto ;
    margin: 0px ;
    margin-bottom: 5px ;
    width: 100% ;
}

table.infobox td {
    border-bottom: 1px dotted #eee ;
    padding: 0;
    text-align: left ;
    width: 100% ;
}

table.infobox th.fn.org {
    background-color: rgb(86, 86, 86) ;
    border-bottom: none;
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-size: 20px ;
    font-weight: 300;
    margin-bottom: 0px ;
    padding: 10px ;
    text-align: left ;
    width: 100% ;
}

table.infobox tr {
    padding: 0;
    text-align: left;
    width: 100%;
}

td.MainPageBG h2 {
    background-color: transparent;
    border: none;
    font-weight: 300;
    margin: 0;
    padding: 0;
}

td.MainPageBG h2#mp-dyk-h2, td.MainPageBG h2#mp-otd-h2 {
    border-top: 25px solid #fff;
    margin: 50px -25px 0;
    padding: 15px 25px 0;
}

td.MainPageBG, table#mp-center, #mp-bottom {
    background-color: transparent;
    border: none;
}

td.mbox-image {
    display: none;
}

td.mbox-image div img {
    display: none;
}

/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTRampu5_7CjHW5spxoeN3Vs.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzBampu5_7CjHW5spxoeN3Vs.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

Easy, right?

Hire Brandon