Spaced Out

Click to preview

Name: Spaced Out

Author: Ss_Sins_Insight
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:

"Spaced-out" version of Midnight Onyx with grey text; allows third level nesting in the topbar. Thank you to Nebula for the background image.

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

Code

+ show the code

html,body {
    min-height: 101%;
}
 
body {
    background-image: url(http://themes.wdfiles.com/local--files/spacedout/background.jpg);
    background-position: top center;
    background-repeat: repeat;
    background-color: black;
    color: grey;
}
 
/*  Use 950 pixels width for normal screens, 100% for iPhones */
#container {
    width: 950px;
    margin: 0 auto;
    padding-left: 8px;
    position: relative;
}
 
@media only screen and (max-device-width: 480px) {
  #container {
    width: 100%;
  }
}
 
#content-wrap {
    padding-right: 8px;
    overflow: hidden;
}
 
#main-content {
    margin: 0 0 1em 0;
    padding: 0 15px;
    min-height: 150px;
    overflow: hidden;
}
 
#page-content > *:first-child {
    margin-top: 0;
}
 
#page-title {
    padding-bottom: 2px;
    border-bottom: 1px solid white;
    margin-top: 0;
    font-size: 180%;
    color: white;
}
 
#header {
    height: 110px;
    padding-right: 8px;
}
 
#header h1 {
    float: left;
    padding: 43px 0 0 16px;
}
 
#header h1 span {
    padding-right: 7px;
}
 
#header h1 a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    font-style: normal;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: none;
    line-height: 26px;
    color: white;
}
 
#header h1 a:hover {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    font-style: normal;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: none;
    line-height: 26px;
    color: white;
}
 
#header h2:before {
    content: "|";
    color: grey;
}
 
#header h2 {
    padding: 49px 7px 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 20px;
    color: white;
}
 
#header h2 span {
    padding-left: 7px;
    font-size: 10px;
    text-transform: uppercase;
    color: grey;
}
 
h1, h2, h3, h4, h5, h6 {
    padding: 0;
    margin: 15px 0;
    color: white;
}
 
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    padding: 0;
    margin: 15px 0;
    color: white;
}
 
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
    padding: 0;
    margin: 15px 0;
    color: white;
}
 
#top-bar {
    width: 100%;
    height: 29px;
    right: 0;
    left: 0;
}
 
#top-bar li, #top-bar ul {
    margin: 0;
    padding: 0;
}
 
#top-bar ul {
    margin-right: 8px;
    height: 29px;
    background: transparent;
}
 
#top-bar ul ul {
    margin-right: 0;
}
 
#top-bar li a {
    color: white;
    font-size: 13px;
    font-weight: bold;
    line-height: 29px;
    padding: 0 15px;
    text-decoration: none;
}
 
#top-bar li a:hover {
    text-decoration: none;
    background: white;
    color: black;
}
 
#top-bar li ul {
    border: none;
}
 
#top-bar li ul li a {
    width: 18em;
    color: white;
    background: black;
}
 
#top-bar li ul li a:hover {
    color: black;
    background: white;
}
 
#top-bar ul li.sfhover ul{
    width: 20em;
    background-color: black;
}
 
#top-bar ul li.sfhover ul li{
    height: 29px;
}
 
#top-bar ul li.sfhover ul li.sfhover {
    height: 29px;
    width: 20em;
    background-color: black;
}
 
#top-bar ul li.sfhover ul a{
    width: 20em;
    background-color: black;
}
 
#top-bar ul li.sfhover ul li:hover a{
    background-color: white;
    color: black;
}
 
#top-bar ul li ul li ul{
    display: none;
}
 
#top-bar ul li.sfhover ul li.sfhover ul {
    display: inherit;
    position: relative;
    left: 20em;
    bottom: 29px;
}
 
#top-bar ul li.sfhover ul li.sfhover ul li a{
    background-color: black;
    color: white;
}
 
#top-bar ul li.sfhover ul li.sfhover ul li:hover a{
    background-color: white;
    color: black;
}
 
