Worksheet

Click to preview

Name: Worksheet

Author: tsangk
License: Creative Commons Attribution-ShareAlike 3.0 License

Tags: educational simple topbar

Supports top bar menu *: yes
Supports side bar menu *: no
* depends on tags: topbar and sidebar

Description:

Worksheet is fully based on the Wordpress theme Worksheet.

How to install

• go to: your wiki admin panel » appearance » themes
• choose External CSS theme
• supply the following URL as the CSS location

http://themes.wdfiles.com/local--code/worksheet

Code

+ show the code

/* GLOBAL WIDTH */
#page-info,
#footer
{display:none;}
#header {
    width: 1700px;
    margin: 0 auto;
}
#header h2{
background: white;
padding: 2px;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
margin: 2px;
}
 
#top-bar {
    width: 600px;    
    margin: 0 auto;
}
 
body {
    background-color: black;
    font-size: 0.80em;
    color: #000;
}
 
div#container-wrap {
    background: url(http://1.bp.blogspot.com/_MhvFrz7psjI/S3uOtnWFIDI/AAAAAAAABKk/McsacLFf2pA/s1600/body-bg.jpg);
    background-repeat: no-repeat;
    background-position: top;
    /*background-attachment: fixed;*/
}
 
/* HEADER */
 
#header {
    height: 267px;
    width: 801px;
    top: 0px;
    background: url() no-repeat;
    background-position: top;
    overflow: visible;
}
 
#search-top-box {
    position: absolute;
    top: 20px;
    right: 9px;
    width: 250px;
    text-align: left;
    z-index: 9;
}
 
#login-status {
background: white;
padding: 3px;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
margin-right:10px;
}
 
#account-topbutton {
background-color: #380000; 
border:1px solid #888888;
font-size:80%;
font-weight:bold;
margin-left:5px;
padding:0 5px;
text-decoration:none;
}
 
#account-topbutton {
    background: #ccc;
    color: #700;
}
 
#account-options {
    background-color: black;
    opacity: 0.5;
    color: white;
    opacity: 0.5;
    border:0px;
    display: none;
    padding:0;
    position: center;
    text-align: center;
    right:180px;
    width:135px;
    z-index:7;
}
#account-options ul {
    display:block;
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    margin: 0;
    padding:0;
    color: white;
}
 
#account-options li {
    display:block;
    margin:0;
    padding:0;
    width:100%;
    color: white;
 
}
 
#account-options li a {
    -moz-box-sizing:border-box;
    display:block;
    padding:2px 5px;
    width:100%;
    z-index:8;
    color: white;
}
 
#account-options li a:hover {
    color: black;
    background-color: white;
    opacity: 0.5;
}
 
.printuser img.small {
    margin-right: 0.4em;
}
 
#search-top-box form {
display:none;
}
 
#search-top-box input.button {
    display: none;
}
 
div.buttons input, input.button, button, file, a.button {
    background-color:#F4F4F4;
    border:1px solid #AAAAAA;
    color:#000000;
    margin:0 2px;
    padding:0 0.5em;
    text-decoration:none;
}
 
input.empty {
    font-size:80%;
    background-color: transparent;
}
 
input.text {
    background-color: transparent;
    border: 1px solid #777777;
    color: black;
}
 
input {
    font-size:80%;
}
 
#header h1 {
    font-family: 'Trebuchet MS','Lucida Grande',Arial,Verdana,Sans-Serif;
 
font-size: 32px;
 
text-align: left;
 
font-weight: normal;
 
font-stretch: wider;
position:relative;
top:70px;
color: #f41a1b;
}
 
#header h2 {
    position: absolute;
    top: 130px;
    left: 400px;
    clear: left;
    float: left;
    font-size: 105%;
    max-height: 38px;
    z-index: 99;
}
 
#header h1 a {
    line-height: 100px;
    max-height: 100px;
    color: #fbf7c9;
    background: transparent;
    text-decoration: none;
    z-index: 99;
}
 
#header h2 span {
    font-weight: bold;
z-index:99;
}
 
/* TOP MENU */
#top-bar {
    position: absolute;
    z-index: 10;
    top: 160px;
    left: 20px;
    margin: 0;
    right: 0;
    font-size: 90%;
    width: 500px;
    margin: 0;
    overflow: visible;
    padding: 5px 0 0 15px;
    z-index: 150;
 float: left;
 
