WebBrand

Name: WebBrand

Author: Timothy Foster
License: Creative Commons Attribution-ShareAlike 3.0 License
Tags: ardeol blog corporate css3 educational series sidebar topbar

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

Description:

Utilize the capacity of new browsers with the WebBrand themes! With the advent of CSS3, new cool and slick looks can be applied ranging from curves to gradients (and animations too!). The WebBrand themes provide a nice, round texture to the content and top bar while allowing for quick side navigation. These themes will work for all recent versions of the major browsers, but they are also functional in the older versions. In addition, CSS has been tailored for Wikidot-specific apps and snippets, including the Calendar App, the Image Box CSI, the Plurality CSI, Inline Hovertips, and the standard Tabview.

See the Live Demo Here!

The WebBrand Series features a set of 11 themes in addition to this one in a variety of colors based on elements in nature. Feel free to poke around these variations to find which flavor fits your fancy!

WebBrand — Install

MagmaBrand — Install
FireBrand — Install
ThunderBrand — Install
WindBrand — Install
IceBrand — Install
WaterBrand — Install
AetherBrand — Install
EarthBrand — Install
MetalBrand — Install
DarkBrand — Install
LightBrand — Install

For developers and those who want customization, feel free to access the source code.

How to install

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

https://files.themes.obscurative.ru/local--code/webbrand

Code

+ show the code

- hide the code

/******************************
    WebBrand Themes
    By Timothy Foster
    Copyright 2011
******************************/
 
/* Imports
=============================*/
@import url(http://snippets.wdfiles.com/local--code/sp-css-import);
 
/* Global
=============================*/
p{    line-height: 1.4em; }
a{
    color: #658515;
    text-decoration: none;
    background: none;
}
a:hover{
    text-decoration: underline;
    background: none;
}
a.newpage{    color: #AAA; }
a.newpage:hover{    color: #A2A2A2; }
div.buttons input, input.button,
button, a.button,
.pager span.target a,
.owindow .button-bar a,
.new-post a{
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    padding: 6px 12px;
    background-color: #CCDE9A;
    background-image: -moz-linear-gradient(top,#CCDE9A,#BFD683);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#CCDE9A), to(#BFD683));
    box-shadow: 0 0 4px -2px #888;
    -moz-box-shadow: 0 0 4px -2px #888;
    -webkit-box-shadow: 0 0 4px -2px #888;
    transition: all 250ms;
    -moz-transition: all 250ms;
    -webkit-transition: all 250ms;
    -o-transition: all 250ms;
}
div.buttons input:hover, input.button:hover,
button:hover, a.button:hover,
.pager span.target a:hover,
.owindow .button-bar a:hover,
.new-post a:hover{
    background-color: #F5F5F5;
    background-image: -moz-linear-gradient(top,#FAFAFA,#F3F3F3);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#FAFAFA), to(#F3F3F3));
    text-shadow: 0 0 1px #999;
    text-decoration: none;
}
div.buttons input:active, input.button:active,
button:active, a.button:active,
.pager span.target a:active,
.owindow .button-bar a:active,
.new-post a:active{
    background-color: #F0F0F0;
    background-image: -moz-linear-gradient(top,#F5F5F5,#EDEDED);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#F5F5F5), to(#EDEDED));
}
input.text, input[type=text], textarea{
    border: 1px solid #CCC;
    padding: 3px 6px;
    background-color: #FFF;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}
input.text:focus, input[type=text]:focus, textarea:focus{
    border: 1px solid #658515;
}
 
/* Outer Frame
=============================*/
body{
    background-image: url(https://themes.obscurative.ru/local--files/webbrand/brand_back.png);
    font-family: Arial, Helvetica, sans-serif;
}
#container-wrap{
    width: 950px;
    margin: auto;
}
 
/* Header
=============================*/
#header{
    height: 150px;
    padding-left: 18px;
}
#header h1, #header h2{    font-family: Georgia, serif; }
#header h1{
    font-size: 40px;
    font-weight: normal;
    letter-spacing: 1px;
    margin: 0;
    padding: 4px 0 0 0;
    text-shadow: 1px 1px 2px rgba(90, 90, 90, 0.4);
    word-spacing: -6px;
}
#header h2{
    color: #40331F;
    font-size: 10px;
    font-weight: normal;
    letter-spacing: 2px;
    margin: 0;
    padding: 4px 0 0 80px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}
#header h1 a{
    transition: color 500ms;
    -moz-transition: color 500ms;
    -webkit-transition: color 500ms;
    -o-transition: color 500ms;
}
#header h1 a:hover{
    text-decoration: none;
    color: #40331F
}
 
/* Account Options
=============================*/
#login-status{
    font-size: 80%;
    color: #696969;
}
#login-status .printuser a{    visibility: hidden; }
#login-status a{
    color: #727272;
    transition: color 250ms;
    -moz-transition: color 250ms;
    -webkit-transition: color 250ms;
    -o-transition: color 250ms;
}
#login-status a:hover{
    color: #444;
    text-decoration: none;
}
#account-topbutton{
    background-color: #CCC;
    border: none;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}
