View source for Help:User style/floating quickbar

[[Image:Fixed sidebar.png|thumb|This script and CSS makes the sidebar stay in position while you scroll]]
[[Image:Fixed sidebar footer.png|thumb|The footer still looks good and doesn't overlap.  You can see the language box has a scroll bar when it gets too big.  This way all the navigation stays on the screen]]
'''See First: [[Help:User style]]'''

The ''Cologne Blue'' skin has an option for a "floating left" quickbar, which causes the navigation links and toolboxes and such to stay in the same position on the screen while you scroll.  This provides the same functionality for the ''Monobook'' skin.  This currently works '''only in Mozilla''', but degrades gracefully in IE (for when you have to use it).  Other browsers haven't been tested, but they should work fine.

== CSS ==

Add this to your user css, [[User:YOURUSERNAME/monobook.css]]:

<code><pre>
/* Fix the sidebar's position while you scroll */

div[id=column-one] {  /* Using the attribute selector hides this from IE */
    position: fixed;
    height: 100%;     /* If you shrink the browser too small, the side column will */
    overflow: auto; /*   become scrollable, so stuff is always accessible, albeit ugly */
    z-index: 2;
}

#p-lang .pBody ul{    /* Sets the language box to a fixed height and scrollable if too long to fit */
    height: 10em;
    overflow: auto;
}

body {                /* Fix the background image, too, so it looks nice as you scroll */
    background-attachment: fixed;
}

#footer {             /* Fix the footer so it looks nice and doesn't overlap the sidebar */
    margin-left: 13.6em;
    border-left: solid 1px rgb(250, 189, 35);
    /* Uncomment this if you use rounded edges: */
/* 
    -moz-border-radius-topleft: 1em; 
    -moz-border-radius-bottomleft: 1em; 
*/
}
</pre></code>

=== Make the user toolbar a sidebox ===

You also need to use the code from [[User styles#Make the user toolbar a sidebox]]:

<pre>
/* Transform the user toolbar into a sidebox */
#p-personal {
    position:relative;
    z-index:3;
    width: 11.6em;
}

#p-personal .pBody {
    width: 10.7em;
    border: none;
    margin: 0 0 0.1em 0em;
    float: none;
    overflow: hidden;
    font-size: 95%;
    background: White;
    border-collapse: collapse;
    border: 1px solid #aaaaaa;
    padding: 0 0.8em 0.3em .5em;
}

#p-personal ul {
    line-height: 1.5em;
    list-style-type: square;
    list-style-image: url("/style/monobook/bullet.gif");

    font-size:95%;
    margin: 0 0 0 1.5em;
    padding:0;
    text-align:left;
    text-transform: none;
}

#p-personal li {
    display: list-item;
    padding:0;
    margin: 0 0 0 0;
    margin-bottom: 0.1em;
}

/* suppress the person icon by your username */
/* needed if not already in place */
li#pt-userpage { background: none }
</pre>

== Javascript ==

Add this to your user javascript, [[User:YOURUSERNAME/monobook.js]].  The top tabs are part of the sidebar, which would make them stay fixed, too.  This script moves them so they are inside the content-column div, so they scroll with the article.

<code><pre>
/* Move top tabs inside body content */

addOnloadHook(function () {
    content = document.getElementById("column-content");    // Find the main content column

    footer = document.getElementById("footer");  // Find the footer
    footer.parentNode.removeChild(footer);    // Remove the footer from the global wrapper
    content.appendChild(footer);    // Place footer at the end of the content column;

    tabs = document.getElementById("p-cactions");   // Find the top tab list
    tabs.parentNode.removeChild(tabs);    // Remove the tab list from the side column
    content.insertBefore(tabs,content.firstChild);    // Place tab list at the beginning of the content column
});
</pre></code>

== See also ==

* [[en:User:Omegatron/monobook.js]] and [[en:User:Omegatron/monobook.css]]
* If you have problems, [[en:User talk:Omegatron|leave a message for Omegatron]]