Shades of Grey

Click to preview

Name: Shades of Grey

Author: Whane The Whip
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:

This is a modded version of the wikidot front theme. I kept the minimalist structure but gave it what I feel is a more modern, polished look. There is a working sample {here}. I didn't spend too much time on the plain text header as it looks much better with a custom logo anyway, although it has to be a small logo to fit within the narrow bar. Not including a couple of default wikidot images, this theme uses only two image files, one for the search icon, and a tiled block for the background.

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/shades-of-grey

Code

+ show the code

body {
    font-family: Nimbus Sans L, "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
    background-color: white;
    background-image: url(http://themes.wdfiles.com/local--files/shades-of-grey/bg-tile.png);
    background-repeat: repeat;
    color: #000;
}
 
h1, h2, h3, h4, h5, h6 {
    font-family: Nimbus Sans L, "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
    color: #676767;
}
 
a{
    color: #004583;
    text-decoration: none;
}
a:hover{
    background-color: transparent;
    text-decoration: underline;
}
h1 a {
    color: #474747;
}
a.newpage {
    color: #6f918a;
    text-decoration: none;
}
 
#container {
    width: 976px;
    margin: 0 auto;
}
#header {
    background-repeat: no-repeat;
    top: 10px;
    height: 60px;
}
 
#header h1 {
    background-color: #454545;
    background-image: -webkit-linear-gradient(top, #454545 0%, #636362 100%); /* Chrome 11+ */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #454545), color-stop(1, #636362)); /* Webkit (Safari/Chrome 10) */
    background-image: -moz-linear-gradient(top, #454545 0%, #636362 100%);
    background-image: -o-linear-gradient(top, #454545 0%, #636362 100%);
    width: 971px;
    height: 31px;
    position: absolute;
    left: 1px;
    top: -4px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    box-shadow: 0 0 3px #777;
    -moz-box-shadow: 0 0 3px #777;
    -webkit-box-shadow: 0 0 3px #777;
}
 
#header h1 a {
    background-image: url(http://placeyourownlogohere.png);
    background-repeat: no-repeat;
    display: block;
    height: 29px;    
    width: 97px;
}
#header h1 a {
    color: transparent;
    display: block;
    font-size: 180%;
    line-height: 0;
    text-decoration: none;
}
 
#header h1 a span {
    display: none;
}
 
#header h2 {
    display: none;
}
 
#page-title {
    border-bottom: 1px solid #b3b3b3;
    color: #474747;
    font-weight: bold;
    font-size: 28px;
        padding-top: 5px;
}
 
#breadcrumbs {
    color: #666;
    font-weight: normal;
    font-size: 12px;
}
 
#footer {
    margin: 0;
    padding: 0;
}
#footer .options{
    color: #b3b3b3;
    font-size: 10px;
}
#license-area {
    border-top: 1px solid #ececec;
    font-size: 10px;
}
 
/* ----------------------------------- Search Box -------------------------------- */
 
#search-top-box {
    background-color: #626363;
    background-image: url(http://themes.wdfiles.com/local--files/shades-of-grey/search-bar.png);
    background-repeat: no-repeat;
    width: 971px;
    right: 4px;
    top: 40px;
    z-index:19;
    height: 22px;
    border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        box-shadow: 0 0 3px #777;
        -moz-box-shadow: 0 0 3px #777;
        -webkit-box-shadow: 0 0 3px #777;
}
#search-top-box input.empty {
    height: 21px;
    width: 107px;
    font-family: Nimbus Sans L, "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
    overflow: hidden;
}
 
#search-top-box input.text {
    color: #888;
    height: 18px;
    width: 107px;
    font-family: Nimbus Sans L, "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
    overflow: hidden;
}
#search-top-box-input {
    border: 0;
    background-color: transparent;
}
 
#search-top-box-form input.button {
    display: none;
    background: transparent;
    color: transparent;
    height: 0;
    padding-left: 18px;
    width: 20px;
    border: 0;
    cursor: pointer;
    font-size: 0px;
    line-height: 0px;
    display: block;
}
 
#search-top-box-form {
    margin-left: 810px;
}
 
#login-status{
    top: 5px;
}
#login-status a {
    color: #ccc;
}
#account-options {
    padding: 2px;
    background-color: #fff;
    border: 1px solid #666;
    -moz-border-radius: 5px;    
    -webkit-border-radius: 5px;    
    border-radius: 5px;    
}
#account-options li a{
    margin: 0 auto;
}
#account-options li a:hover{
    background-color: #E5E5E5;
    margin: 0 auto;
}
#account-topbutton {
    border: 1px solid #666;
    background-color: transparent;
        background: none;
        border: none;
}
 
#top-bar {
    position: absolute;
    left: 1em;
    bottom: 0px;
    z-index:20;
    width: 800px;
}
 
#top-bar ul {
    display: block;
    margin:0; padding:0;
    list-style:none;
}
#top-bar li {
    list-style: none;
    float:left;
    margin: 0 5px;
    padding:0;
 
}
#top-bar li ul {
    padding: 1px;
    margin: 0;
    width: 160px;
    border: 1px solid #AAA;
    text-color: #fff;
    webkit-border-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    background-color: #D5D5D5;
}
 
#top-bar  li ul li {
    padding: 0;
    margin: 0;
    /*width: 12em;*/
    display: block;
    float: none;
}
 
