Northern Lights

Click to preview

Name: Northern Lights

Author: RobElliott
License: Creative Commons Attribution-ShareAlike 3.0 License
Tags: blue green liquid nature sidebar simple topbar

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

Description:

This theme is a simple green and blue theme based on the spectacular aurora borealis or "northern lights" seen in the skies of nordic countries, Iceland, the polar region and the north of Scotland.

The theme is liquid and so will stretch or contract to fit your screen size.

The header uses a simple background image to create the effect of the northern lights. This was created in paint.net. The image is here: header3.jpg

The theme uses both a side bar and top bar. The side bar is on the right of the screen and the top bar uses a horizontal sub menu.

The theme is carried through on simple tables, tabs and forums can also be used for the site manager.

A live version is at http://northernlights.wikidot.com.

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/northernlights

Code

+ show the code

/* COMMON 
==============================*/
 
div#container-wrap {
    background-color: #230059;
    background-repeat: repeat-y;
    background-position:left top;
    padding:0 0 0 50px;
}
 
#container {
    background-color: #230059;
    background-position:right top;
    background-repeat:repeat-y;
    min-height: 768px;
    padding:0 50px 0 0;
}
 
#content-wrap {
    background-color:#CEE8E5;
    margin-top: 0px;
}
 
h1, #page-title {
    color: #000;
    font-weight: normal;
    margin: 0 0 0.6em;
    padding: 0 0 0.25em;
}
 
h1 {
    color:#468259;
    font-weight: bold;
    margin-top: 0.7em;
    padding: 0;
}
 
h2, h3, h4, h5, h6, h7 {
    background-color:transparent;
    color:#468259;
    letter-spacing: 1px;
    margin: 0.5em 0 0.4em;
    padding: 0;
}
 
#page-title {
    color:#468259;
    padding-top:0em;
}
 
ul {
    list-style: square;
}
 
li, p {
    line-height: 141%;
}
 
a:link, a:visited {
    color: #141847;
    text-decoration: none;
}
 
a.newpage {
    color: #141847;
    text-decoration: none;
}
 
a:hover {
    text-decoration: underline;
}
 
#header, #top-bar {
    margin: 0 auto;
    width: 80%px;
}
 
body {
    background-color: #dddddd;
    font-size: 0.80em;
    color: #000;
}
 
input.text {
    background-color:#84B286;
    border:1px solid #468259;
    color:#FFFFFF;
}
 
input.empty {
    background-color:transparent;
    color: #ffffff;
    font-size:100%;
}
 
input {
    font-size:100%;
}
 
textarea {
    background-color: #CEE8E5;
}
 
input.text {
    background-color: #7DC5B7;
    color: darkblue;
}
 
/* HEADER
============================== */
 
#header {
    background-color: #6A946A;
    background-image: url(http://themes.wikidot.com/local--files/northernlights/header3.jpg);
    height:165px;
    padding-bottom:50px;
    position:relative;
    top:0;
    width 100%;
}
 
#header h1 {
    color: white;
        left: 50px;
        padding: 0;
        position: absolute;
       top: 60px;
}
 
#header h2 {
    color:white;
    font-size:125%;
    left:50px;
    margin:0;
    max-height:38px;
    padding:0;
    position:absolute;
    top:110px;
}
 
#header h1 a {
    background: transparent;
    left: 50px;
    color: white;
    font-size: 180%;
    text-decoration: none;
}
 
/*SEARCH and LOGIN
==============================*/
 
#search-top-box {
        position: absolute;
    right: 9px;
    top: 20px;
    text-align: left;
    width: 400px;
    z-index: 9;
}
 
.search-box .query-area {
    display: none;
    text-align:center;
}
 
#login-status {
    background-image:none;
    color:white;
    font-size:100%;
    height:20px;
    margin:0;
    overflow:visible;
    padding:5px 0 0 15px;
    position:relative;
    right:0;
    top:10px;
    width:100%;
    z-index:6;
}
 
#login-status ul a {
    background: transparent;
    color: #700;
}
 