#side-bar {
    border-left:1px solid white;
    float:right;
    margin-top:10px;
    overflow:hidden;
    padding:0 15px 0;
    width:200px;
}
 
#search-top-box {
    right:-53px;
    top:50px;
}
 
#search-top-box .button {
    visibility: hidden;
}
 
#search-top-box input.empty {
    background-color: transparent;
    color: grey;
}
 
#search-top-box .text {
    padding:2px 2px 2px 5px;
    width:220px;
}
 
#login-status {
    right: 8px;
    top: 8px;
}
 
#login-status a {
    color: white;
    text-decoration: underline;
}
 
#login-status a:hover {
    color: white;
    text-decoration: none;
}
 
#login-status #account-topbutton, .change-textarea-size a {
    color: white;
    background: transparent;
    border-color: white;
    text-decoration: none;
}
 
#login-status #account-topbutton:hover, .change-textarea-size a:hover {
    color: black;
    background: white;
    border-color: transparent;
    text-decoration: none;
}
 
#account-options li a {
    color: white;
    background: black;
    border: none;
    text-decoration: none;
}
 
#account-options li a:hover {
    color: black;
    background: white;
    border: none;
    text-decoration: none;
}
 
input.text, textarea {
    color: grey;
    border-color: grey;
}
 
div.buttons input, input.button, button, file, a.button {
    background: transparent; 
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border-color: white;
    height: 26px;
    color: white;
}
 
div.buttons input:hover, input.button:hover, button:hover, a.button:hover, file:hover {
    background: white;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border-color: transparent;
    color: black;
    height: 26px;
}
 
div.page-calendar-box {
    padding: 0;
}
 
a {
    color: grey;
    text-decoration: underline;
}
 
a:hover {
    background-color: transparent;
    color: grey;
    text-decoration: none;
}
 
a.newpage {
    color: black;
    background-color: grey;
    text-decoration: underline;
}
 
a.newpage:hover {
    color: black;
    background-color: grey;
    text-decoration: none;
}
 
/*  Pop-up hover text over images or links  */
/*  Use: [[span class="hover"]]Image or link[[span]]Hover text[[/span]][[/span]] */
 
.hover{
    color: grey;
    text-decoration: underline;
}
 
.hover:hover{
    background-color: transparent;
    color: grey;
    text-decoration: none;
}
 
.hover span {
    display: none;
}
 
.hover:hover span {
    position: absolute;
    display: inline;
    margin: 15px -20px;
    height: auto;
    width: auto;
    background: black;
    background-image: url(http://themes.wdfiles.com/local--files/spacedout/background.jpg);
    background-position: top center;
    background-repeat: repeat;
    border: 1px solid white;
    color: white;
    padding: 1em;
    font-size: 12px;
}
 
.hover:hover span span {
    position: relative;
    margin: auto;
    height: auto;
    width: auto;
    border: none;
    padding: 0;
}
 
#breadcrumbs {
    margin: 1em 0 1em 0;
    color: white;
}
 
#breadcrumbs a {
    color: white;
}
 
.odate, .like-odate {
    font-size: 85%;
    font-weight: bold;
    color: grey;
    background: transparent;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
}
 
.member .error-block {
    display:none;
}

Notes

A wide variation is here.

Similar themes Basalt Theme Author: Iopk123451 Rating: 1, Comments: 0 Tags: css3 sidebar topbar Sigma9(Only Search Bottom) Author: Iopk123451 Rating: 0, Comments: 0 Tags: modern 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

pieterh 18 Oct 2009 12:06

I like it… makes me think that this theme with totally black background and green monospaced lettering would make a nice retro effect.

---

Portfolio

Ss_Sins_Insight 18 Oct 2009 18:39

Thx, It's going to look "spacey" for websites that are about space games. I may put some monospaced lettering (but not green) in like you said, thx for the advice.

Last edited on 20 Oct 2009 09:03 by Ss_Sins_Insight Show more

Whsprs 01 Sep 2022 20:45

Would you consider making a version with a toc with a black background or transparent one? I tried customizing this myself, but I don't get it lol

I am guessing most ppl who like the toc feature would appreciate it, but amazing job ty I love your theme aside from this minor detail.