Dark Blue

Click to preview

Name: Dark Blue

Author: jiminy35
License: Creative Commons Attribution-ShareAlike 3.0 License

Tags: sidebar topbar

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

Description:

A fixed-width theme with a blue gradient header and light, laid back feel.

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/dark-blue

Code

+ show the code

/* GLOBAL WIDTH */
 
#header, #top-bar {
    width: 800px;
    margin: 0 auto;
}
 
body {
    background-color: #CCCCCC;
    font-size: 0.80em;
    font-family: Verdana, Arial, Helvetica;
    color: black;
    text-indent: 0;
    margin-bottom: 20px;
}
 
div#container-wrap {
    background-color: white;
    color: black;
    border-width: 1px;
    border-style: solid;
    border-color: black;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    width: 800px;
    margin: 0px auto 0px auto;
}
 
/* HEADER */
 
#header {
    height: 140px;
    position: relative;
    z-index: 10;
    padding-bottom: 22px; /* FOR MENU */
    background-image: url(/local--files/dark-blue/header.jpg);
 
}
 
#search-top-box {
    position: relative;
    top: -38px;
    float: right;
}
 
#search-top-box input.button {
    display: none;
}
 
#search-top-box-input{
    background-color: transparent;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border: 1px solid black;
    border: 0;
}
 
#search-top-box form {
    margin: 0;
    background-color: white;
       -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border: 1px solid black;
    z-index: 9;
    padding: 0;
}
 
#login-status {
    color: white;
    font-size: 90%;
    z-index: 30;
    /*border: 1px solid white;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    background: #414141;*/
}
 
#login-status a {
    background: transparent;
    color: white;
}
 
#login-status a:hover{
    color: white;
}
 
#login-status ul a {
    background: transparent;
    color: white;
}
 
#account-options {
    background: #414141;
    color: white;
    border: 1px solid black;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}
 
#account-options ul li a:hover{
    color: white;
    background: url(/local--files/dark-blue/topbarbuttonactive.jpg);
}
 
#account-topbutton {
    background: #ccc;
    color: white;
}
 
.printuser img.small {
    margin-right: 1px;
}
 
#header h1 {
    margin: 0;
    padding: 0;
    max-height: 105px;
    text-align: left;
}
 
#header h2 {
    margin: 0;
    padding: 0;
    clear: left;
    float: left;
    font-size: 105%;
    max-height: 38px;
}
 
#header h1 a {
    display: block;
    margin: 0;
    padding: 80px 0 25px;
    padding-left: 20px;
    line-height: 0px;
    max-height: 0px;
    color: white;
    text-shadow: 0px 2px black;
    text-align: left;
    background: transparent;
    font-size: 180%;
    text-decoration: none;
    position: relative;
    bottom: 10px;
}
 
#header h2 span {
    display: block;
    margin: 0;
    padding: 0px 0;
    padding-left: 20px;
    line-height: 0px;
    max-height: 0px;
    color: white;
    font-weight: bold;
}
 
/* TOP MENU */
 
#top-bar {
    position: absolute;
    z-index: 50;
    top: 138px;
    //right: 0;
    height: 21px;
    line-height: 18px;
    z-index: 20;
    font-size: 90%;
    background-image: url(/local--files/dark-blue/top-bar.jpg);
    background-repeat: repeat-x;
    padding-left: 0px;
}
 
#top-bar ul {
    float: right;
    border: 0;
}
 
#top-bar a {
    color: #fff;
    background: transparent;
    text-shadow: none;
    border: 0;
}
 
#top-bar ul li, #top-bar ul li ul {
    /*border-width: 0px 0 0;
    border-color: #444;
    border-style: solid;*/
    border: 0;
}
 
#top-bar ul li a {
    /*border-style: solid;
    border-color: #444;
    border-width: 0 0 0 0px;*/
    border: 0;
    text-decoration: none;
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 1px;
    max-height: 1px;
    overflow: hidden;
    background-color: transparent;
    width: auto;
}
 
#top-bar ul li.sfhover a,
#top-bar ul li:hover a {
    width: auto;
    border: 0;
}
 
#top-bar ul li.sfhover ul li a,
#top-bar ul li:hover ul li a {
    border-width: 0;
    width: 150px;
    line-height: 160%;
    height: auto;
    max-height: none;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 4px;
    text-align: left;
    background-color: #414141;
}
 
#top-bar ul li.sfhover a:hover,
#top-bar ul li:hover a:hover {
    background: url(/local--files/dark-blue/topbarbuttonactive.jpg) repeat-x;
    text-align: left;
    text-decoration: none;
}
 
#top-bar ul li ul {
    width: auto;
    border-width: 0 1px 1px 1px;
}
 
