Edit:
I made a set of customizations for the wiki in order to improve reading ease/accessibility.
clutter free: easy access: So this is what it does:
1.Hides the navigation bar to the left. You can pull it up by moving your mouse to the left edge of the screen.
2.Attaches the Page/Discussion/Read/Edit/View History buttons and the search bar to the top of the screen, so you don't have to scroll up all the way to the top to get to them.
-----They are almost transparent unless you move your mouse over them.
3.Attaches the Backward/Previous, Main Page/Project Index, Forward/Next buttons to the bottom of the screen, so you don't have to scroll down all the way to the bottom to get to them.
-----These are hidden until you move your mouse over the small blue area at the bottom of the screen and towards the left.
4.If there are notes and references, they will be attached to the bottom right of the screen.
-----These are also hidden until you move your mouse over the grey area at the bottom right of the screen.
Note that these are mostly hidden so that they don't interrupt your reading.
So this is how you apply these customizations.
You first need to make an account on the Wiki. Make sure you check the option to keep your username and password info for 30 days so you don't have to log on every time.
Then go to My preferences > Appearance, and find the option for the "Vector" skin. Click on the "Custom CSS" link to the right of it and it will take you to an editing page.
copy this
Code: Select all
/*You must retain the following four lines of code for any kind of customization I do!*/
body
{
height:100%;
}
/*Hides navbar*/
div#mw-panel
{
visibility:visible;
position:fixed;
top:0px;
left:-9.5em;
background-color:#F3F3F3;
border-right:1px solid #A7D7F9;
opacity:0.9;
filter:alpha(opacity=90);
overflow-y:auto;
overflow-x:hidden;
z-index:2;
padding-top:0;
height:100%;
}
div#mw-panel div.portal
{
overflow:visible;
}
div#mw-panel div#p-navigation
{
margin-top:160px;
}
div#mw-panel:hover
{
left:0;
}
div#p-logo
{
position:fixed;
left:-9.5em;
width:9em;
top:0px;
overflow:hidden;
background-color:#F3F3F3;
border-bottom:2px solid #E0E0E0;
z-index:3
}
div#mw-panel:hover div#p-logo
{
left:0em
}
div#mw-head-base
{
margin-left:10px;
}
div#mw-head
{
margin-left:10px;
}
div#content
{
position:relative;
left:0;
margin-left:10px;
}
div#left-navigation
{
left:10em;
}
div#footer
{
margin-left:10px;
}
/*section end*/
/*Page navigation adjustment*/
div>table[style]:nth-last-child(4)>tbody,div>table[style]:nth-last-child(5)>tbody
{
position:fixed;
margin:0 0 0 10em;
padding:0;
bottom:-15px;
left:2em;
background-color:#CEE0F2;
height:40px;
vertical-align:bottom;
overflow-y:hidden;
opacity:0.3;
filter:alpha(opacity=30);
z-index:4;
}
div>table[style]:nth-last-child(4)>tbody:hover,div>table[style]:nth-last-child(5)>tbody:hover
{
bottom:0;
height:auto;
background-color:transparent;
opacity:0.9;
filter:alpha(opacity=90);
}
div>table[style]:nth-last-child(4)>tbody:hover td,div>table[style]:nth-last-child(4)>tbody:hover th,div>table[style]:nth-last-child(5)>tbody:hover td,div>table[style]:nth-last-child(5)>tbody:hover th
{
height:auto;
vertical-align:middle;
background-color:#F8F8F8;
}
/*section end*/
/*References adjustment*/
ol.references
{
background-color:#000000;
border:1px solid #000000;
margin:0;
padding:0 0.25em 0 2.25em;
position:fixed;
bottom:0;
right:0;
width:40em;
height:25px;
max-height:100%;
min-height:25px;
overflow-y:auto;
opacity:0.07;
filter:alpha(opacity=7);
z-index:3;
}
ol.references:hover
{
background-color:#FFFFFF;
width:40em;
height:auto;
opacity:1;
filter:alpha(opacity=100);
}
/*section end*/
/*Top bar adjustment*/
div#mw-page-base
{
height:3.5em;
}
div#mw-head
{
position:fixed;
background-color:white;
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAsCAIAAAArRUU2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADpJREFUeF5VjUkOAEAIwoD//7lzGJd4MJHGSoBImkFETP67CdLldUd7KC6f8fv3+psd8znbtU5x354HaWQjOx76v7MAAAAASUVORK5CYII=);
background-position:bottom left;
background-repeat:repeat-x;
border-bottom:1px solid #A7D7F9;
height:3.5em;
top:-1px;
left:0;
opacity:0.25;
filter:alpha(opacity=25);
}
div#mw-head:hover
{
opacity:1;
filter:alpha(opacity=100);
}
div#left-navigation
{
position:fixed;
top:1em;
z-index:1;
}
div#right-navigation
{
position:fixed;
right:0;
top:1em;
margin-top:0;
z-index:1;
}
div#p-personal
{
position:fixed;
right:0.75em;
z-index:2;
}
/*section end*/
Click "Save Page"
and that's all you need to do. Unless you want to remove one or more of the features.
For that, if you look at the code that you copy pasted, it is split into sections and each section is labeled. If you don't want the feature then delete that section.
And that's all.
Update: If you want eye candy, here is a version with eye candy. Shadows under everything, and everything is animated.
Code: Select all
/*eye candy*/
/*You must retain the following four lines of code for any kind of customization I do!*/
body
{
height:100%;
}
/*Hides navbar*/
div#mw-panel
{
visibility:visible;
position:fixed;
top:0px;
left:-9.5em;
padding-top:0;
background-color:#F3F3F3;
border-right:1px solid #A7D7F9;
opacity:0.9;
filter:alpha(opacity=90);
overflow-y:scroll;
overflow-x:hidden;
z-index:2;
height:100%;
box-shadow:0 0 10px 0 #000000;
transition:left 0.2s ease-out;
-webkit-transition:left 0.2s ease-out;
-moz-transition:left 0.2s ease-out;
-o-transition:left 0.2s ease-out;
}
div#mw-panel div.portal
{
overflow:visible;
}
div#mw-panel div#p-navigation
{
padding-top:0em;
margin-top:160px;
}
div#mw-panel:hover
{
left:0;
}
div#p-logo
{
position:fixed;
left:-9.5em;
width:9em;
top:0px;
overflow:hidden;
background-color:#F3F3F3;
z-index:1
opacity:0.9
filter:alpha(opacity=90);
box-shadow:-2.5px 0 5px 0 #000000;
transition:left 0.2s ease-out;
-webkit-transition:left 0.2s ease-out;
-moz-transition:left 0.2s ease-out;
-o-transition:left 0.2s ease-out;
}
div#p-logo a
{
position:absolute;
width:140px;
}
div#mw-panel:hover div#p-logo
{
left:0em
}
div#mw-head-base
{
margin-left:10px;
}
div#mw-head
{
margin-left:10px;
}
div#content
{
position:relative;
left:0;
margin-left:10px;
}
div#left-navigation
{
left:10em;
}
div#footer
{
margin-left:10px;
}
/*section end*/
/*Page navigation adjustment*/
div>table[style]:nth-last-child(4)>tbody,div>table[style]:nth-last-child(5)>tbody
{
position:fixed;
margin:0 0 0 10em;
padding:0;
bottom:-15px;
left:2em;
background-color:#CEE0F2;
height:40px;
vertical-align:bottom;
overflow-y:hidden;
opacity:0.3;
filter:alpha(opacity=30);
box-shadow:0 0 10px 0 #AAAAAA;
z-index:4;
}
div>table[style]:nth-last-child(4)>tbody:hover,div>table[style]:nth-last-child(5)>tbody:hover
{
bottom:0;
height:auto;
background-color:transparent;
opacity:0.9;
filter:alpha(opacity=90);
transition:opacity 0.1s linear;
-webkit-transition:opacity 0.1s linear;
-moz-transition:opacity 0.1s linear;
-o-transition:opacity 0.1s linear;
}
div>table[style]:nth-last-child(4)>tbody:hover td,div>table[style]:nth-last-child(4)>tbody:hover th,div>table[style]:nth-last-child(5)>tbody:hover td,div>table[style]:nth-last-child(5)>tbody:hover th
{
height:auto;
vertical-align:middle;
background-color:#F8F8F8;
}
/*section end*/
/*References adjustment*/
ol.references
{
background-color:#000000;
border:1px solid #000000;
margin:0;
padding:0 0.25em 0 2.25em;
position:fixed;
bottom:0;
right:0;
width:40em;
height:25px;
max-height:100%;
min-height:25px;
overflow-y:auto;
opacity:0.07;
filter:alpha(opacity=7);
z-index:3;
box-shadow:0 0 10px 0 #AAAAAA;
}
ol.references:hover
{
background-color:#FFFFFF;
width:40em;
height:auto;
opacity:1;
filter:alpha(opacity=100);
transition:opacity 0.1s linear;
-webkit-transition:opacity 0.1s linear;
-moz-transition:opacity 0.1s linear;
-o-transition:opacity 0.1s linear;
}
/*section end*/
/*Top bar adjustment*/
div#mw-page-base
{
height:3.5em;
}
div#mw-head
{
position:fixed;
background-color:white;
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAsCAIAAAArRUU2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADpJREFUeF5VjUkOAEAIwoD//7lzGJd4MJHGSoBImkFETP67CdLldUd7KC6f8fv3+psd8znbtU5x354HaWQjOx76v7MAAAAASUVORK5CYII=);
background-position:bottom left;
background-repeat:repeat-x;
border-bottom:1px solid #A7D7F9;
height:3.5em;
top:-1px;
left:0;
opacity:0.25;
filter:alpha(opacity=25);
box-shadow:-5px -5px 10px -5px #AAAAAA inset;
transition:opacity 0.15s ease-out;
-webkit-transition:opacity 0.15s ease-out;
-moz-transition:opacity 0.15s ease-out;
-o-transition:opacity 0.15s ease-out;
}
div#mw-head:hover
{
opacity:1;
filter:alpha(opacity=100);
transition:opacity 0.1s cubic-bezier(0.5,0,1,0);
-webkit-transition:opacity 0.1s cubic-bezier(0.5,0,1,0);
-moz-transition:opacity 0.1s cubic-bezier(0.5,0,1,0);
-o-transition:opacity 0.1s cubic-bezier(0.5,0,1,0);
}
div#left-navigation
{
position:fixed;
top:1em;
z-index:1;
}
div#right-navigation
{
position:fixed;
right:0;
top:1em;
margin-top:0;
z-index:1;
}
div#p-personal
{
position:fixed;
right:0.75em;
z-index:2;
}
/*section end*/
Code: Select all
/*You must retain the following four lines of code for any kind of customization I do!*/
body
{
height:100%;
}
/*Hides navbar*/
div#mw-panel
{
visibility:visible;
resize:horizontal;
position:fixed;
top:0px;
left:0em;
width:0.5em;
background-color:#F3F3F3;
border-right:1px solid #A7D7F9;
opacity:0.9;
filter:alpha(opacity=90);
overflow-y:auto;
overflow-x:hidden;
z-index:2;
padding-top:0;
padding-right:0.25em;
margin:0;
height:100%;
max-width:10em;
}
#mw-panel.collapsible-nav.noprint div.portal
{
overflow:hidden;
resize:none;
max-width:9em;
white-space:normal;
margin-top:0;
margin-right:0;
margin-bottom:0;
margin-left:0;
min-width:5em;
}
div#mw-panel div#p-navigation
{
margin:3.5em 0 0 0;
}
div#p-logo
{
position:fixed;
left:0;
width:9em;
height:3.5em;
top:-1px;
overflow:hidden;
background-color:white;
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAsCAIAAAArRUU2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADpJREFUeF5VjUkOAEAIwoD//7lzGJd4MJHGSoBImkFETP67CdLldUd7KC6f8fv3+psd8znbtU5x354HaWQjOx76v7MAAAAASUVORK5CYII=);
background-position:bottom left;
background-repeat:repeat-x;
border-bottom:1px solid #A7D7F9;
z-index:3;
resize:none;
}
div#p-logo a
{
left:1em;
width:8em;
height:3.5em;
background-size:40%;
}
div#mw-head-base
{
margin-left:10px;
}
div#mw-head
{
margin-left:10px;
}
div#content
{
position:relative;
left:0;
margin-left:10px;
}
div#left-navigation
{
left:10em;
}
div#footer
{
margin-left:10px;
}
/*section end*/
/*Page navigation adjustment*/
div>table[style]:nth-last-child(4)>tbody,div>table[style]:nth-last-child(5)>tbody
{
position:fixed;
padding:0;
bottom:40px;
left:1em;
width:auto;
overflow-y:auto;
opacity:0.9;
filter:alpha(opacity=90);
z-index:2;
background:#FFFFFF;
text-align:center;
}
div>table[style]:nth-last-child(4) td, div>table[style]:nth-last-child(4) th,div>table[style]:nth-last-child(5) td, div>table[style]:nth-last-child(5) th
{
opacity:0.9;
filter:alpha(opacity=90);
}
div>table[style]:nth-last-child(4) tr, div>table[style]:nth-last-child(5) tr
{
margin-left:auto;
margin-right:auto;
}
/*section end*/
/*References adjustment*/
ol.references
{
background-color:#FFFFFF;
border:1px solid #000000;
margin:0;
padding:0 0.25em 0 2.75em;
position:fixed;
bottom:0;
left:1em;
width:auto;
height:40px;
overflow-y:auto;
z-index:1;
}
/*section end*/
/*Top bar adjustment*/
div#mw-page-base
{
height:3.5em;
}
div#mw-head
{
position:fixed;
background-color:white;
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAsCAIAAAArRUU2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADpJREFUeF5VjUkOAEAIwoD//7lzGJd4MJHGSoBImkFETP67CdLldUd7KC6f8fv3+psd8znbtU5x354HaWQjOx76v7MAAAAASUVORK5CYII=);
background-position:bottom left;
background-repeat:repeat-x;
border-bottom:1px solid #A7D7F9;
height:3.5em;
top:-1px;
left:0;
}
div#left-navigation
{
position:fixed;
top:1em;
z-index:1;
}
div#right-navigation
{
position:fixed;
right:0;
top:1em;
margin-top:0;
z-index:1;
}
div#p-personal
{
position:fixed;
right:0.75em;
z-index:2;
}
/*section end*/