Radar

This theme is loosely based on a military radar console with "buttons" down the side and above the main screen represented by the sidebar and top bar. The theme extends to the forum, to simple tables and to tabs.

A few CSS border effects give the design a slight 3D feel. The sidebar works well with with both individual menu items and foldable list containers. The top bar extends vertically rather than horizontally and if you have more than 3 menu items will show above the radar background with no problem. However the visual effect of the top bar is improved if you only have top level menu items and don't have sub items.

A working version of this theme is at http://radar.wikidot.com

preview.jpg

Creative Commons Attribution-ShareAlike 3.0 License

/* CONTAINERS
============================== */
#container-wrap {
    background-color: white;
    background-image:url(http://www.wikidot.com/common--theme/webbish/images/sideback2_l.png);
    background-position: top left;
    background-repeat: repeat-y;
    padding: 0 0 0 35px;
}
 
#container {
    background-image:url(http://www.wikidot.com/common--theme/webbish/images/sideback2_r.png);
    background-position: top right;
    background-repeat: repeat-y;
    padding: 0 35px 0 0;
}
 
#content-wrap {
    background-color:#DDDDDD;
    min-height:1px;
}
 
/* BODY
============================== */
 
body {
    background-color: #8a8a8a;
    font-family: verdana,arial,helvetica,sans-serif;
    font-size: 0.75em;
    min-width: 60em;
}
 
input {
    font-family: verdana,arial,helvetica,sans-serif;
}
 
textarea {
    font-family: verdana,arial,helvetica,sans-serif;
}
 
/* HEADER
============================== */
 
#header {
    background-color: #7C85AC;
    border-bottom: none;
    height: 100px;
 
}
 
#header h1 {
    font-size: 250%;
    font-family: arial,helvetica,sans-serif;
    font-weight: bold;
    padding: 0.5em 0 0 1em;
}
 
#header a {
    color: #055200;
    text-decoration: none;
}
 
#header a.newpage{
    color: #2d5491;
}
 
#header a:hover {
    color: yellow;
    text-decoration: none;
}
 
#header h1 a span {
    left:0;
    margin-left:30px;
    padding:0;
    position:absolute;
    top:10px;
    width:450px;
}
 
#header h2 {
    color:yellow;
    font-size: 180%;
    font-weight: bold;
    font-family: arial,helvetica,sans-serif;
    left: 0;
    margin-left: 30px;
    padding: 0 0 0 1em;
    position: absolute;
    top: 65px;
    width: 400px;
}
 
/* LOGIN
============================== */
 
#login-status {
    height:30px;
    overflow:visible;
    padding:8px;
    position:absolute;
    right:350px;
    top:10px;
    z-index:25;
}
 
/* SEARCH
============================== */
 
#search-top-box {
    height: 30px;
    padding:8px;
    position:absolute;
    right:350px;
    top:40px;
    z-index:25;
}
 
/* TOP BAR 
============================== */
 
#top-bar {
    background-color:#7C85AC;
    display:block;
    height:24px;
    left: auto;
    margin-right:10px;
    padding:8px;
    position:absolute;
    right:0;
    text-align:center;
    text-decoration:none;
    top:10px;
    width:300px;
}
 
#top-bar li {
    background-color:#DDDDDD;
    border-color:#8C8C8C darkgray darkgray #8C8C8C;
    border-style:solid;
    border-width:1px 5px 2px 1px;
    color:#FFFFFF;
    float:none;
    margin-left:0;
    margin-right:0;
}
 
#top-bar li a {
    display:block;
    margin:0;
    padding:2px 1em;
    text-align:center;
    text-decoration:none;
}
 
#top-bar ul {
    display:block;
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    margin:0;
    padding:0;
}
 
#top-bar ul li a {
    background-color:#DDDDDD;
    border-color:#8C8C8C darkgray darkgray #8C8C8C;
    border-style:solid;
    border-width:1px 5px 2px 1px;
    color:#2D5491;
    height:15px;
}
 
#top-bar li ul {
    border:1px solid #EEEEEE;
    margin:0;
    padding:0;
    position:relative;
    right:0;
    visibility:visible;
    width:20em;
}
 
#top-bar li ul li a {
    background-color:#DDDDDD;
    border-color:#8C8C8C darkgray darkgray #8C8C8C;
    border-style:solid;
    border-width:1px 5px 2px 1px;
    text-align:right;
    width:100%;
}
 
#top-bar a {
    color: #2d5491;
}
 
#top-bar ul li a:hover {
    color: #023804;
    text-decoration: none;
}
 