#top-bar li a {
    color: #fff;
    text-align: center;
    display: block;
    margin: 0;
    padding: 1px 10px;
    text-decoration: none;
}
#top-bar a:hover {
    background-color: #E5E5E5;
    text-decoration: none;
    color: black;
    border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        box-shadow: 0 0 3px #777;
        -moz-box-shadow: 0 0 3px #777;
        -webkit-box-shadow: 0 0 3px #777;
}    
 
#top-bar li ul li a {
    width: 139px;
    text-align: left;
    background-color: #D5D5D5;
    color: #333;
    border: none;
}
#top-bar li ul li a:hover {
    background-color: #E5E5E5;
    color: #black
}
 
#top-bar li ul {
    position: absolute;
    /*left: -999em;*/
    visibility: hidden;
}
 
#top-bar li:hover ul, #top-bar li.sfhover ul {
    /*left: auto;*/
    visibility: visible;
}
 
.equation-number{
    padding-top: 1em;
}
 
.printuser {
    color: #ccc;
}
 
div.buttons input, input.button, button, file, a.button{
    background-image: url(images/button.png);
    border: 1px solid #DDD;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    height: 26px;
}
div.buttons input:hover, input.button:hover, button:hover,  a.button:hover {
    background-image: url(http://static.wikidot.com/common--theme/frontspecial/images/button2.png);
    border: 1px solid #DDD;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    color: #000;
    height: 26px;
}
textarea{
    font-family: Nimbus Sans L, "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
 
/* ----------------------------------- Updates ----------------------------------------- */
 
#page-content {
    margin-top: 30px;
}
 
#side-bar {
    width: 260px;
    padding-top: 0px;
    padding-right: 10px;
    padding-left: 10px;
    margin-right: 10px;
    margin-left: 1px;
    background: #fff;
    border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        box-shadow: 0 0 3px #777;
        -moz-box-shadow: 0 0 3px #777;
        -webkit-box-shadow: 0 0 3px #777;
}
 
#main-content {
float: left;
    margin-left: 10px;
    width: 650px;
    margin-bottom: 2px;
    padding: 0 10px;
    background: #fff;
    border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        box-shadow: 0 0 3px #777;
        -moz-box-shadow: 0 0 3px #777;
        -webkit-box-shadow: 0 0 3px #777;
}
 
#content-wrap {
    margin-top: 20px;
    overflow: hidden;
    padding-top: 10px;
}
 
#search-top-box input.text {
    width: 150px;
    background: #626363;
    border: none;
    color: #ccc;
}
 
#search-top-box input.text:focus {
    border: 1px solid #000;
    background: #E5E5E5;
    color: #000;
}
 
/* ----------------------------------------- Plain Text Logo ---------------------------------------------
Delete the section below if you plan to use a custom logo using the CSS above
--------------------------------------------------------------------------------------------------------------- */ 
 
#header h1 a {
color: #CCC;
height: 140%; width: 140%;
font-size:140%;
background-image: none;
position: relative;
top: 16px;
left: 7px;
}
 
#header h1 a:hover {
        color: #FFF;
        height: 140%; width: 140%;
        font-size:140%;
        background-image: none;
        position: relative;
        top: 16px;
        left: 7px;
        -webkit-font-smoothing: subpixel-antialiased;
        -webkit-transition: color .4s ease !important;
        -moz-transition: color .4s ease !important;
}
 
#header h1 a span {
 display: block;
}

Notes

Checked in:

• Mozilla
• Chrome
• Safari
• Internet Explorer

Sidebar on the Right

[[module CSS]]
#main-content {float: left; margin-left: 1px;}
#side-bar {float: right;}
[[/module]]

No Side Bar

#side-bar {display: none;}
#main-content {width: 951px; margin-left: 1px;}
#page-content {width: 100%;}

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

Molematt 29 Apr 2013 23:02

Could you make a version with the sidebar on the right plz?

Last edited on 29 Apr 2013 23:03 by Molematt Show more

Whane The Whip 10 Feb 2014 01:40

Woops, sorry UncleAnonymoose, I guess I should have been watching this page. Albeit late, to answer your question:

[[module CSS]]
#main-content {float: left; margin-left: 1px;}
#side-bar {float: right;}
[[/module]]

DrCaduceus 26 Feb 2014 03:30

Is there any way you can make the sidebar a little smaller?

---

Send Message | Regeneration's a lottery.

Whane The Whip 26 Feb 2014 06:10

Sure, the easiest way to do this is to add this bit of code to the bottom of your css page:

#side-bar {width: 200px;}
#main-content {width: 710px;}

Since it's the last code read in the css document it will over-rule the previous dimensions read. But if you want cleaner code then find the part of the css code seen above and change the side-bar width from 260 to 200 and the main-content width from 650 to 710.

You can also experiment a little with different sizes… any reduction of the side bar width should corresponde to an increase in the main-content width. I.E. reduce the side-bar by 10, then increase the main-content by 10.

DrCaduceus 26 Feb 2014 08:46

thanks, bro. I've been fidgeting about how big the sidebar is on my wiki, so this will really help.

---

Send Message | Regeneration's a lottery.

_lumenstrell 06 Mar 2014 23:29

Whoa, really liking this theme. Your additions enhance the features. It's great ^^

---

cry havoc, i care not