Phantom

Click to preview

Name: Phantom

Author: rhombus p
License: Creative Commons Attribution-ShareAlike 3.0 License

Tags: black games hover sidebar space topbar

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

Description:

this is a modification of Squark's modern black theme that uses :hover to create cool effects

Known Problems:

• Internet Explorer: top-bar sub menus dont display
• Internet Explorer 7 and below main content dosent obey the opacity rules

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

Code

+ show the code

@import "/common--theme/base/css/text_highlighter.css";
@import "/common--theme/base/css/autocomplete.css";
@import "/common--theme/base/css/forum.css";
@import "/common--theme/base/css/editor.css";
@import "/common--theme/base/css/odialog.css";
body {
margin:0;
}
#container {
margin:0 auto;
padding:0;
width:960px;
}
#header {
height:170px;
position:relative;
z-index:30;
}
#header h2 {
left:50px;
margin:0;
padding:0;
position:absolute;
top:110px;
}
#content-wrap {
min-height:1px;
padding:10px 0 1px;
}
#side-bar {
-moz-border-radius:10px;
-webkit-border-radius: 10px;
background-color:#FFFFFF;
clear:left;
float:left;
margin:0 10px;
opacity:0.15;
filter:alpha(opacity=15);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=15)";
padding:10px;
width:200px;
}
#page-title {
border-bottom:1px solid #666666;
font-size:200%;
margin:0 0 0.5em;
padding-top:0;
}
#main-content {
-moz-border-radius:10px;
-webkit-border-radius:10px;
margin:0 10px 10px 240px;
opacity:0.15;
filter:alpha(opacity=15) !important;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=25)";
padding:10px;
}
#license-area {
color:#555555;
padding:0.5em 0;
}
#account-options li {
display:block;
margin:0;
padding:0;
width:100%;
}
#account-options li a {
-moz-box-sizing:border-box;
display:block;
padding:2px 5px;
width:100%;
z-index:40;
}
#account-options li a:hover {
color:black;
}
#account-topbutton {
font-size:80%;
font-weight:bold;
padding:0 5px;
}
#top-bar {
 
background:#FFFFFF none repeat scroll 0 0;
bottom:0;
left:12px;
opacity:0.15;
filter:alpha(opacity=15);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=25)";
position:absolute;
width:98%;
z-index:90;
-webkit-border-radius: 6px;
-moz-border-radius:6px;
}
#top-bar li ul {
display:block;
margin:0;
text-align:center;
text-decoration:none;
border:none;
background:#222;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
}
body {
background-color:black;
background-image:url(http://rhombusproductions.wdfiles.com/local--files/start/stellar-nebula-cone-nebula-stars-wallpaper.jpg);
background-repeat: repeat;
background-position:center top;
background-attachment: fixed;
background-repeat:no-repeat;
color:black;
}
#content-wrap {
background-position:center top;
background-repeat:repeat-x;
border:0 solid black;
}
#main-content {
background-color:white;
color:black;
margin-top:0;
}
#header h1 {
left:20px;
position:absolute;
top:53px;
}
#header h1 a {
color:#E38800;
font-size:40px;
font-stretch:expanded;
font-weight:bold;
text-decoration:none;
}
#header h1 a:hover {
background-color:transparent;
color:#E38800;
text-decoration:none;
}
#header h2 {
color:#9A0003;
}
#top-bar li {
-moz-border-radius:10px;
-webkit-border-radius: 10px
 