#account-topbutton {
    background-color:transparent;
    color: #CEE8E5;
    border:1px solid #CEE8E5;
    font-size:80%;
    font-weight:bold;
    margin-left:5px;
    padding:0 5px;
    text-decoration:none;
}
 
#account-options {
    background-color:#499990;
    border:0 none;
    display:none;
    left:200px;
    opacity:0.5;
    padding:0;
    position:absolute;
    text-align:center;
    top:5px;
    width:135px;
    z-index:7;
}
 
#account-options ul {
    display:block;
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    margin: 0;
    padding:0;
    color: white;
}
 
#account-options li {
    color: white;
    display:block;
    margin:0;
    padding:0;
    width:100%;
}
 
#account-options li a {
    -moz-box-sizing:border-box;
    color: white;
    display:block;
    padding:2px 5px;
    width:100%;
    z-index:8;
}
 
#account-options li a:hover {
    background-color: white;
    color: black;
    opacity: 0.5;
}
 
.printuser img.small {
    display:none;
    margin-right: 0.4em;
}
 
#search-top-box form {
    background-color: transparent;
    height: 25px;
    left: 180px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: -6px;
    z-index: 9;
}
 
#search-top-box input.empty {
    color:#FFFFFF;
}
 
/* TOP MENU
==============================*/
 
#top-bar {
    background-image: none;
    border 1px solid;
    font-size:90%;
    height:50px;
    left:0;
    line-height:25px;
    margin-left: 0;
    position:absolute;
    top:150px;
    z-index:10;
}
 
#top-bar ul {
    background-color:transparent;
    border:none;
    display:inline;
    height:31px;
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    margin:0;
    margin-left:0;
    margin-top:15px;
    padding:0;
    width:100%;
}
 
#top-bar li {
    float:left;
}
 
#top-bar li ul li {
    display: block;
    float:left;
    width:auto;
}
 
#top-bar li ul li a {
    background-color: transparent;
    border: 0;
    text-align:left;
    width:auto;
}
 
#top-bar a:link, #top-bar a:visited {
    background-color:transparent;
    color: #CEE8E5;
    margin-left:7px;
    padding-left:2px;
    text-decoration:none;
}
 
#top-bar ul li a {
    border: 0;
    line-height: 23px;
    max-height: 23px;
    text-decoration: none;
}
 
#top-bar ul li:hover a {
    background: transparent;
    border: 0;
}
 
#top-bar ul li:hover ul li a {
    border: 0;
    height: auto;
    line-height: 160%;
    max-height: none;
    padding-bottom: 0;
    padding-top: 0;
    width: 150px;
}
 
#top-bar ul li:hover a:hover {
    border: 0;
    text-decoration: underline;
}
 
#top-bar ul ul li:hover a:hover  {
    color: white;  
}
 
#top-bar ul li ul {
    background-color: transparent;
    border: 0;
    color: white;
    display: block;
    vertical-align: bottom;
    width: auto;
}
 
/* SIDEBAR MENU
============================== */
 
#side-bar {
    -moz-border-radius-bottomright: 10px;
    background-color: #CEE8E5;
    border: 1px solid #dedede;
    clear: both;
    float:right;
    padding: 10px;
    margin: 0 0 0 2em;
    width: 14em;
}
 
/* CONTENT
============================== */
 
#main-content {
    background-color:#FFFFFF;
    background-image:none;
    background-repeat:no-repeat;
    margin-left:0;
    margin-right: 200px;
    padding-left:20px;
    padding-top:20px;
    position:relative;
}
 
/* TABLES
============================== */
 
table {
    empty-cells:show;
    width:60%;
}
 
table.wiki-content-table {
    background-color: #CEE8E5;
    border-collapse:collapse;
    border-spacing:0;
    color:#2D5491;
}
 
table.wiki-content-table th {
    background-color:#6A946A;
    border:1px solid #888888;
    color:white;
    padding:0.3em 0.7em;
}
 
table.wiki-content-table td {
    background-color: #CEE8E5;
    border:none;
    padding:0.3em 0.7em;
}
 
/* FOOTER
==============================*/
 