margin-top: 0px;
 
padding-bottom: 15px;
 
width: 700px;
 
line-height: 35px;
 
height: 35px;
 
padding-left: 14px;
 
font-size: 10px;
}
 
#top-bar li ul li a {
    background-color: transparent;
    border: 1px;
    border-color: blue;
    text-align: center;
    width:10em;
    z-index: 150;
}
 
/*    */
#top-bar ul {
    float: left;
    margin-left: 0px;
    border: 0;
    z-index: 150;
}
 
/*     */
#top-bar a {
    color: black; /* kolor listy menu nienajechanej */
    background: transparent;
    border: 0;
    z-index: 150;
    width: 100px;
 
background-color: transparent;
 
background-image: url("http://3.bp.blogspot.com/_MhvFrz7psjI/S3uO2O4VLOI/AAAAAAAABLU/efH1YQDYENg/s1600/pagemenu-inactive-bg.jpg");
 
background-repeat: no-repeat;
 
background-attachment: scroll;
 
background-position: center top;
 
float: left;
 
margin-left: 2px;
 
color: #ffffff;
 
text-decoration: none;
 
text-align: center;
 
text-transform: uppercase;
 
font-weight: bold;
}
 
/*    */
#top-bar ul li, {
    border: 0;
    z-index: 150;
}
 
/*      */
#top-bar ul li ul {
    vertical-align: bottom;
    border: 0;
    z-index: 150;
}
 
/*        */
#top-bar ul li a {
    text-decoration: none;
    line-height: 23px;
    max-height: 23px;
    overflow: hidden;
    border: 0;
    z-index: 150;
}
 
/*         */
#top-bar ul li.sfhover a {
    border: 0;
    z-index: 150;
}
 
/*            */
#top-bar ul li:hover a {
    background: transparent;
    border: 0;
    z-index: 150;
}
 
/*        */
#top-bar ul li.sfhover ul li a {
    border: 0;
    z-index: 150;
}
 
/*         */
#top-bar ul li:hover ul li a {
    width: 150px;
    line-height: 160%;
    height: auto;
    max-height: none;
    padding-top: 0;
    padding-bottom: 0;
    border: 0;
    z-index: 150;
}
 
/*              */
#top-bar ul li.sfhover a:hover {
    border: 0;
}
 
#top-bar ul li:hover a:hover {
    text-decoration: none;
    background-color: #fbf7c9; /* kolor tla menu najechanego */
    color: #6f1616;  /* kolor menu najechanego */
}
 
#top-bar ul ul li:hover a:hover  {
    color:  #6f1616; /* kolor czcionki najechanego na liscie rozwijanej */
    z-index: 150;
 
}
 
/*                    */
#top-bar ul li ul {
    width: auto;
    background-color: #6f1616; /* kolor tla listy rozwinietej */
    color: white;
 
}
 
/*                  */
#top-bar ul li ul li {
    background-image: none;
 
}
 
/*                */
#top-bar ul li ul li.sfhover {
    background-image: none;
 
}
 
/*                */
#top-bar ul li ul li {
    background-image: none;
 
}
 
/*                */
#top-bar ul li ul li:hover {
    background-image: none;
 
}
 
/*    */
#top-bar ul li ul li a {
 
}
 
/*          */
#top-bar ul li ul a {
 
}
 
/*          */
#top-bar a:hover {
 
}
 
/*             */
 
/* IE7 HACK */ 
#top-bar ul > li > ul {  
    *margin-top: -4px; 
}
 
/* CONTENT */
 
#main-content {
 margin: 0 auto;
padding: 0;
width:778px;
min-height:600px;
}
#page-content{
    width: 722px;
    background-color: white;
    margin: 0px;
    padding: 25px;
    position: relative;
    z-index: 5;
    }
.page-options-bottom {
    height:1%;
    margin: 0px 0;
    text-align:right;
    position: relative;
    z-index:20;
    top: 20px;
}
 
/* FOOTER */
 
/* footer */ 
 
#footer {
display:none;
}
#license-area {
display:none;
}
 
/* COMMON */
 
#content-wrap {
    margin-top: 0px;
}
 
