Generic Developer

Name: Generic Developer

Author: Timothy Foster
License: Creative Commons Attribution-ShareAlike 3.0 License
Tags: ardeol base developer sidebar topbar

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

Description:

This is the generic template for the Developer Theme series engineered by Timothy Foster. This theme features mainly a simplistic architecture perfect for educational sites and corporations. Attention is given to the content of the page while providing for a clean side and top navigation. In addition, the theme should be compatible with most browsers. CSS has been built in for the Checklist App, Image Box CSI, Plurality CSI, Hover Tips, and Tabview.

In addition to this theme is a variety of variations based on different colors to suit your preference. The following list represents all of the available variations of the Developer Theme series, all based around two to three colors and three image sets:

Amethyst Developer — Install
Diamond Developer — Install
Emerald Developer — Install
Garnet Developer — Install
Malachite Developer — Install
Obsidian Developer — Install
Onyx Developer — Install
Peridot Developer — Install
Quartz Developer — Install
Ruby Developer — Install
Sapphire Developer — Install
Tanzanite Developer — Install
Topaz Developer — Install

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/generic-developer

Code

+ show the code

- hide the code

/* Imports
======================*/
@import url(http://snippets.wdfiles.com/local--code/sp-css-import);
 
/* Global
======================*/
html,body{    min-height: 101%; }
body{
    background-color: #E3E0E6;
    background-image:url(http://themes.wikidot.com/local--files/generic-developer/developer_body-back.png);
    background-repeat:repeat-x;
}
#container{
    margin: 5px auto;
    width: 80%;
}
a{    text-decoration: none; }
a:hover{
    text-decoration: underline;
    background: none;
}
a.newpage{    color: #AAA; }
a.newpage:hover{    color:#A5A5A5; }
div.buttons input, input.button, button, a.button{
    height: 22px;
    background-image: url(http://themes.wikidot.com/local--files/generic-developer/developer_generic-top.png);
    background-repeat: repeat-x;
}
div.buttons input:hover, input.button:hover, button:hover, a.button:hover{
    background-image: url(http://themes.wikidot.com/local--files/generic-developer/developer_top-bar-hover.png);
    background-repeat: repeat-x;
}
table.wiki-content-table th a{
    color: #F7F7F7;
    text-decoration: underline;
}
table.wiki-content-table th a:hover{
    color: #F7F7F7;
    text-decoration: none;
}
 
/* Header
======================*/
#header{    height: 120px; }
#header h1{
    display: block;
    height: 82px;
    padding-top: 8px;
    padding-left: 15px;
    font-family: 'Book Antiqua', Palatino, serif;
    font-size: 36px;
    font-weight: bold;
    text-shadow: 2px 0px 2px #858585;
}
#header h1 a:hover{
    background: none;
    text-decoration: none;
}
#header h2{
    position: absolute;
    top: 50px;
    left: 90px;
    letter-spacing: 2px;
    font-family: 'Book Antiqua', Palatino, serif;
    font-size: 12px;
}
 
/* Top Bar
======================*/
#top-bar{
    width: 100%;
    height: 30px;
    position: relative;
    left:0; bottom:0;
    border-top: 3px solid #888;
    border-right: 3px solid #888;
    border-left: 3px solid #888;
}
#top-bar ul{    height: 30px; }
#top-bar ul ul{    margin-right: 0; }
#top-bar li{    margin: 0; }
#top-bar li a{
    display: block;
    height:22px;
    border-right: 1px solid #888;
    color: #222;
    padding: 0 8px 0 8px;
    line-height: 22px;
}
#top-bar li a:hover{
    text-decoration: none;
    background-image:url(http://themes.wikidot.com/local--files/generic-developer/developer_top-bar-hover.png);
    background-repeat: repeat-x;
}
#top-bar li ul{
    border: none;
    margin:0;
}
#top-bar li ul li a{
    line-height: 18px;
    height: 18px;
    overflow: hidden;
    width: 175px;
    background-color: #E3E0E6;
}
#top-bar li ul li a:hover{
    background-color: #EAE8E6;
    background-image: none;
}
#top-bar{
    background-image: url(http://themes.wikidot.com/local--files/generic-developer/developer_generic-topbar.png);
    background-repeat: repeat-x;
}
 
