Help:User style/floating quickbar

This page is kept for historical interest. Any policies mentioned may be obsolete. If you want to revive the topic, you can use the talk page or start a discussion on the community forum.

'See: Manual Interface

Update - I have converted this into two independent importable scripts: en:User:Omegatron/monobook.js/floatingSidebar.js and en:User:Omegatron/monobook.js/personalSidebar.js. My personal sidebar CSS is slightly different from the original. — Omegatron 01:54, 8 April 2008 (UTC)[reply]

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 page provides instructions to bring the same functionality to 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.

Setup instructions

Installing this code will fix the sidebar's position, remove the wiki logo, and move your user toolbar from the top into a sidebox.

CSS

Note that the logo needs to be turned off for this to work as shown. You could also use it with the logo by modifying it.

Add this to your user css, Special:Mypage/monobook.css:

/* 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;
}

div#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;
}

div#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; 
*/
}

/* Don't use any logo, move the boxes onto that area instead */

div#p-logo {
    display: none;
}
div#column-one {
    padding-top: 0;
}

Make the user toolbar a sidebox

You also need to use the code from User styles#Make the user toolbar a sidebox, so you can use the personal tools from anywhere on the page:

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

div#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;
}

div#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;
}

div#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 }

Javascript

Add this to your user javascript, Special:Mypage/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.

/* 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
});

Fixing the user toolbar

If you choose to install as described above, your user toolbar will be converted to a box in the sidebar. However, you may alternatively leave your personal links in place by installing as described in this section.

CSS

Add the code as above to your user css, Special:Mypage/monobook.css.

Not make the toolbar a sidebox

Include the following code from the main.css, which defines the normal user toolbar:


#p-personal {
    width:100%;
    white-space:nowrap;
    padding:0 0 0 0;
    margin:0;
    position:absolute;
    left:0px;
    top:0px;
    z-index: 0;
    border: none;
    background: none;
    overflow: visible;
    line-height: 1.2em;
}

#p-personal h5 {
    display:none;
}
#p-personal .portlet,
#p-personal .pBody {
    padding:0;
    margin:0;
    border: none;
    z-index:0;
    overflow: visible;
    background: none;
}
/* this is the ul contained in the portlet */
#p-personal ul {
    border: none;
    line-height: 1.4em;
    color: #2f6fab;
    padding: 0em 2em 0 3em;
    margin: 0;
    text-align: right;
    text-transform: lowercase;
    list-style: none;
    z-index:0;
    background: none;
}
#p-personal li {
    z-index:0;
    border:none;
    padding:0;
    display: inline;
    color: #2f6fab;
    margin-left: 1em;
    line-height: 1.2em;
    background: none;
}
#p-personal li a {
    text-decoration: none;
    color: #005896;
    padding-bottom: 0.2em;
    background: none;
}
#p-personal li a:hover {
    background-color: White;
    padding-bottom: 0.2em;
    text-decoration: none;
}

Javascript

Add this to your user javascript, Special:Mypage/monobook.js.


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

    personal = document.getElementById("p-personal");   // Find the personal links list
    personal.parentNode.removeChild(personal);    // Remove the personal links list from the side column
    content.insertBefore(personal,content.firstChild);    // Place personal links list at the beginning of the content column
});

Setup instructions

CSS

Make the user toolbar a sidebox

Javascript

Fixing the user toolbar

CSS

Not make the toolbar a sidebox

Javascript

See also