Onyx Developer

Click to preview

Name: Onyx Developer

Author: Timothy Foster
License: Creative Commons Attribution-ShareAlike 3.0 License
Tags: corporate developer education sidebar topbar

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

Description:

This theme is one of many Developer themes created by Timothy Foster which features a simple architecture with a smooth look and mild feel. The theme should be compatible with most browsers, and it so far has the CSS defined already for the Checklist App, Image Box CSI, and Plurality CSI. Further color customization has been added to the Hover Tips made by James Kanjo and Tabview classes gathered by Steven Heynderickx.

The below represents the other Developer variations available.

• Generic Developer — Install

• 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/onyx-developer

Code

+ show the code

/* Import Generic
======================*/
@import url(http://themes.wdfiles.com/local--code/generic-developer);
 
/* Global
======================*/
a{    color: #333740; }
a:hover{    color: #383C45; }
 
/* Main Content
======================*/
#main-content a{    text-decoration: underline; }
#main-content a:hover{    text-decoration: none; }
 
/* Header
======================*/
#header h1 a{    color: #333740; }
#header h2{    color: #333740; }
 
/* Top Bar
======================*/
#top-bar{
    background-image: url(http://themes.wikidot.com/local--files/onyx-developer/developer_onyx-top.png);
    background-repeat: repeat-x;
}
 
/* Blockquotes
=======================*/
blockquote{
    background-image: url(http://themes.wikidot.com/local--files/onyx-developer/developer_onyx-quotes.png);
    background-repeat: no-repeat;
    border-left: 5px solid #383C45;
    border-top: 1px solid #383C45;
    border-right: 1px solid #383C45;
    border-bottom: 1px solid #383C45;
    padding: 20px 1em 4px 1em;
    margin: 8px 0;
}
blockquote p{    margin: 4px 0 1em 0; }
 
/* Code Blocks
=======================*/
.code{
    background-image: url(http://themes.wikidot.com/local--files/onyx-developer/developer_onyx-code.png);
    background-repeat: no-repeat;
    border-left: 5px solid #383C45;
    border-top: 1px dashed #383C45;
    border-right: 1px dashed #383C45;
    border-bottom: 1px dashed #383C45;
    padding: 20px 1em 4px 1em;
    margin: 8px 0;
}
.code pre{    margin: 4px 0 1em 0; }
 
/* Special Classes
========================*/
.checklist-status-head,
.checklist-item-head,
.checklist-priority-head,
.checklist-options-head{
    background-color: #333740;
    padding: 0 5px 0 5px;
    color: #F7F7F7;
    font-weight: bold;
}
.image-box-heading{
    background-color:#333740;
    color: #F7F7F7;
}
.image-box{
    background-color:#F7F7F7;
}
 
/* Sidebar
========================*/
 
#side-bar h1{    color: #333740; }
 
/* Simple Tables
========================*/
 
table.wiki-content-table{    border: 1px solid #333740; }
table.wiki-content-table th{
    background-color: #333740;
    border: 1px solid #444;
    color: #F7F7F7;
}
table.wiki-content-table td{
    background-color: #F7F7F7;
    border: 1px solid #777;
}
 
/* Input
========================*/
 
#content-wrap input.text, #content-wrap textarea{
    border: 1px solid #333740;
}
 
/* TOC
========================*/
 
#toc{
    border-left: 1px solid #383C45;
    border-right: 1px solid #383C45;
    border-bottom: 1px solid #383C45;
    border-top: 5px solid #383C45;
}
#toc a{    text-decoration: none; }
#toc a:hover{    text-decoration: underline; }
#toc > #toc-action-bar{    display: none; }
 
/* Hover Tips (James)
========================*/
 
.hover{    color: #333740; }
.hover:hover span{
    background-color: #F7F7F7;
    border: 2px solid #383C45;
    color: #000;
}
 
/* Tabview (Stephen H)
========================*/
 
.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
    border: solid #333740; /* color of the line between tab list and content */
    border-width:0 0 3px; /*thickness of the line between tab list and content */
}
.yui-navset .yui-nav li,
.yui-navset .yui-navset-top .yui-nav li {
    margin:0 1px 0 0; /* space between tabs */
}
.yui-navset .yui-nav .selected,
.yui-navset .yui-navset-top .yui-nav .selected {
    margin:0 1px -1px 0; /* for overlap */
}
/* Settings for unselected tabs */
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
    background-color: #F7F7F7;
    border-top: 1px solid #777;
    border-left:1px solid #777;
    border-right: 1px solid #777;
    font-weight: bold;
    font-size:80%;
    color: #000;
}
/* Settings for unselected tabs */
.yui-navset .yui-nav a:hover,
.yui-navset .yui-navset-top .yui-nav a:hover {
    background:#FFF;
}
/* Settings for unselected tabs */
.yui-navset .yui-nav a em,
.yui-navset .yui-navset-top .yui-nav a em {
    border:0px solid #F00;
}
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a:focus, /* no focus effect for selected */
.yui-navset .yui-nav .selected a:hover { /* no hover effect for selected */
    background:#333740;
    color: #F7F7F7;
    border: 1px solid #444;
    border-bottom: none;
}

Notes

This theme uses the following colors for its color scheme:

Primary:

#333740

Secondary:

#383C45

Here are the images used for this scheme:

Top Bar:

Quotes:

Code:

Similar themes D14 Wiki Theme Author: Super Dr Green Rating: 0, Comments: 1 Tags: d14 example01 sdg sidebar topbar Super Dr Green 1 Author: Super Dr Green Rating: 0, Comments: 0 Tags: sidebar topbar

Browse themes by tag ardeol beige black blog blue bmc brown business clean colorful company corperate corporate css3 curved dark dashed developer education educational flexible floral flower freshly-squeezed green grey grunge minimalist modern nature navy no-sidebar no-topbar orange outline professional purple rainbow red responsive series shiny sidebar simple smartphone super topbar white wiki yellow

Comments

leiger 31 Mar 2011 07:03

Nice, simple, elegant theme!

From the smaller preview images, I must admit that it looked a bit strange - and that's why I haven't tried these themes until now.

I'm looking for something slightly different for a private site, and decided to try the live preview for yours. I'm definitely sticking with this theme.

It looks great! And the mini-documentation (colours used, images used, list of similar themes) and the photo of each mineral on the associated page, just top off the feeling that this is a quality theme.

Edit: Found a minor problem: this theme requires a tagline for the site. Without it, the top-bar appears too high and is detached from the page content. I can work around this by adding a tagline, but the theme would be perfect if it worked without one as well! ;-)

---

~ Shane (Wikidot Community Admin - Volunteer)
Wikidot: My Blog, Wikidot Editor, Official Docs
Work: ZoomPlanner (built for freelancers/small business)
Other: YouTube (gaming channel)

Last edited on 31 Mar 2011 07:07 by leiger Show more

Timothy Foster 07 Apr 2011 19:23

Didn't get this till now, and I've made it a point to begin watching these pages.

Thanks for the compliments! It's interesting that I actually discovered the tagline problem a couple days ago since I started using this theme as well for a different site, and I believe I might have fixed it, at least for Firefox; I'm not entirely sure how it works on other browsers, except maybe IE which seems to do ok. There was also a problem with not having a page title, which I fixed as well.

Again, thanks! I'm glad these can be useful.

---

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