h1, #page-title {
    color: #000;
    padding: 0 0 0.25em;
    margin: 0 0 0.6em;
    font-weight: normal;
}
 
h1 {
    margin-top: 0.7em;
    padding: 0;
    font-weight: bold;
}
 
h2, h3, h4, h5, h6, h7 {
    margin: 0.5em 0 0.4em;
    padding: 0;
    letter-spacing: 1px;
}
 
#page-title {
    border-color: #000;
}
 
ul {
    /*list-style-image: url(/common--theme/shiny/images/bullet.gif);*/
    list-style: square;
}
 
#top-bar ul {
/*    list-style-image: none; /* IE ONLY! IF list-style-image IS SET */
}
 
li, p {
    line-height: 141%;
}
 
a {
    color: #6f1616;
    text-decoration: none;
}
 
a.newpage {
    color: #6f1616;
    text-decoration: none;
}
 
a:hover {
    text-decoration: underline;
}
 
/* SOME NICE BOXES */
 
div.sexy-box {
    background: #eee;
    border: 1px solid #ccc;
    padding: 0 10px 12px;
    margin: 7px 4px 12px;
    overflow: hidden;
}
 
div.sexy-box div.image-container img {
    margin: 5px;
    padding: 2px;
    border: 1px solid #999;
}
 
/* YUI TABS */
 
.yui-navset .yui-nav li,
.yui-navset .yui-navset-top .yui-nav li,
.yui-navset .yui-navset-bottom .yui-nav li {
    margin:0 0.5em 0 0; /* horizontal tabs */
}
.yui-navset-left .yui-nav li,
.yui-navset-right .yui-nav li {
    margin:0 0 0.5em; /* vertical tabs */
}
 
/* default width for side tabs */
.yui-navset .yui-navset-left .yui-nav,
.yui-navset .yui-navset-right .yui-nav,
.yui-navset-left .yui-nav,
.yui-navset-right .yui-nav { width:6em; }
 
.yui-navset-top .yui-nav,
.yui-navset-bottom .yui-nav {
    width:auto;
}
.yui-navset .yui-navset-left,
.yui-navset-left { padding:0 0 0 6em; } /* map to nav width */
.yui-navset-right { padding:0 6em 0 0; } /* ditto */
 
.yui-navset-top,
.yui-navset-bottom {
    padding:auto;
}
/* core */
 
.yui-nav,
.yui-nav li {
    margin:0;
    padding:0;
    list-style:none;
}
.yui-navset li em { font-style:normal; }
 
.yui-navset {
    position:relative; /* contain absolute positioned tabs (left/right) */
    zoom:1;
}
 
.yui-navset .yui-content { zoom:1; }
 
.yui-navset .yui-nav li,
.yui-navset .yui-navset-top .yui-nav li, /* in case nested */
.yui-navset .yui-navset-bottom .yui-nav li {
    display:inline-block;
    display:-moz-inline-stack;
    *display:inline; /* IE */
    vertical-align:bottom; /* safari: for overlap */
    cursor:pointer; /* gecko: due to -moz-inline-stack on anchor */
    zoom:1; /* IE: kill space between horizontal tabs */
}
 
.yui-navset-left .yui-nav li,
.yui-navset-right .yui-nav li {
    display:block;
}
 
.yui-navset .yui-nav a { position:relative; } /* IE: to allow overlap */
 
.yui-navset .yui-nav li a,
.yui-navset-top .yui-nav li a,
.yui-navset-bottom .yui-nav li a {
    display:block;
    display:inline-block;
    vertical-align:bottom; /* safari: for overlap */
    zoom:1;
}
 
.yui-navset-left .yui-nav li a,
.yui-navset-right .yui-nav li a {
    display:block;
}
 
.yui-navset-bottom .yui-nav li a {
    vertical-align:text-top; /* for inline overlap (reverse for Opera border bug) */
}
 
.yui-navset .yui-nav li a em,
.yui-navset-top .yui-nav li a em,
.yui-navset-bottom .yui-nav li a em { display:block; }
 
/* position left and right oriented tabs */
.yui-navset .yui-navset-left .yui-nav,
.yui-navset .yui-navset-right .yui-nav,
.yui-navset-left .yui-nav,
.yui-navset-right .yui-nav {
   position:absolute;
   z-index: 21; 
}
 