background-color:#CCCCCC;
}
#top-bar li a {
color:black;
text-decoration:none;
}
#top-bar a:hover {
-moz-border-radius:5px;
-webkit-border-radius: 5px;
background-color:#FFFFFF;
}
#top-bar li a:hover {
text-decoration:none;
}
#side-bar {
background-color:white;
margin-top:0;
}
body {
font-family:Verdana,Arial,Helvetica;
}
h1, h2, h3, h4, h5, h6 {
font-family:"Trebuchet MS",Trebuchet,Verdana,Arial,Helvetica;
}
h1 {
font-size:190%;
font-weight:normal;
text-decoration:none;
}
h2 {
font-size:150%;
font-weight:normal;
text-decoration:none;
}
h3 {
font-size:130%;
font-weight:normal;
text-decoration:none;
}
h4 {
font-size:120%;
font-weight:bold;
text-decoration:none;
}
h5 {
font-size:100%;
font-weight:bold;
text-decoration:none;
}
h6 {
font-size:90%;
font-weight:bold;
text-decoration:none;
}
a {
color:#E38800;
}
a:hover {
color:#F5BF7D;
}
a:visited {
color:#E38800;
}
a.newpage {
color:#00FFF7;
}
a.newpage:hover {
color:#FF8A8C;
text-decoration:underline;
}
#page-title {
border-bottom:1px solid #666666;
font-family:Verdana,Arial,Helvetica;
font-size:200%;
margin:0 0 0.5em;
padding-top:0;
}
#footer {
background-color:white;
border-bottom:1px solid #888888;
border-top:1px solid #888888;
color:black;
opacity:0.8;
filter:alpha(opacity=80);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)";
}
#footer a {
color:black;
text-decoration:none;
}
#license-area {
color:white;
}
#license-area a {
color:white;
text-decoration:none;
}
#license-area a:hover {
background-color:transparent;
color:white;
text-decoration:underline;
}
#login-status {
color:white;
}
#side-bar:hover {
opacity:0.8 !important;
filter:alpha(opacity=80)  !important;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
}
#main-content:hover {
opacity:0.8 !important;
filter:alpha(opacity=80)  !important;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
}
#top-bar:hover {
opacity:0.8;
filter:alpha(opacity=80)  !important;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
}
 
#footer {
opacity:0.25;
filter:alpha(opacity=25)  !important;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=25)";
}
 
#footer:hover{
opacity:0.8 !important;
filter:alpha(opacity=80)  !important;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
}

Notes

Similar themes organic Author: Grego1888 Rating: 0, Comments: 0 Tags: sidebar topbar Semi-Trans v. 1.0 Author: Chaotic1 Rating: 0, Comments: 0 Tags: sidebar topbar transparency

Browse themes by tag articles beige black blog blue brown christmas claus clean colorful company corporate dark dashed edu education f1 floral games glass green grey grunge minimalist modern monobook music nature navy no-sidebar notepad no-topbar orange outline rainbow red reflection santa shiny sidebar simple topbar transparency water white wiki wikipedia windows woodcut yellow

Comments

Very nice one Rhombus!!

HobStarCS 1257459069|%e %b %Y, %H:%M %Z|agohover

Ohhh, ahhh! Pretty!

Should the background repeat or something? Perhpas if it did not scroll and the content does?

last edited on 1257459331|%e %b %Y, %H:%M %Z|agohover by HobStarCS + show more

Re: Very nice one Rhombus!!

rhombus p 1257459506|%e %b %Y, %H:%M %Z|agohover

Should the background repeat or something? Perhpas if it did not scroll and the content does?

ahh yes, good idea

EDIT: okay now look at it

---

last edited on 1257459657|%e %b %Y, %H:%M %Z|agohover by rhombus p + show more

Re: Very nice one Rhombus!!

HobStarCS 1257463091|%e %b %Y, %H:%M %Z|agohover

Perfect! Rate it up!

pieterh 1257514997|%e %b %Y, %H:%M %Z|agohover

I like it…! Weird but effective. One thing is that Wikidot footer, which does not play the same game as the rest of the text.

---

The Wikidot Blog | My other works

pieterh 1257515117|%e %b %Y, %H:%M %Z|agohover

Looking at that image, what's missing for me are some heads-up readouts, and guidelines that tell me I'm looking at this scene from inside my marauder class battleship control room. OK, too much sci-fi… :-)

---

The Wikidot Blog | My other works

rhombus p 1257530105|%e %b %Y, %H:%M %Z|agohover

hmm, a hud… that would be cool…

EDIT: the footer now gets to have fun too ;-)

---

last edited on 1257530242|%e %b %Y, %H:%M %Z|agohover by rhombus p + show more