#account-options{
    border: 1px solid #AAA;
    box-shadow: 0 0 5px -2px #777;
    -moz-box-shadow: 0 0 5px -2px #777;
    -webkit-box-shadow: 0 0 5px -2px #777;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    text-align: center;
    background-color: #F5F5F5;
    background-image: -moz-linear-gradient(top,#FAFAFA,#F3F3F3);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#FAFAFA), to(#F3F3F3));
    width: 130px;
}
#account-options li:nth-child(1),
#account-options li:nth-child(2),
#account-options li:nth-child(3),
#account-options li:nth-child(5){    display: none; }
 
/* Search Box
=============================*/
#search-top-box{
    width: 250px;
    right: 10px; top: 80px;
    height: 22px;
    border: 1px solid #AAA;
    background-color: #FAFAFA;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}
#search-top-box input.text{
    border: none;
    background: none;
    height: 20px;
    width: 212px;
    color: #555;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    padding: 1px 5px;
}
#search-top-box input.text.empty{
    color: #AAA;
    font-style: italic;
}
#search-top-box input.button{
    text-indent: -9999px;
    border: none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    width: 20px;
    height: 20px;
    padding: 0;
    margin: 1px 0;
    background-color: transparent;
    background-image: url(https://themes.obscurative.ru/local--files/webbrand/brand_searchIcon.png);
    background-repeat: no-repeat;
    background-position: center center;
    transition: background-color 500ms;
    -moz-transition: background-color 500ms;
    -webkit-transition: background-color 500ms;
    -o-transition: background-color 500ms;
}
#search-top-box input.button:hover{    background-color: #EAEAEA; }
 
/* Top Bar
=============================*/
#top-bar{
    display: block;
    position: absolute;
    left: 0; bottom: 0;
    width: 100%;
    background-image: url(https://themes.obscurative.ru/local--files/webbrand/brand_webTop.png);
    background-repeat: repeat-x;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    height: 40px;
    box-shadow: 0 0 5px -2px #777;
    -moz-box-shadow: 0 0 5px -2px #777;
    -webkit-box-shadow: 0 0 5px -2px #777;
    border: 1px solid #AAA;
}
#top-bar > ul{
    float: left;
    padding: 0;
    height: 40px;
}
#top-bar ul li a{
    color: #222A19;
    height: 24px;
    margin: 3px 0;
    padding: 8px 10px 0;
    background: none;
    font-size: 11pt;
    font-weight: bold;
    text-shadow: 0 0 1px #999;
    box-shadow: inset 0 0 4px rgba(195,195,195,0.0);
    -moz-box-shadow: inset 0 0 4px rgba(195,195,195,0.0);
    -webkit-box-shadow: inset 0 0 4px rgba(195,195,195,0.0);
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border: 1px solid;
    border-color: transparent;
    transition: color 400ms, background 400ms, box-shadow 400ms, border-color 400ms;
    -moz-transition: color 400ms, background 400ms, box-shadow 400ms, border-color 400ms;
    -webkit-transition: color 400ms, background 400ms, box-shadow 400ms, border-color 400ms;
    -o-transition: color 400ms, background 400ms, box-shadow 400ms, border-color 400ms;
}
#top-bar ul li a:hover{
    color: #525A69;
    border-color: rgba(156,156,156,1.0);
    text-decoration: none;
    background: rgba(240,240,240,0.1);
    box-shadow: inset 0 0 2px rgba(175,175,175,0.9);
    -moz-box-shadow: inset 0 0 2px rgba(175,175,175,0.9);
    -webkit-box-shadow: inset 0 0 2px rgba(175,175,175,0.9);
}
 
