WikipediaTabs

Note: The recipes here are for PmWiki versions 0.6 and 1.0 only. For PmWiki 2.0 recipes, see Cookbook.

Skin overview

I don't have an operating wiki that is using this skin yet; but I basically ripped the styles from the Wikipedia out and placed them into a PmWiki template. Just look at the tabbing interface and the box the tabs are attached to on http://www.wikipedia.com and you will see what this skin looks like.

If anyone can give me a hand getting this skin to appear on this page, I'd appreciate it! Thanks!

For now, here is the tmpl code. I will try to get something up that uses this in the near future.

Looks good - except the sidebar gets hidden :/

Template code

 
<html>    
    <head>
        <title>test</title>
        <style type="text/css">
<!--
body {
    font: x-small sans-serif;
    background: #f9f9f9 0px 0px;
    color: Black;
    margin: 0;
    padding: 0;
}
/***** LAYOUT *****/
#globalWrapper {
    font-size:127%;
    width: 100%;
    margin: 0;
    padding: 0;
}
#content {
    margin: 2.8em 0 0 12.2em;
    padding: 0em 1em 1.5em 1em;
    background: White;
    border: 1px solid #aaaaaa;
    border-right: none;
    line-height: 1.5em;
    position: relative;
    z-index: 2;
}
#column-content {
    width: 100%;
    float: right;
    margin: 0 0 0.6em -12.2em;
    padding:0;
}
/***** The tabs *****/
#tabbar a.$action { 
    z-index: 3; 
}
#tabbar li.$action {
    border-color: #fabd23;
    padding: 0 0 0.2em 0;
}
#tabbar {
    position:absolute;
    top: 1.3em;
    left: 11.5em;
    margin: 0;
    white-space:nowrap;
    width: 76%;
    line-height: 1.1em;
    overflow: visible;
    background: none;
    border-collapse: collapse;
    padding-left: 1em;
    list-style: none;
    font-size: 95%;
}
#tabbar ul {
    line-height: 1.5em;
    list-style-type: square;
    margin: 0.3em 0 0 1.5em;
    padding:0;
    list-style: none;
}
#tabbar li {
    display: inline;
    border: 1px solid #aaaaaa;
    border-bottom: none;
    padding: 0 0 0.1em 0;
    margin: 0 0.3em 0 0;
    overflow: visible;
    background: White;
    margin-bottom: 0.1em;
}
#tabbar li a {
    background-color: White;
    color: #002bb8;
    border: none;
    padding: 0 0.8em 0.3em 0.8em;
    text-decoration: none;
    text-transform: lowercase;
    position: relative;
    z-index: 0;
    margin: 0;
}
#tabbar li a:hover {
    z-index: 3;
    text-decoration: none;
}
-->
        </style>
    </head>
    <body>
        <div id='globalWrapper'>
            <div id='column-content'>
                <div id='content'>
                    <!--PageText-->
                </div>
            </div>
            <div id='tabbar'>
                <ul>
                    <li class='browse'><a class='browse' href='$PageUrl'>read</a></li>
                    <li class='edit'><a class='edit' href='$PageUrl?action=edit'>edit</a></li>
                    <li class='diff'><a class='diff' href='$PageUrl?action=diff'>history</a></li>
                </ul>
            </div>
        </div>
    </body>
</html>

Files

This is exactly the same text as above, already in a tmpl. Attach:wikipediatabs.tmpl

Notes

The key to making the current active tab have the proper colored border and the proper line attributes is to give both the <li> and the <a> the same class. This class style is defined each time the page is loaded, and it is dependent on the way the $action variable is set at any given time.

All the CSS is to make the tabs and body look like the Wikipedia, but take a look specifically at the #tabbar a.$action and #tabbar li.$action styles to see how this works.

Author

Profiles.DanDube (with the actual layout coming from the Plone CMS CSS ([(approve links) edit diff]) which the wikipedia folks have adapted). pmwiki-2.5.2 -- Last modified by {{}}

from IP: 85.171.160.186