/* Login Status
======================*/
#login-status{    right: 0; }
 
/* Search Bar
======================*/
#search-top-box .button{    display: none; }
#search-top-box{    top: 65px; right: 0; }
#search-top-box .text{
    padding: 2px 4px;
    width: 200px;
}
#search-top-box input.text{    background-color: #FFF; }
#search-top-box input.text.empty{    background-color:#D3CFC9; }
 
/* Content
======================*/
#content-wrap{
    background-color:#FFF;
    width: 100%;
    border-bottom: 3px solid #888;
    border-right: 3px solid #888;
    border-left: 3px solid #888;
    padding-top: 0.5em;
}
#main-content{
    margin: 0 270px 5px 1em;
    padding: 0;
}
#page-title,
#main-content h1,
#main-content h2,
#main-content h3,
#main-content h4,
#main-content h5,
#main-content h6{
    font-family: 'Book Antiqua', Palatino, serif;
}
#page-title{
    border-bottom: 1px solid #222;
    font-weight: bold;
    padding-top: 5px;
}
 
/* Side Bar
======================*/
#side-bar{
    float:right;
    overflow: hidden;
    border-left: 1px solid #DDD;
    width: 230px;
    margin: 22px 0 0 2px;
}
#side-bar h1,
#side-bar h2,
#side-bar h3,
#side-bar h4,
#side-bar h5,
#side-bar h6{
    font-family: 'Book Antiqua', Palatino, serif;
}
#side-bar h1{
    font-size: 18px;
    border-bottom: 1px solid;
    margin-bottom: 2px;
}
#side-bar h2{    font-size: 18px; }
#side-bar h3{    font-size: 16px; }
#side-bar h4{    font-size: 14px; }
 
/* Page Info
======================*/
#page-options-bottom-2{    font-size: 80%; }
 
/* Footer
======================*/
#license-area{    font-size: 80%; }
 
/* Action Area
======================*/
#action-area > h1{
    margin-top: 0;
    padding-top: 8px;
}
 
/* James Kanjo's Hover Tips
======================*/
.hover{
    text-decoration: underline;
    border-bottom: 1px solid;
}
.hover:hover{
    text-decoration: none;
    border-bottom: none;
}
.hover span{    display: none; }
.hover:hover span{
    position: absolute;
    display: inline;
    margin: 15px -20px;
    height: auto;
    width: 250px;
    padding: 1em;
}
.hover:hover span span{
    position: relative;
    margin: auto;
    height: auto;
    width: auto;
    border: none;
    padding: 0;
}
 
/* Site Manager
======================*/
#site-manager{    margin: 0 auto; }

Notes

07 April, 2011 — Fixed a bug in which the absence of a title dissociates the header and content area. This also fixes the same problem in the Site Manager.
05 April, 2011 — Fixed a bug in which the header displays incorrectly with the lack of a h2 title. Unconfirmed fix in browsers other than Firefox.
23 December, 2010 — Gave Generic developer a top bar image, so now it can be used like a normal theme.
22 December, 2010 — Made simple header table links more visible in Topaz theme.
21 December, 2010 — Form button definitions moved from individual themes to generic theme, since they are all identical. Fixed simple table header link bug. Made links, side bar h1, and hover tips more visible in the Diamond theme. Made links more visible in Obsidian theme and Onyx theme.
17 December, 2010 — Malachite created; tanzanite created. Emerald theme changed to Peridot theme. Emerald theme recreated. Obsidian created.
16 December, 2010 — Added simple tables, input, TOC, hover tip, side bar headings, and tabview CSS theme-specific customization to all current themes. Fixed Code image bug in Topaz theme.
15 December, 2010 — James's hover tips functionality added. Added sidebar h1-h6 support. Added simple tables, input, TOC, hover tip, side bar headings, and tabview CSS theme-specific customization to Ruby Developer.
14 December, 2010 — Temporarily subsided #top-bar li ul li overflow bug. Increased width of #top-bar li ul li a from default width to 175px. Amethyst created; garnet created.
13 December, 2010 — Cleaned code slightly. Topaz created; quartz created.
11 December, 2010 — Diamond created; sapphire created. Text shadow effect added to #header h1.
09 December, 2010 — Developer themes started. Base created; emerald created; onyx created; ruby created.