.yui-navset-top .yui-nav,
.yui-navset-bottom .yui-nav {
    position:static;
}
.yui-navset .yui-navset-left .yui-nav,
.yui-navset-left .yui-nav { left:0; right:auto; }
 
.yui-navset .yui-navset-right .yui-nav,
.yui-navset-right .yui-nav { right:0; left:auto; }
 
/*
Copyright (c) 2007, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.3.1
*/
/* .yui-navset defaults to .yui-navset-top */
.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav { /* protect nested tabviews from other orientations */
    border:solid #464646; /* color between tab list and content */
    border-width:0 0 5px;
    Xposition:relative;
    zoom:1;
}
 
.yui-navset .yui-nav li,
.yui-navset .yui-navset-top .yui-nav li {
    margin:0 0.16em 0 0; /* space between tabs */
    padding:1px 0 0; /* gecko: make room for overflow */
    zoom:1;
}
 
.yui-navset .yui-nav .selected,
.yui-navset .yui-navset-top .yui-nav .selected { 
    margin:0 0.16em -1px 0; /* for overlap */
}
 
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
    background:#d8d8d8 url(http://static.wikidot.com/common--javascript/yahooui/assets/sprite.png) repeat-x; /* tab background */
    border:solid #a3a3a3;
    border-width:0 1px;
    color:#000;
    position:relative;
    text-decoration:none;
}
 
.yui-navset .yui-nav a em,
.yui-navset .yui-navset-top .yui-nav a em {
    border:solid #a3a3a3;
    border-width:1px 0 0;
    cursor:hand;
    padding:0.25em .75em;
    left:0; right: 0; bottom: 0; /* protect from other orientations */
    top:-1px; /* for 1px rounded corners */
    position:relative;
}
 
.yui-navset .yui-nav .selected a:hover
{
    background: url(http://squark.wdfiles.com/local--files/dev:theme2/tab2.png);
}
 
.yui-navset .yui-nav .selected a:focus,
.yui-navset .yui-nav .selected a
 { /* no hover effect for selected */
    background:#2647a0 url(http://squark.wdfiles.com/local--files/dev:theme2/tab.png) repeat-x; /* selected tab background */
    color:#fff;
}
 
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {
    background:#bfdaff url(http://static.wikidot.com/common--javascript/yahooui/assets/sprite.png) repeat-x left -1300px; /* selected tab background */
    outline:0;
}
 
.yui-navset .yui-nav .selected a em {
    padding:0.35em 0.75em; /* raise selected tab */
}
 
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a em {
    border-color:#243356; /* selected tab border color */
}
 
.yui-navset .yui-content {
    background:#f4f5ff; /* content background color */
}
 
.yui-navset .yui-content,
.yui-navset .yui-navset-top .yui-content {
    border:1px solid #808080; /* content border */
    border-top-color:#243356; /* different border color */
    padding:0.25em 0.5em; /* content padding */
}
 
/* left and right orientations */
.yui-navset-left .yui-nav,
.yui-navset .yui-navset-left .yui-nav,
.yui-navset .yui-navset-right .yui-nav,
.yui-navset-right .yui-nav {
    border-width:0 5px 0 0;
    Xposition:absolute; /* from tabview-core; have to reiterate for skin-sam due to pos:rel on skin-sam yui-nav */
    top:0; bottom:0; /* stretch to fill content height */
}
 
.yui-navset .yui-navset-right .yui-nav,
.yui-navset-right .yui-nav {
    border-width:0 0 0 5px;
}
 
.yui-navset-left .yui-nav li,
.yui-navset .yui-navset-left .yui-nav li,
.yui-navset-right .yui-nav li {
    margin:0 0 0.16em; /* space between tabs */
    padding:0 0 0 1px; /* gecko: make room for overflow */
}
 
.yui-navset-right .yui-nav li {
    padding:0 1px 0 0; /* gecko: make room for overflow */
}
 
.yui-navset-left .yui-nav .selected,
.yui-navset .yui-navset-left .yui-nav .selected { 
    margin:0 -1px 0.16em 0;
}
 
.yui-navset-right .yui-nav .selected { 
    margin:0 0 0.16em -1px;
}
 
.yui-navset-left .yui-nav a,
.yui-navset-right .yui-nav a {
    border-width:1px 0;
}
 
.yui-navset-left .yui-nav a em,
.yui-navset .yui-navset-left .yui-nav a em,
.yui-navset-right .yui-nav a em {
    border-width:0 0 0 1px;
    padding:0.2em .75em;
    top:auto;
    left:-1px; /* for 1px rounded corners */
}
 
.yui-navset-right .yui-nav a em {
    border-width:0 1px 0 0;
    left:auto;
    right:-1px; /* for 1px rounded corners */
}
 
.yui-navset-left .yui-nav a,
.yui-navset-left .yui-nav .selected a,
.yui-navset-left .yui-nav a:hover,
.yui-navset-right .yui-nav a,
.yui-navset-right .yui-nav .selected a,
.yui-navset-right .yui-nav a:hover,
.yui-navset-bottom .yui-nav a,
.yui-navset-bottom .yui-nav .selected a,
.yui-navset-bottom .yui-nav a:hover {
    background-image:none; /* no left-right or bottom-top gradient */
}
 
.yui-navset-left .yui-content {
    border:1px solid #808080; /* content border */
    border-left-color:#243356; /* different border color */
}
 
/* bottom orientation */
.yui-navset-bottom .yui-nav,
.yui-navset .yui-navset-bottom .yui-nav {
    border-width:5px 0 0; /* color between tab list and content */
}
 
.yui-navset .yui-navset-bottom .yui-nav .selected,
.yui-navset-bottom .yui-nav .selected { 
    margin:-1px 0.16em 0 0; /* for overlap */
}
 
.yui-navset .yui-navset-bottom .yui-nav li,
.yui-navset-bottom .yui-nav li { 
    padding:0 0 1px 0; /* gecko: make room for overflow */
    vertical-align:top;
}
 
.yui-navset .yui-navset-bottom .yui-nav li a,
.yui-navset-bottom .yui-nav li a { 
}
 
.yui-navset .yui-navset-bottom .yui-nav a em,
.yui-navset-bottom .yui-nav a em {
    border-width:0 0 1px;
    top:auto;
    bottom:-1px; /* for 1px rounded corners */
}
 
.yui-navset-bottom .yui-content,
.yui-navset .yui-navset-bottom .yui-content {
    border:1px solid #808080; /* content border */
    border-bottom-color:#243356; /* different border color */
}
}
#header h1{
font-size:32px;
}
#edit-page-form{
background-color:white;
}
 
