Sapphire Developer

Click to preview

Name: Sapphire 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/sapphire-developer

Code

+ show the code

/* Import Generic
======================*/
@import url(http://themes.wdfiles.com/local--code/generic-developer);
 
/* Global
======================*/
a{    color: #18238A; }
a:hover{    color: #1D288F; }
 
/* Header
======================*/
#header h1 a{    color: #18238A; }
#header h2{    color: #40331F; }
 
/* Top Bar
======================*/
#top-bar{
    background-image: url(http://themes.wikidot.com/local--files/sapphire-developer/developer_sapphire-top.png);
    background-repeat: repeat-x;
}
 
/* Blockquotes
=======================*/
blockquote{
    background-image: url(http://themes.wikidot.com/local--files/sapphire-developer/developer_sapphire-quotes.png);
    background-repeat: no-repeat;
    border-left: 5px solid #24309D;
    border-top: 1px solid #24309D;
    border-right: 1px solid #24309D;
    border-bottom: 1px solid #24309D;
    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/sapphire-developer/developer_sapphire-code.png);
    background-repeat: no-repeat;
    border-left: 5px solid #24309D;
    border-top: 1px dashed #24309D;
    border-right: 1px dashed #24309D;
    border-bottom: 1px dashed #24309D;
    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: #18238A;
    color: #F7F7F7;
    padding: 0 5px 0 5px;
    font-weight: bold;
}
.image-box-heading{
    background-color:#18238A;
    color: #F7F7F7;
}
.image-box{
    background-color:#F7F7F7;
}
 
/* Sidebar
========================*/
 
#side-bar h1{    color: #18238A; }
 
/* Simple Tables
========================*/
 
table.wiki-content-table{    border: 1px solid #18238A; }
table.wiki-content-table th{
    background-color: #18238A;
    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 #18238A;
}
 
/* TOC
========================*/
 
#toc{
    border-left: 1px solid #24309D;
    border-right: 1px solid #24309D;
    border-bottom: 1px solid #24309D;
    border-top: 5px solid #24309D;
}
#toc > #toc-action-bar{    display: none; }
 
/* Hover Tips (James)
========================*/
 
.hover{    color: #18238A; }
.hover:hover span{
    background-color: #F7F7F7;
    border: 2px solid #24309D;
    color: #000;
}
 
/* Tabview (Stephen H)
========================*/
 
.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
    border: solid #18238A; /* 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:#18238A;
    color: #F7F7F7;
    border: 1px solid #444;
    border-bottom: none;
}

Notes

This theme uses the following colors for its color scheme:

Primary:

#18238A

Secondary:

#24309D

Here are the images used for this scheme:

Top Bar:

Quotes:

Code:

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

Great Theme

abarrelfull 29 Dec 2010 11:36

I have change the theme on my sites to this one. Its what I have been looking for. Thanks.

Problems with top-menu

Vitreo 30 Jan 2011 10:15

Hi, I have following problem with using this (and other themes). My top menu instead being horizontal is displayed vertical. You can see it here: http://www.neurom.pl/start . It is not the problem of the Developer theme as it happens also in eg MicroBlue theme. Only some basic wikidot themes work Ok (some don't). Any solution?

Re: Problems with top-menu

bcammo 30 Jan 2011 11:16

The problem is your nav:top page. You have a blank line between the two parent list items, which results in two individual lists being created, and hence it displays vertically. Try removing the line like this:

* [# Menu]
 * [[[dla-pacjentow | Dla pacjentów]]]
 * [[[dla-studentow | Dla studentów]]]
 * [[[dla-lekarzy | Dla lekarzy]]]
* [[[Kontakt]]]
 * [[[pt:wizyta | Wizyta u neurologa]]] 
 * [[[kontakt | Dane adresowe]]]

---

BMC Creative | RoaringApps | @brycecammo

Re: Problems with top-menu

Vitreo 30 Jan 2011 12:10

So simple! I would never find it. Many thanks!
Sometimes it's easy to make people happy! (But sometimes not ;-)