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 Monoxide V3 Author: OxygenNine Rating: 1, Comments: 0 Tags: css3 sidebar topbar white Hello Dark RA Archives Theme Author: Sir David Tee Rating: 2, Comments: 0 Tags: dark modern sidebar simple 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 confic contest contest-win corperate corporate corporation creative crimson cross css3 css3-buttons curved d14 dark dashed

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.

很棒的主题

CNCHgugua 01 Oct 2025 13:29

哥们你去哪了
上一条帖子是2009年9月6日的，最后编辑也在 25Apr2010，5638天了啊啊啊啊啊啊啊啊啊啊啊啊啊
超时空对话？^{这还挺酷的}
或许。。。Wikidot没人用了吧。。。崩溃页面上的10000000名用户还有多少是活跃的呢？或许说。。。在这漫漫岁月长河，“他”已经“查无此人”了吧。。。
岁月不饶人
不饶人
不饶人。。。
于中国，山东省，日照市，292.88万人中的“1”。
再见
再见
不知道下一个看见这条帖子的是何年何月何处，或许，到那天，我也“查无此人”了。

兼容性报告：20251001，21：28，Edge 版本140.0.3485.94 (正式版本) (64 位)
正常！很棒！

---

就是一个咕呱