/* SIDE BAR 
============================== */
 
#side-bar {
    background-color:#DDDDDD;
    border:3px solid #DDDDDD;
    clear:left;
    float:left;
    margin:auto 0 0;
    padding:0;
    width:140px;
}
 
#side-bar h1, #side-bar h2, #side-bar h3 {
    background-color:#7C85AC;
    border-top:10px solid #8C8C8C;
    color:#055200;
    font-family:verdana,arial,helvetica,sans-serif;
    font-weight:bold;
    margin-top:0.5em;
    text-align:center;
    width:140px;
}
 
#side-bar a {
    color: #2d5491;
    text-decoration: none;
}
 
#side-bar a.newpage {
    color: #2d5491;
}
 
#side-bar a:hover {
    background-color: transparent;
    color: #7f0000;
    text-decoration: none;
}
 
#side-bar ul {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
}
 
#side-bar ul li {
    display:block;
}
 
#side-bar ul li a {
    background-color:#7C85AC;
    border-color:#8C8C8C #EEEEEE #EEEEEE;
    border-style:solid;
    border-width:10px 1px 1px;
    display:block;
    height:20px;
    padding:20px;
    text-align:center;
    text-decoration:none;
}
 
#side-bar ul li li a {
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background-color:#7C86AC;
    border-bottom:1px dashed darkgray;
}
 
#side-bar ul ul {
    padding-left:0;
}
 
#side-bar li a {
    border-bottom: 1px solid #D9DDCF;
    color: white;
    font-weight: bold;
    padding-bottom: 2px;
    padding-left: 1em;
    padding-top: 2px;
    text-decoration: none;
}
 
#side-bar li a:hover {
    background-color: #023804;
    color: yellow;
    text-decoration: none;
}
 
#side-bar p {
    background-color:#7C85AC;
    border-top:10px solid darkgray;
    color:#2D5491;
    margin:0;
    padding:5px;
    width:130px;
}
 
/* PAGE TITLE
============================== */
 
#page-title {
    color:yellow;
    font-family:verdana,arial,helvetica,sans-serif;
    font-weight:normal;
    height:75px;
    padding-left:50px;
}
 
/* MAIN CONTENT
============================== */
 
* html #main-content  {
    height: 1%;
}
 
#main-content {
    background-color:#DDDDDD;
    background-image:url(/local--files/radar/radarscreen.jpg);
    border-color: #8C8C8C darkgray;
    border-style: solid;
    border-width: 10px;
    margin-left:150px;
    margin-right:0;
}
 
#main-content h1 span {
    color: #2d5491;
    font-family: arial,helvetica,sans-serif;
    font-weight: normal;
}
#main-content h1 span a {
    color: #2d5491;
    font-weight: normal;
}
 
#main-content h1 span a:hover {
    color: #7f0000;
    font-weight: normal;
}
 
#main-content h2 span {
    color: #2d5491;
    font-weight: normal;
    font-family: arial,helvetica,sans-serif;
    padding: 0em 0em;
}
 
#main-content h2 span a {
    color: #2d5491;
    font-weight: normal;
}
 
#main-content h2 span a:hover {
    color: #7f0000;
    font-weight: normal;
}
 
#main-content h3 span {
    font-weight: bold;
    color: #2d5491;
    font-weight: normal;
    font-family: arial,helvetica,sans-serif;
    margin-left: 0em;
}
 
#main-content h3 span a {
    color: #2d5491;
    font-weight: normal;
}
 
#main-content h3 span a:hover {
    color: #7f0000;
    font-weight: normal;
}
 
#main-content blockquote {
    margin-left: 1em;
    margin-right: 1em;
}
 
#main-content a {
    color:#023804;
    text-decoration:none;
}
 
#main-content a.newpage{
    color: #2d5491;
}
 
#main-content a:hover {
    background-color: #023804;
    color: yellow;
    text-decoration: none;
}
 
#main-content p {
    line-height: 1.4em;
}
 
#page-content {
    background-color:#FFFFFF;
    border-color: #8C8C8C darkgray;
    border-style: solid;
    border-width: 10px;
    margin:4%;
    min-height: 900px;
    padding:1%;
}
 
/* PAGE INFO/OPTIONS
============================== */
 
#page-info {
    color: white;
    font-size: 90%;
    text-align: right;
}
 
.page-options-bottom {
    background-color:#023804;
    border:1px solid #C28C06;
    color:#C68900;
}
 