#top-bar li ul{
    width: 200px;
    opacity: 0;
    margin-left: 75px;
    background-color: #F5F5F5;
    background-image: -moz-linear-gradient(top,#FAFAFA,#F3F3F3);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#FAFAFA), to(#F3F3F3));
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    box-shadow: 0 0 5px -2px #777;
    -moz-box-shadow: 0 0 5px -2px #777;
    -webkit-box-shadow: 0 0 5px -2px #777;
    border: 1px solid #AAA;
    transition: all 1s;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
}
#top-bar li:hover ul{
    opacity: 1;
    margin-left: 0;
}
#top-bar li ul li a{
    font-size: 10pt;
    background: none;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    height: 20px;
}
#top-bar li ul li a:hover{
    box-shadow: inset 0 0 4px rgba(195,195,195,0.0);
    -moz-box-shadow: inset 0 0 4px rgba(195,195,195,0.0);
    -webkit-box-shadow: inset 0 0 4px rgba(195,195,195,0.0);
    border-color: rgba(156,156,156,0.0);
    background: rgba(240,240,240,0.0);
    color: #658515;
}
#top-bar li li ul{    display: none !important; }
 
/* Main Content
=============================*/
#content-wrap{
    background: #FFF;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    box-shadow: 0 0 3px #777;
    -moz-box-shadow: 0 0 3px #777;
    -webkit-box-shadow: 0 0 3px #777;
    margin: 2px 10px;
    padding-bottom: 6px;
}
#main-content{    margin: 10px 250px 0 1em; }
#page-title{
    font-size: 24pt;
    border-bottom: none;
}
#main-content h1{    font-size: 20pt; }
#main-content h2{    font-size: 18pt; }
#main-content h3{    font-size: 16pt; }
#main-content h4{    font-size: 14pt; }
#main-content h5{    font-size: 13pt; }
#main-content h6{    font-size: 12pt; }
#main-content h4,
#main-content h5,
#main-content h6{    font-style: italic; }
div.code{
    border-left: 2px solid #B1D493;
    border-right: 1px solid #B1D493;
    border-top: none;
    border-bottom: none;
    background-color: #F6FFED;
    padding-left: 4px;
}
div.code pre{
    border-left: 1px dashed #B1D493;
    padding: 5px .6em;
}
#toc{
    border: 1px solid #AAA;
    box-shadow: 0 0 4px -2px #777;
    -moz-box-shadow: 0 0 4px -2px #777;
    -webkit-box-shadow: 0 0 4px -2px #777;
    background-color: #F5F5F5;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}
#toc-action-bar{    display: none; }
#page-options-bottom-2{    font-size: 80%; }
#breadcrumbs{
    border: 1px solid #AAA;
    box-shadow: 0 0 4px -2px #777;
    -moz-box-shadow: 0 0 4px -2px #777;
    -webkit-box-shadow: 0 0 4px -2px #777;
    background-color: #F5F5F5;
    border-radius: 7px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    padding: 4px 10px;
    font-size: 80%;
    text-transform: uppercase;
    letter-spacing: 1pt;
    margin-bottom: 4px;
}
.error-block{    text-align: center; }
.pager span.target a{
    padding: 3px 5px;
    color: #333;
}
.pager .pager-no{    display: none; }
.pager .current{
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    color: #222;
    border: 1px solid #AAA;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    padding: 4px 6px;
    box-shadow: 0 0 4px -2px #888;
    -moz-box-shadow: 0 0 4px -2px #888;
    -webkit-box-shadow: 0 0 4px -2px #888;
    background-color: #F5F5F5;
    background-image: -moz-linear-gradient(top,#FAFAFA,#F3F3F3);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#FAFAFA), to(#F3F3F3));
    text-shadow: 0 0 1px #999;
}
.optionstd a{
    color: #555;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-color: #AAA;
}
#page-version-info{    display: none; }
 
/* Side Bar
=============================*/
#side-bar{
    float: right;
    width: 200px;
    margin: 10px 0 0 1em;
}
#side-bar h1, #side-bar h2,
#side-bar h3, #side-bar h4{
    margin: 4px 0;
    font-family: Georgia, serif;
    color: #658515;
    letter-spacing: 1px;
    font-weight: bold;
}
#side-bar h1{    font-size: 14pt; }
#side-bar h2{    font-size: 12pt; }
#side-bar h3{    font-size: 11pt; }
#side-bar h4{    font-size: 10pt; }
#side-bar p{
    font-size: 90%;
    color: #444;
}
#side-bar ul{
    list-style: none;
    padding-left: 1em;
}
#side-bar li a{
    display: block;
    padding: 0 0 5px 0;
    font-size: 110%;
    border-right: 2px solid #EEE;
    transition: 600ms border-color;
    -moz-transition: border-color 600ms linear, padding-left 300ms linear;
    -webkit-transition: border-color 600ms linear, padding-left 300ms linear;
    -o-transition: border-color 600ms linear, padding-left 300ms linear;
}
#side-bar li a:hover{
    text-decoration: none;
    border-color: #BED272;
    padding-left: 6px;
}
 
