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 neon Author: minako Rating: 2, Comments: 2 Tags: sidebar topbar CAS 2 Author: rhombus p Rating: 3, Comments: 3 Tags: and blog blue clean sidebar simple topbar

Browse themes by tag artimonier beige black blog blue bmc brown business clean colorful company corperate corporate css3 curved dark dashed developer education educational flexible floral flower freshly-squeezed glass green grey grunge light minimalist modern monobook nature no-sidebar no-topbar orange outline paper pink professional rainbow red series sidebar simple topbar white wide wiki yellow

Comments

Very nice one Rhombus!!

HobStarCS 05 Nov 2009 22:11

Ohhh, ahhh! Pretty!

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

---

Last edited on 05 Nov 2009 22:15 by HobStarCS + Show more

Re: Very nice one Rhombus!!

rhombus p 05 Nov 2009 22:18

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 05 Nov 2009 22:20 by rhombus p + Show more

Re: Very nice one Rhombus!!

HobStarCS 05 Nov 2009 23:18

Perfect! Rate it up!

---

pieterh 06 Nov 2009 13:43

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.

---

Portfolio

pieterh 06 Nov 2009 13:45

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… :-)

---

Portfolio

rhombus p 06 Nov 2009 17:55

hmm, a hud… that would be cool…

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

---

Last edited on 06 Nov 2009 17:57 by rhombus p + Show more

chaseparlee 10 Oct 2010 18:13

can you change the background?

Achiox 10 Oct 2010 19:52

#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;
}

Replace that link with another image link and it should work!

_-Achiox

Last edited on 10 Oct 2010 19:58 by Achiox + Show more

rhombus p 10 Oct 2010 19:58

yep, thats all you have to do :D

edit: as Achiox said, you might need to change your positioning, although,as it is right now, it should work just fine

---

Last edited on 10 Oct 2010 20:00 by rhombus p + Show more

I like but..

bigredcanuck 24 Dec 2010 20:08

I love this theme.. but is there a way to not have the rollover effects? just mildly transparent infoboxes instead?

Re: I like but..

rhombus p 26 May 2011 14:12

Yes, you can remove the <something>:hover{ code } parts

---