.page-watch-options{
display:none;
}

Notes

Similar themes fake-wikidot-standard Author: Liurd Rating: 1, Comments: 0 Tags: sidebar topbar Gnl 109557431160 Author: Mukapogx Rating: 0, Comments: 0 Tags: sidebar topbar

Browse themes by tag 2.0 3d 3d-buttons 610nm and and/or ardeol articles band base beige black blog bloo blue bmc border boring brown business camo cat chocholate christian christmas city clan claret claus clay clean coffe coke colorful company contest contest-win corperate corporate corporation creative crimson cross css3 css3-buttons curved d14 dark dashed deep

Comments

There is NO WAY to Sign In

MrRondon101 10 Dec 2010 03:06

I ended up liking this theme because it made my page more beautiful AND made it easier to navigate for my students.

Unfortunately, there is NO sign in or My Account link when I put this on.

Add that and your theme will be rocking again. I tried doing it but way too much of a newbie

tsangk 10 Dec 2010 05:34

Account box added. :)

---

Kenneth Tsang (@jxeeno)

Whane The Whip 04 May 2011 18:52

There is no page control for this theme. I.E. Edit, Tags, Files, Etc…

RobElliott 04 May 2011 19:13

This is easily fixed with CSS by having the following on your page that holds your CSS:

[[code type="css"]]
@import url(http://themes.wdfiles.com/local--code/worksheet);
 
#page-options-bottom {display:block;}
[[/code]]

..and then pointing your site manager -> appearance -> themes to an external theme /yourCSSpage/code/1

However, to make life simple I have removed the .page-options-bottom { display:none;} from the theme's CSS, so you should find you now have the edit, files etc buttons.

---

Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.

Last edited on 04 May 2011 19:18 by RobElliott Show more

ecoambiente82

sandia 07 Sep 2012 06:03

Un espacio creado para la conciencia del medio ambiente