Released: 23 Dec 2010 06:00
Version: 1.01.110407

The Developer Series is a set of themes made for clean simplicity, working as a general all-around web design. After acquiring all my knowledge about cross-compatibility, how CSS works, and how to incorporate images, I combined everything into one to make a nice series meant to work for educational sites, corporations, and even personal blogs.

Developer Series

Since the complexity of my themes was growing, the Developer Themes became difficult to customize. Therefore, I contrived many color variations based on rare earth minerals and stones so that a user may simply select which color he/she likes best. These colors are below:

Import

You can use this theme by including the below code:

@import url('http://publicvar.wikidot.com/csstheme:developer-series/code_');

Source Code

/** Developer CSS Theme
 *  Author: Timothy Foster (publicvar.wikidot.com)
 *  Version: 1.01.110407
 *  Licensed under CC BY 4.0
 * *******************************************************/
 
/* 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

Import the following URLS for the scheme of your choice:

  • Amethyst Developerhttp://publicvar.wikidot.com/csstheme:amethyst-developer/code_
  • Diamond Developerhttp://publicvar.wikidot.com/csstheme:diamond-developer/code_
  • Emerald Developerhttp://publicvar.wikidot.com/csstheme:emerald-developer/code_
  • Garnet Developerhttp://publicvar.wikidot.com/csstheme:garnet-developer/code_
  • Malachite Developerhttp://publicvar.wikidot.com/csstheme:malachite-developer/code_
  • Obsidian Developerhttp://publicvar.wikidot.com/csstheme:obsidian-developer/code_
  • Onyx Developerhttp://publicvar.wikidot.com/csstheme:onyx-developer/code_
  • Peridot Developerhttp://publicvar.wikidot.com/csstheme:peridot-developer/code_
  • Quartz Developerhttp://publicvar.wikidot.com/csstheme:quartz-developer/code_
  • Ruby Developerhttp://publicvar.wikidot.com/csstheme:ruby-developer/code_
  • Sapphire Developerhttp://publicvar.wikidot.com/csstheme:sapphire-developer/code_
  • Tanzanite Developerhttp://publicvar.wikidot.com/csstheme:tanzanite-developer/code_
  • Topaz Developerhttp://publicvar.wikidot.com/csstheme:topaz-developer/code_