ばか！バカ！　馬鹿ー月！

I made what I BELIEVE would work on a touch screen. Someone will have to test it out on iOS Safari and Android.

Updated at the bottom of the first post.

Really? BT uses the same package as Wikipedia, and Wikipedia has a mobile version, so I assumed so.
But either way, touch devices don't really work well with hovering mouse. I can't test it myself, though.

Hmm for touch devices I can only take out the auto-hiding feature, and modify the sidebar so you can resize it horizontally.

[quote="g y z"]I don't really think so with IPod touch/IPhone, because on those devices you get the mobile version of BakaTsuki. This might not work in the mobile version, and the mobile version doesn't have the sidebar either.

Then again, "hovering" the mouse to pull up the sidebar, etc isn't possible with a touch device either.[/quote]
Actually. B-T has no mobile version.

I don't really think so with IPod touch/IPhone, because on those devices you get the mobile version of BakaTsuki. This might not work in the mobile version, and the mobile version doesn't have the sidebar either.

Then again, "hovering" the mouse to pull up the sidebar, etc isn't possible with a touch device either.

Looks quite good. I wonder if it will work with Safari on iPod Touch though.

Okay I'm taking customization requests, because I can't think of any more.
If something is not possible, don't be disappointed too much, because the wiki customization is very limited (if you know CSS, you know what I mean).

Edit: This post is outdated. Check the first post.
[spoiler]aww crap. I messed up.

fixed code
[code]body
{
height:100%;
}
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=9);
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#content
{
position:relative;
left:0;
margin-left:10px;
}
div#left-navigation
{
left:10em;
}
div#footer
{
margin-left:10px;
}[/code]

I'm also thinking of having the navigation links (go backward, go to main page, go forward) stick to the bottom of the screen so that you don't have to scroll down to the bottom of the page to click on them.[/spoiler]

Well, there's also text on the logo when you scroll down. Is it changeable?

[spoiler][attachment=0]Untitled0.png[/attachment][/spoiler]

Thanks for feedback
With tinkering I easily made the "Recent Changes" link appear permanently as a vertical button on the left. There's no foolproof method with the "Forums" link, because it's within a collapsible menu, and once you collapse the menu, the link disappears.

Edit: the following is outdated.

Well here is an aesthetic update. Also you don't need to resize the bar anymore, because it automatically fits the height of the page. Happy reading :)
[code]body
{
height:100%;
}
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=9);
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:-1
}
div#mw-panel:hover div#p-logo
{
left:0em
}
div#mw-head-base
{
margin-left:10px;
}
div#content
{
position:relative;
left:0;
margin-left:10px;
}
div#left-navigation
{
left:10em;
}
div#footer
{
margin-left:10px;
}[/code]

Thanks for the tip!

I just tried it. It is quite useful for the readers. However,since I often click on "Forums" or "Recent changes", I didn't apply it permanently. :wink:

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]