/* Footer and License
=============================*/
#footer,
#license-area{    font-size: 80%; }
 
/* Forum
=============================*/
blockquote{
    border: none;
    border-top: 2px solid #658515;
    border-bottom: 1px solid #658515;
    color: #555;
    font-style: italic;
    background-color: #F8F8F8;
    background-image: -moz-linear-gradient(top,#F2F2F2,#FAFAFA);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#F2F2F2), to(#FAFAFA));
}
 
/* All In-Built Hovertips
=============================*/
.hovertip{
    border: 1px solid #777 !important;
    background-color: rgba(50,50,50,0.9) !important;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    box-shadow: 0 0 4px -2px #777;
    -moz-box-shadow: 0 0 4px -2px #777;
    -webkit-box-shadow: 0 0 4px -2px #777;
    max-width: 600px;
}
.hovertip .content{
    margin: 3px;
    font-size: 80%;
    color: #F5F5F5;
    text-shadow: 1px 1px 1px -1px #EEE;
}
 
/* Wikidot Tables
=============================*/
table.wiki-content-table{
    border-collapse: separate;
    border-spacing: 2px;
    border: none;
    min-width: 300px;
}
table.wiki-content-table th{
    color: #222;
    border: none;
    background-color: #BCCE8A;
    text-align: left;
    font-weight: bold;
    padding: 1px 3px 1px 4px;
}
table.wiki-content-table td{
    border: none;
    color: #444;
    font-size: 90%;
    background: #F2F2F2;
    padding: 1px 3px 1px 4px;
}
 
/* Action Area
=============================*/
/* Editor Panel thanks to leiger */
#np-editor-panel,
#wd-editor-toolbar-panel,
#post-edit-panel{
    height: 30px;
    position: relative;
    overflow: hidden;
    -webkit-transition: height 450ms ease-in-out;
    -moz-transition: height 450ms ease-in-out;
    -o-transition: height 450ms ease-in-out;
    -ms-transition: height 450ms ease-in-out;
    transition: height 450ms ease-in-out;
}
#np-editor-panel:hover,
#wd-editor-toolbar-panel:hover,
#post-edit-panel:hover{    height: 90px; }
div.change-textarea-size{    visibility: hidden; }
.edit-page-bottomtable{    width: 100%; }
 
/* New Wikidot Editor Buttons
By Matt Gentile at Icondeposit.com 
.wd-editor-toolbar-panel a{
    margin: 0;
    border: none;
    background-color: transparent !important;
        border-radius: 3px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        -o-border-radius: 3px;
        box-shadow: 0px 1px 3px rgba(0,0,0,0.18);
        -webkit-shadow: 0px 1px 3px rgba(0,0,0,0.18);
        -moz-shadow: 0px 1px 3px rgba(0,0,0,0.18);
        -o-shadow: 0px 1px 3px rgba(0,0,0,0.18);
}
.wd-editor-toolbar-panel a:hover{
    border: none;
}
.wd-editor-toolbar-panel a:active {
        box-shadow: none;
        -webkit-shadow: none;
        -moz-shadow: none;
        -o-shadow: none;
}
.wd-editor-toolbar-panel a {
    background-image: url(http://icondeposit.wdfiles.com/local--files/design%3A4/wdb.png);
}
.wd-editor-toolbar-panel a:hover {
    background-image: url(http://icondeposit.wdfiles.com/local--files/design%3A4/wdbhover.png);
}
.wd-editor-toolbar-panel a:active {
    background-image: url(http://icondeposit.wdfiles.com/local--files/design%3A4/wdbactive.png);
}
/* */
 
