by g y z » Sat Mar 31, 2012 1:16 am
original post
Spoiler! :
So basically I just noticed today how the navigation/sidebar on the Wiki took up 12% of the page while I was reading novels, and having the text getting squished to the other side felt a little... off.
So I found this way to hide the sidebar.
You 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
div#mw-panel
{
visibility:visible;
position:fixed;
resize:vertical;
top:240px;
left:-9.5em;
background-color:#E8E8E8;
overflow-y:auto;
overflow-x:hidden;
z-index:2;
height:22em; /*this number sets the height of your navigation bar. The higher the number, the higher the navigation bar. Make sure you have "em" to the right of the number. The the original value I set it was 22em.*/
}
div#mw-panel div
{
overflow:visible;
resize:none;
}
div#mw-panel:hover
{
left:0;
}
div#p-logo
{
position:fixed;
left:-9.5em;
top:80px;
background-color:#E8E8E8;
z-index:1
}
div#mw-panel:hover div#p-logo
{
left:0em
}
div#mw-head-base
{
margin-left:10px;
}
div#content
{
position:relative;
left:10px;
margin-left:0;
}
div#left-navigation
{
left:50px;
}
div#footer
{
margin-left:10px;
}
into your editing page
Click "Save Page"
Viola, your navigation/sidebar is hidden to the left of the page. To pull it up, move your mouse over to the dark region on the left of the page.
You can temporarily change its height by dragging the lower right hand corner.
To permanently change its height, you have to edit the text that you pasted into your "Custom CSS". (look at directions)
Edit2: Topic change. I really want to get this known.
Edit:
I made a set of customizations for the wiki in order to improve reading ease/accessibility.
clutter free:
preview1.png
easy access:
preview2.png
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*/
into your editing page.
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*/
Update: This should be easier to use on a touch screen, but I can't test it. The navigation bar/sidebar is pulled out by dragging the tab on the lower right of the hidden sidebar.
- 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*/
original post
[spoiler]So basically I just noticed today how the navigation/sidebar on the Wiki took up 12% of the page while I was reading novels, and having the text getting squished to the other side felt a little... off.
So I found this way to hide the sidebar.
You 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]
div#mw-panel
{
visibility:visible;
position:fixed;
resize:vertical;
top:240px;
left:-9.5em;
background-color:#E8E8E8;
overflow-y:auto;
overflow-x:hidden;
z-index:2;
height:22em; /*this number sets the height of your navigation bar. The higher the number, the higher the navigation bar. Make sure you have "em" to the right of the number. The the original value I set it was 22em.*/
}
div#mw-panel div
{
overflow:visible;
resize:none;
}
div#mw-panel:hover
{
left:0;
}
div#p-logo
{
position:fixed;
left:-9.5em;
top:80px;
background-color:#E8E8E8;
z-index:1
}
div#mw-panel:hover div#p-logo
{
left:0em
}
div#mw-head-base
{
margin-left:10px;
}
div#content
{
position:relative;
left:10px;
margin-left:0;
}
div#left-navigation
{
left:50px;
}
div#footer
{
margin-left:10px;
}
[/code]into your editing page
Click "Save Page"
Viola, your navigation/sidebar is hidden to the left of the page. To pull it up, move your mouse over to the dark region on the left of the page.
You can temporarily change its height by dragging the lower right hand corner.
To permanently change its height, you have to edit the text that you pasted into your "Custom CSS". (look at directions)[/spoiler]
Edit2: Topic change. I really want to get this known.
Edit:
I made a set of customizations for the wiki in order to improve reading ease/accessibility.
clutter free:
[attachment=1]preview1.png[/attachment]
easy access:
[attachment=0]preview2.png[/attachment]
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]/*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*/
[/code]into your editing page.
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]/*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]
Update: This should be easier to use on a touch screen, but I can't test it. The navigation bar/sidebar is pulled out by dragging the tab on the lower right of the hidden sidebar.
[code]/*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*/[/code]