#top-bar ul li ul li, #top-bar ul li ul li.sfhover,
#top-bar ul li ul li, #top-bar ul li ul li:hover {
    border-width: 0;
}
 
#top-bar ul li ul li a {
    border-width: 0;
}
 
/*#top-bar ul li ul a, #top-bar a:hover {
}*/
 
/* IE7 HACK */ 
#top-bar ul > li > ul {  
    *margin-top: -4px; 
}
 
/* SIDE MENU */
 
#side-bar {
    padding: 20px 10px 10px 5px;
    margin: 0 0 0 2em;
    clear: both;
    float: left;
    width: 200px;
    border-width: 1px;
    border-color: black;
    border-style: solid;
    font-size: 10pt;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    background-image: url(/local--files/dark-blue/sidebaractive.jpg);
    background-repeat: no-repeat;
    background-color: #414141;
    color: white;
    text-indent: 1em;
}
 
#side-bar h2{
    font-size: 12pt;
    text-indent: 0px;
}
 
#side-bar input.button {
    color: white;
    /*background-color: #313131;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;*/
    border: none;
    height: 18px;
    width: 74px;
    background-image: url(/local--files/dark-blue/newpagehudbutton.jpg);
}
 
#side-bar input.button:hover{
    background-image: url(/local--files/dark-blue/newpagehudbuttonactive.jpg);
    color: white;
}
 
#side-bar input.text{
    background-color: #414141;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border: 1px solid #9A9CA1;
    width: 110px;
}
 
#side-bar a{
    color: white;
}
 
#side-bar ul li.sfhover a{
    background: transparent;
    text-decoration: underline;
}
 
#side-bar ul{
    margin: 0;
    padding: 0;
}
 
#side-bar form {
    width: 210px;
    position: relative;
    left: -10px;
}
 
/* CONTENT */
 
#main-content {
    margin: 0 10px 0 240px;
    width: 540px;
    text-indent: 1em;
}
 
/* YUI-TABS */
 
.yui-navset .yui-content{
    background-color: #f5f5f5;
}
 
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
    background-color:#d8d8d8;
    background-image: url(../images/yuitabs.png);
}
 
.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 */
    color:#fff;
}
 
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {
    background:#d88 url(/local--files/dark-blue/topbarhover.jpg) repeat-x;
    text-decoration: none;
}
 
.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
    border-color: #444;
}
 
.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
    border-color: #444;
}
 
.yui-navset li {
    line-height: normal;
}
 
/* FOOTER */
 
#footer {
    clear: both;
    font-size: 77%;
    background: #444;
    color: #bbb;
    padding: 3px 10px;
}
 
#footer .options {
    visibility: visible;
    display: block;
    float: right;
    width: 50%;
    font-size: 100%;
    text-align: right;
}
 
#footer a {
    color: #fff;
    background: transparent;
}
 
#license-area{
    font-size: 0.8em;
}
 
/* COMMON */
 
h1, #page-title {
    padding: 0 0 0.25em;
    margin: 0 0 0.6em;
    font-weight: normal;
}
 
h1 {
    margin-top: 0.7em;
    padding: 0;
    font-weight: bold;
}
 
h2, h3, h4, h5, h6, h7 {
    margin: 0.5em 0 0.4em;
    padding: 0;
    letter-spacing: 1px;
}
 
#page-title {
    border-color: #bbb;
}
 
ul {
    list-style: none;
}
 
li, p {
    line-height: 141%;
}
 
a {
    color: black;
    text-decoration: none;
}
 
a.newpage {
    color: #d61;
    text-decoration: none;
}
 
a:hover {
    text-decoration: none;
}
 
/* SOME NICE BOXES */
 
div.sexy-box {
    background: #eee;
    border: 1px solid #ccc;
    padding: 0 10px 12px;
    margin: 7px 4px 12px;
    overflow: hidden;
}
 
div.sexy-box div.image-container img {
    margin: 5px;
    padding: 2px;
    border: 1px solid #999;
}

Notes

Similar themes organic Author: Grego1888 Rating: 0, Comments: 0 Tags: sidebar topbar Semi-Trans v. 1.0 Author: Chaotic1 Rating: 0, Comments: 0 Tags: sidebar topbar transparency

Browse themes by tag articles beige black blog blue brown christmas claus clean colorful company corporate dark dashed edu education f1 floral games glass green grey grunge minimalist modern monobook music nature navy no-sidebar notepad no-topbar orange outline rainbow red reflection santa shiny sidebar simple topbar transparency water white wiki wikipedia windows woodcut yellow

Comments

very nice!

rhombus p 1255375156|%e %b %Y, %H:%M %Z|agohover

love it!

---