.page-options-bottom a, a.action-area-close {
    color: #023804;
    background-color: #dddddd;
    text-decoration: none;
}
 
.page-options-bottom a:hover, a.action-area-close:hover {
    background-color: #023804;
    color: yellow;
}
 
.page-watch-options {
    background:yellow none repeat scroll 0 0;
    color:#002400;
    font-size:95%;
    text-align:right;
}
 
/* FOOTER
============================== */
 
#footer {
    background-color: #555;
    border-top: 2px solid #2A343D;
    color: #E7E9DC;
    padding-top: 3px;
    padding-bottom: 3px;
    text-align: left;
}
 
#footer a {
    color: #EEEEEE;
    text-decoration: none;
}
 
#footer a.newpage{
    color: #EEEEEE;
}
 
#footer a:hover {
    color: #EEEEEE;
    text-decoration: none;
}
 
#license-area {
    background-color: #EEEEEE;
    padding: 0.2em 1em;
    margin: 0;
}
 
.page-options-bottom a, a.action-area-close {
    color: #242;
    background-color: #EEEEEE; 
    text-decoration: none;
}
 
.page-options-bottom a:hover, a.action-area-close:hover {
    background-color: #DDDDDD; 
}
 
.page-tags span {
    font-size: 100%;
}
 
/*EDITOR
============================== */
 
#edit-page-textarea {
    background-color: #AFD2C2;
    border-color: #8C8C8C darkgray;
    border-style: solid;
    border-width: 10px;
    font-family: verdana, courier;
    font-size:110%;
    margin-left: 10px;
}
 
#action-area {
    background-color:#DDDDDD;
    margin-bottom:10px;
    padding:0;
    width:100%;
}
 
.edit-help-34 {
    margin-top:2px;
    padding-left:7px;
}
 
.wd-editor-toolbar-panel {
    padding-left:10px;
}
 
/* FORUM
============================ */
 
.forum-thread-box .description-block .statistics {
    color:yellow;
    float:right;
    font-size:87%;
    margin:0.5em 0;
    padding:0 0.5em;
    text-align:right;
}
 
.forum-thread-box .description-block {
    background-color:#7C85AC;
    border:1px solid #CCCCCC;
    color: #ffffff;
    font-weight: bold;
    height:100%;
    margin:1em 4em;
    overflow:hidden;
    padding:0.5em;
}
 
.forum-group div.head {
    background-color:#065400;
    border:1px solid #333333;
    color:#FFFFFF;
    margin:0;
    padding:0.5em 1em;
}
 
.forum-thread-box .description-block .head {
    color: yellow;
}
 
/* TABLES
============================== */
 
table {
    empty-cells:show;
    width:60%;
}
 
table.wiki-content-table th {
    background-color:#066200;
    border:1px solid #888888;
    color:yellow;
    padding:0.3em 0.7em;
}
 
table.wiki-content-table {
    border-collapse:collapse;
    border-spacing:0;
    color:#2D5491;
}
 
/* BUTTONS
============================== */
 
div.buttons input, input.button, button, file, a.button {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background-color:#7C85AC;
    border:1px solid #AAAAAA;
    color:#ffffff;
    font-weight: bold;
    margin:0 2px;
    padding:0 0.5em;
    text-decoration:none;
}
 
.owindow .button-bar a {
    background-color:#7C85AC;
    border:1px solid #AAAAAA;
    color: #ffffff;
    margin:0.2em;
    padding:0.1em 1em;
    text-decoration:none;
}
 
div.buttons.alignleft {
    text-align:center;
}
 
/* TABS
===========================*/
 
yui-navset .yui-nav, .yui-navset .yui-navset-top .yui-nav   {
    border-color: #8C8C8C;
    border-width:0;
    width:90%;
}
 
.yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a em {
    background-color:#066200;
    color: yellow;
}
 
.yui-navset .yui-nav li a em, .yui-navset-top .yui-nav li a em, .yui-navset-bottom .yui-nav li a em {
    background-color:#7C85AC;
    color: white;
    display:block;
}
 
.yui-navset .yui-content, .yui-navset .yui-navset-top .yui-content {
    border: solid 1px #8C8C8C;
    padding: 1em;
    width:80%;
}
 
.yui-navset .yui-nav, .yui-navset .yui-navset-top .yui-nav {
    border: none;
    margin-left:10%;
}

This is a liquid design that should work well at all screen sizes. Originally the sidebar did not work in IE7 but that has now been fixed and the site works in FF, IE7+, Safari and Chrome.

The background image is here: radarscreen.jpg

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License