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 5-9: top-bar sub menus don't display (fixed in IE10)
• Internet Explorer 5-7: main content doesn't obey the opacity rules (fixed in IE8)

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

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 Matalex Orange Black Author: alexandra bond Rating: 0, Comments: 0 Tags: black responsive sidebar smartphone topbar Noise Author: Battlesquid Rating: 1, Comments: 5 Tags: clean dark flexible grey minimalist modern no-sidebar topbar

Browse themes by tag ardeol 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 hello minimalist modern nature navy no-sidebar no-topbar orange outline professional purple rainbow red responsive series sidebar simple smartphone super topbar white 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?

Kovalenko 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

---

ik

Last edited on 10 Oct 2010 19:58 by Kovalenko 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

---

unsure..

aronianway 10 Aug 2012 11:08

I recently joined Wikidot, adn am trying to use this theme. I wanted to change the background picture and added a different link, but it is still showing the original picture, not the new image. I am using Photobucket as my link source. Is that the issue, or perhaps something else?

Re: unsure..

RobElliott 10 Aug 2012 15:05

1) You have put the CSS and your new link on your page admin:themes. Have you told site manager (admin:manage -> appearance -> themes) that your css is on that page? If not, go that area of site, make sure that _default is the category that is highlighted, click the external theme radio button and enter /admin:themes/code/1 then press the save button. You can see images of that process at http://community.wikidot.com/howto:flexible-css-putting-css-on-its-own-page

2) The next thing is that at the top part of the CSS on your admin:themes page take out all those @import rules. They are base css used by Wikidot anyway so it is not necessary to add them yourself and the number of them will exceed the number allowed for users on IE which means there might be problems. This was a mistake made by the creator of the theme and I have removed them from the theme,

Once you've point 1 above you should find that the image displays OK.

---

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

Re: unsure..

Kovalenko 10 Aug 2012 15:25

Have a visit to this temporary sandbox wiki:

http://sandboxtemp.wikidot.com/start

I made a temporary photobucket account and uploaded a royalty-free image to use as a sample wallpaper - it was a bit awkward when trying to find the image URL.

You mentioned that you "added a different link". Make sure that you are replacing the previous image URL, rather than just adding another line of CSS.

---

ik

Re: unsure..

RobElliott 10 Aug 2012 16:49

Achiox, if you look at the page admin:themes on aronianway's site you'll see that the url was changed correctly, and the image works when tested with Firebug. But Firebug also shows that he/she has not told the site manager that admin:themes is the external source of the css.

---

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

Re: unsure..

Kovalenko 10 Aug 2012 19:05

Got it, thanks!

---

ik

The_King_Max 30 Jul 2013 14:40

thnx is Vary Good