#footer {
    background-image: url(http://themes.wikidot.com/local--files/northernlights/header3.jpg);
    bottom: 0px;
    color: #FFFFFF;
    font-size:90%;
    height: 75px;
    margin-bottom: 0px;
    margin-left: 0;
    margin-top: 0px;
    padding: 10px 0;
    position: relative;
    width: 100%;
    z-index: 1;
}
 
#footer .options {
    color: #ffffff;
    float: right;
    font-size: 90%;
    margin-right: 10px;
    margin-top: 15px;
    padding: 53px 0;
    z-index:1;
}
 
#license-area {
    color: #dddddd
    font-size: 95%;
    padding: 0 0;
    text-align: center;
}
 
#page-info {
    clear:both;
    font-size:87%;
    margin:15px;
    text-align:right;
}
 
.page-watch-options {
    font-size:95%;
    text-align:right;
}
 
.page-options-bottom {
    height:1%;
    margin-right: 0;
    position: relative;
    text-align:right;
    top: 80px;
    z-index:20;
}
 
.page-options-bottom a, a.action-area-close {
    background-color:transparent;
    color: darkblue;
     margin-top: -20px;
    text-decoration:none;
}
 
#license-area {
    background-color:#DDDDDD;
    color:#468259;
    padding:0.5em 0;
    text-align:center;
}
 
/* BUTTONS
============================== */
 
div.buttons input, input.button, button, file, a.button {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background-color:#7DC6B7;
    border:1px solid #468259;
    color:#ffffff;
    font-weight: bold;
    margin:0 2px;
    padding:0 0.5em;
    text-decoration:none;
}
 
.owindow .button-bar a {
    background-color:#7DC6B7;
    border:1px solid #468259;
    color: #ffffff;
    margin:0.2em;
    padding:0.1em 1em;
    text-decoration:none;
}
 
div.buttons.alignleft {
    text-align:center;
}
 
/* FORUMS
===========================*/
 
.forum-group div.head {
    background-color:#6A946A;
    border:1px solid #333333;
    color:#FFFFFF;
    margin:0;
    padding:0.5em 1em;
}
 
/* 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:#6A946A;
    color: white;
}
 
.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:#CEE8EE;
    color:#6A946A;
    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%;
}
 
/* SITE MANAGER
============================== */
 
select {
    background-color:#CEE8E5;
    border:1px solid #777777;
}
 
#site-manager-menu {
    background-color:#CEE8E6;
    border-top:5px solid #7DC5B7;
    float:left;
    margin:0 0 1em;
    padding:0 20px 0 0;
    width:16em;
}
 
#lock-info {
    width:100%;
}
 
/* CODE BLOCKS AND NOTES
============================== */
 
.code {
    background-color:#F7F7F7;
    border-color:#7DC5B7;
    border-style:solid;
    border-width:5px 1px 1px;
    font-family:'Andale Mono','Courier New',Courier,monospace;
    margin:0.4em 0;
    overflow:auto;
    padding:0 1em;
}
 
div.wiki-note {
    background-color:#CEE8E5;
    border-color:#7DC5B7;
    border-style:solid;
    border-width:5px 1px 1px;
    margin:0 auto;
    text-align:center;
    width:50%;
}

Notes

The theme was created in Firefox 3.5.1 and tested on IE7 and IE8, Chrome and Safari.

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

Menu

Milhaus 09 Aug 2009 14:45

It looks intersting, but I don't like the menu. The submenu items look too far from each other. Also, I think that menu block should be thinner (in vertical direction). Overall, good work, thanks.

---

Others are others and me is me.

theme design

Phil Chett 10 Aug 2009 00:05

To make a nice theme, you do need some artistic talent. squark has some nice designs, Rob has provided us with a really nice theme here.

check out some of his other themes. There is some dam good stuff from him.

the other nice thing about this theme is that its pretty good in ie effing 6.

as far as i can tell, he has only missed his little fix for the code block problem.

Last edited on 10 Aug 2009 00:08 by Phil Chett Show more

Re: theme design

RobElliott 06 Sep 2009 11:15

Thanks for all the comments. I will have another look at the issues raised.

Rob

---

Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.