/* OWindow
=============================*/
.owindow{
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    background: #CCDE9A;
    background: rgba(204,222,154,0.8);
    padding: 0 10px 10px 10px;
    border: 1px solid #333;
    box-shadow: 0 0 5px -1px #FFF;
    -moz-box-shadow: 0 0 5px -1px #FFF;
    -webkit-box-shadow: 0 0 5px -1px #FFF;
    color: #555;
}
.owindow div.title{
    background: none;
    padding: 7px 0 5px 6px;
    color: #333;
    font-size: 14pt;
    text-transform: capitalize;
    letter-spacing: 1px;
}
.owindow div.content{
    background-color: #F5F5F5;
    background-image: -moz-linear-gradient(top,#FAFAFA,#F3F3F3);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#FAFAFA), to(#F3F3F3));
    margin: 0;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}
.owindow div.content h1{    font-size: 18pt; }
.owindow.error div.content h1{    font-style: italic; }
.owindow div.button-bar{
    position: absolute;
    top: 7px; right: 12px;
    padding: 0;
    margin: 0;
    height: 20px;
}
.owindow div.button-bar a{
    position: static;
    display: inline-block;
    text-indent: -9999px;
    font-size: 0pt;
    padding: 0;
    margin-left: 5px;
    height: 20px;
    width: 20px;
    background: none;
    background-image: url(https://themes.obscurative.ru/local--files/webbrand/brand_close.png);
    border: none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    opacity: 0.25;
}
.owindow div.button-bar a[class~='button-yes,-revert'],
.owindow div.button-bar a[class~='button-yes,-delete'],
.owindow div.button-bar a.button-rename,
.owindow div.button-bar a.button-move,
.owindow div.button-bar a.button-edit-draft{
    background-image: url(https://themes.obscurative.ru/local--files/webbrand/brand_confirm.png);
}
.owindow div.button-bar a:hover{
    background: none;
    background-image: url(https://themes.obscurative.ru/local--files/webbrand/brand_close.png);
    opacity: 0.7;
}
.owindow div.button-bar a[class~='button-yes,-revert']:hover,
.owindow div.button-bar a[class~='button-yes,-delete']:hover,
.owindow div.button-bar a.button-rename:hover,
.owindow div.button-bar a.button-move:hover,
.owindow div.button-bar a.button-edit-draft{
    background-image: url(https://themes.obscurative.ru/local--files/webbrand/brand_confirm.png);
}
.owindow .content div.button-bar{    position: static; }
.owindow .content div.button-bar a:first-child{
    position: absolute;
    top: 7px; right: 12px;
}
.owindow .content div.button-bar a:last-child,
#edit-recheck-lock{
    font-size: 12pt;
    background: none;
    text-indent: 0;
    width: auto;
    opacity: 0.7;
    margin-left: 10px;
}
.owindow .content div.button-bar a:last-child:hover,
#edit-recheck-lock:hover{
    background: none;
    opacity: 1;
}
.owindow.owait, .owindow.osuccess{
    width: 175px;
    height: 36px;
    padding: 10px;
}
.owindow.owait .content,
.owindow.osuccess .content{
    padding: 10px;
    text-align: center;
    vertical-align: middle;
    margin: auto;
    width: 155px;
    height: 16px;
    background-image: none;
}
 
/* Timothy's Image Box
=============================*/
.image-box{
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-color: #AAA;
    margin: 5px;
}
.image-box-heading{
    border-radius: 10px 10px 0 0;
    -moz-border-radius: 10px 10px 0 0;
    -webkit-border-radius: 10px 10px 0 0;
    background-color: #BCCE8A;
    text-shadow: 1px 0 2px -1px #777;
}
.image-box-caption{    color: #777; }
 
/* James Kanjo's Hover Tips
=============================*/
.hover{
    text-decoration: underline;
    border-bottom: 1px solid;
    color: #658515;
}
.hover:hover{
    text-decoration: none;
    border-bottom: none;
}
.hover span{    
    visibility: hidden;
    position: absolute;
    opacity: 0;
    transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -webkit-transition: opacity 500ms;
    -o-transition: opacity 500ms;
}
.hover:hover span{
    visibility: visible;
    position: absolute;
    display: inline;
    opacity: 1;
    color: #444;
    font-size: 80%;
    margin: 15px -20px;
    height: auto;
    background: #F9F9F9;
    border: 1px solid #BED272;
    width: 300px;
    padding: 1em;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 0 2px 4px rgba(100,100,100,0.3);
    -moz-box-shadow: 0 2px 4px rgba(100,100,100,0.3);
    -webkit-box-shadow: 0 2px 4px rgba(100,100,100,0.3);
}
.hover:hover span span{
    position: relative;
    margin: auto;
    height: auto;
    width: auto;
    border: none;
    padding: 0;
}
 
/* Calendar App
=============================*/
.calendar{
    border:1px solid #888;
    font-size: 85%;
}
.calendar a{    text-decoration: none; }
.calendar p{    margin:0px; }
.calendar .grid a,
.MINI.calendar span.calenhover span a{
    color: #000;
    text-decoration: none;
}
.calendar a:hover{    background-color: transparent; }
.calendar .date a{    color: #5D8600; }
.calendar .heading{
    background-color: #BCCE8A;
    font-size: 110%;
    color: #222;
}
.calendar .heading,
.calendar .weekday{
    font-weight: bold;
    text-align: center;
}
.calendar .weekday,
.calendar .day{
    border:1px solid #AAA;
    background-color: #FFF;
    vertical-align: top;
    padding: 0 5px;
}
.MINI.calendar .day{    padding: 0; }
.calendar .day:hover{    background-color: #CBD6B1;}
.calendar .day .max-height{
    overflow: hidden;
    height: 60px;
}
.MINI.calendar .day .max-height{
    height: auto;
    text-align: center;
}
.calendar .day:hover .max-height{    height: auto; }
/* IE FIX */
* html .calendar .day .max-height{    height: auto; }
* + html .calendar .day .max-height{    height: auto; }
.calendar .event{
    height: 1.25em;
    display: inline-block;
    overflow: hidden;
    padding: 1px 5px 2px;
    margin:1px 2px 1px;
    background-color: #ABB691;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    font-size: 90%;
}
.calendar .calenhover span{
    position: absolute;
    visibility: hidden;
    opacity: 0.0;
    margin: 10px -90px;
    margin-top: 75px;
    width: 250px;
    border: 1px solid #AAA;
    padding: .5em;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    background-color: #F5F5F5;
    background-image: -moz-linear-gradient(top,#FAFAFA,#F3F3F3);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#FAFAFA), to(#F3F3F3));
    font-style: italic;
    transition: all 1ms;
    -moz-transition: all 750ms;
    -webkit-transition: all 750ms;
    -o-transition: all 750ms;
}
.calendar .calenhover span a{    font-style: normal; }
.MINI.calendar .calenhover span{    margin-top: -5px; }
.calendar .calenhover:hover span{
    display: table-cell;
    visibility: visible;
    text-align: left;
    opacity: 1.0;
    margin-top: 18px;
}
.calendar .date a,
.calendar .calenhover span a{
    font-weight: bold;
    text-decoration: none;
}
.MINI.calendar .day span a{
    font-weight: bold;
    color: #ABB691;
}
.MINI.calendar span.calenhover a{    color: #5D8600; }
 
.iframe .weekday{
    text-align: right;
    width: 130px;
    font-size: 100%;
}
.iframe .month-day{
    width: 60px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    background-color: #6D9610;
}
.iframe .month{
    color: #FFF;
    font-size: 100%;
    padding-top: 2px;
    text-align: center;
}
.iframe .day{
    background-color: #CBD6B1;
    color: #000;
    font-size: 100%;
    -moz-border-radius: 0 0 10px 10px;
    -webkit-border-bottom-left-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    text-align: center;
}
.iframe .year{
    text-align: left;
    width: 100px;
    font-size: 100%;
}
.gobacklink a{    color: #5D8600; }
.gobacklink a:hover{
    background-color:transparent;
    text-decoration:none;
}
.calendar .calenhover.date span{    display: none !important; }
.calendar .calenhover.date:hover span{    display: none !important; }
 
/* Tabview
=============================*/
.yui-navset .yui-nav{    border-bottom: 3px solid #BFD683; }
.yui-navset .yui-nav .selected a{
    background-color: #CCDE9A;
    background: -moz-linear-gradient(top,#CCDE9A,#BFD683);
    background: -webkit-gradient(linear, left top, left bottom, from(#CCDE9A), to(#BFD683));
    color: #222;
    font-weight: bold;
    border: 1px solid #999;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    font-size: 90%;
}
.yui-navset .yui-nav a{
    background-color: #F5F5F5;
    background: -moz-linear-gradient(top,#FAFAFA,#F3F3F3);
    background: -webkit-gradient(linear, left top, left bottom, from(#FAFAFA), to(#F3F3F3));
    border: 1px solid #AAA;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    font-size: 90%;
}
.yui-navset .yui-nav a em{    border: none; }
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:active,
.yui-navset .yui-nav a:focus{
    background-color: #F0F0F0;
    background: -moz-linear-gradient(top,#F5F5F5,#EEE);
    background: -webkit-gradient(linear, left top, left bottom, from(#F5F5F5), to(#EEE));
}
.yui-navset .yui-nav .selected a:hover,
.yui-navset .yui-nav .selected a:active,
.yui-navset .yui-nav .selected a:focus{
    background-color: #CCDE9A;
    background: -moz-linear-gradient(top,#CCDE9A,#BFD683);
    background: -webkit-gradient(linear, left top, left bottom, from(#CCDE9A), to(#BFD683));
    padding-bottom: 0;
    color: #222;
}
.yui-navset .yui-content{
    background: #F8F8F8;
    border: 1px solid #999;
    padding: 0 1em 1px 1em;
    color: #444;
    font-size: 90%;
}
 
/* Quick Comments
=============================*/
#np-editor-title, #np-title,
#np-editor-panel,
#np-cancel, #np-preview,
#new-post-form br{    display: none; }
#np-text{
    width: 85% !important;
    height: 200px !important;
}
.signature{    display: none; }
span.printuser.avatarhover a:first-child{    display: none; }
#thread-container .head .options{    display: none; }
#thread-container .post{
    border: 1px solid #AAA;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    background: #F9F9F9;
    margin: 14px 0;
    padding: 5px 10px;
    color: #777;
    font-size: 80%;
}
#thread-container .head .odate{    float: right; }
#thread-container .head{    background: none; }
 
/* Rate Widget
=============================*/
.page-rate-widget-box{
    border: 1px solid #AAA;
    background-color: #F5F5F5;
    background-image: -moz-linear-gradient(top,#FAFAFA,#F3F3F3);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#FAFAFA), to(#F3F3F3));
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 0 1px 2px rgba(100,100,100,0.3);
    -moz-box-shadow: 0 1px 2px rgba(100,100,100,0.3);
    -webkit-box-shadow: 0 1px 2px rgba(100,100,100,0.3);
    width: 140px;
    height: 20px;
    line-height: 20px;
}
.page-rate-widget-box .rate-points{
    background: none;
    color: #666;
    font-weight: normal;
    text-transform: capitalize;
    display: inline-block;
    width: 65px;
    padding-right: 0;
}
.page-rate-widget-box .rate-points .number{
    color: #444;
    font-weight: bold;
}
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a,
.page-rate-widget-box .cancel a{
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    background: none;
    font-size: 110%;
    font-weight: bold;
    margin-right: 2px;
    transition:  background-color 200ms linear;
    -moz-transition: background-color 200ms linear;
    -webkit-transition: background-color 200ms linear;
    -o-transition: background-color 200ms linear;
}
.page-rate-widget-box .rateup a{    background-color: #CDC; }
.page-rate-widget-box .ratedown a{    background-color: #DCC; }
.page-rate-widget-box .cancel a{    background-color: #CCC; }
.page-rate-widget-box .rateup a:hover,
.page-rate-widget-box .ratedown a:hover,
.page-rate-widget-box .cancel a:hover{    text-decoration: none; }
.page-rate-widget-box .rateup a:hover{    background-color: #CEC; }
.page-rate-widget-box .ratedown a:hover{    background-color: #ECC; }
.page-rate-widget-box .cancel a:hover{    background-color: #DDD; }
 
/* Admin Panel
=============================*/
#site-manager{
    margin: 0 auto;
    padding-top: 1em;
}
#site-manager h1{    margin: 0 0 1em 0; }
 
/* Print
=============================*/
body.print-body{
    background-image: none !important;
    background-color: #FFF !important;
}
.print-body #content-wrap{
    border: none !important;
    box-shadow: none !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
}
.print-body .quickCom{    display: none !important; }

Notes

If you wish to remove the side bar, add the following to the end of your CSS:

#side-bar{    display: none !important; }
#main-content{    margin-right: 1em !important; }

Changelog:

27 May 2014 — Reverted to old editor buttons, as the cool ones habitually show up as blank.
28 Apr 2013 — Changed editor buttons location to a more direct URL.
12 Mar 2012 — Allowed for confirmation owindow dialogs to have multiple options if applicable. Before, only an X would appear in the top-right corner even if the dialog had multiple options. This has been fixed to accommodate every option of every dialog. Additionally, #page-version-info is hidden.
16 Jan 2012 — Modified #account-options to hide everything except Settings and Sign out, since Activities were added. Border color for DarkBrand top bar changed.
01 Jan 2012 — Added compatibility definitions for border-radius in #top-bar li ul.
30 Dec 2011 — Added no side bar support. Fixed margin bug in Site Manager.
29 Dec 2011 — Modified the .owindow classes to be more fancy.
28 Dec 2011 — Amended color mismatch for buttons on MagmaBrand. Amended owindow button bar text color mismatch. Fire, Thunder, Wind, Ice, Water, Aether, Earth, Dark, and Light added.
27 Dec 2011 — WebBrand Themes started. Generic, Metal, and Magma added.

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

Comments

Hide All Comments Unfold All Fold All

Fold

Pro Set

Whane The Whip 17 Jan 2012 01:05

Very nice set, it looks like you spent a lot of time with the detail meter set to high, very nice. That being said, I did find the rounded corners of the dark version to be slightly inconsistent in Mozilla and I.E. (I really wish all browsers would just agree to 100% W3C standards).

In the image below the first one is Chrome.. perfect

The next is FF; the corners are a bit fuzzy and although it does not show well here, when viewing the entire site it really stands out. I also noticed that the menu text is a little off compared to chrome, there's a few pixels space above the text than below.

The last image is taken from I.E. and the corners are a little fuzzy.

My nitpicks are lightly given though, the set is really quite clean and pro looking.

Last edited on 17 Jan 2012 01:05 by Whane The Whip Show more

Reply Options

Unfold Pro Set by

Whane The Whip, 17 Jan 2012 01:05

Fold

Re: Pro Set

Timothy Foster 17 Jan 2012 01:58

Thanks for the feedback! I'm glad you like it.

Thanks for your nitpicking though; after working at it so long, it becomes tough to find the little things. Before, I had not realized that the corners were fuzzy, but now that I know about them, it's actually hard to miss! Firefox does do some weird things with round corners, I've noticed; for instance, when rounding thicker borders it creates these weird gaps which are, unfortunately, due to a limitation on Mozilla's side. At least we have Google Chrome :D

I tried changing the top bar's border color for the DarkBrand theme, which seems to alleviate the problem on FF. I'll need to check on Chrome and IE when I get access to those.

Timothy Foster - @tfAuroratide
Auroratide.com - Go here if you're nerdy like me

Reply Options

Unfold Re: Pro Set by

Timothy Foster, 17 Jan 2012 01:58

Add a New Comment

_stable ardeol blog corporate css3 educational series sidebar topbar

Wikidot Themes

Share your Wikidot theme with others!