[Informative] Change ENWorld's colors

Dracorat

Dracorat

First Post
Since I browse this site at work, and black background shouts to my coworkers "goofing off" (but white web pages don't because my work ones are white) I made a set of custom CSS rules that changes the site to blue-on-white. Here is the CSS for others who would like the same thing. To use it, you have to have a browser that supports "user style sheets" - in my case, I'm using Chrome with "Personalized Web" extension.

The CSS:

Code: 
body { background: white; color: black;}
body_alink, body a:link, body a:visited { color: #00F; }
.alt1, .alt1active {background: #FFFFF0 ! important; }
.alt2, .alt2active {background: #EEF ! important; }
.thead { background: #AAF ! important; }
div#mainContents>div>div.page>div:nth-child(1)>table.tborder>tbody>tr>td.alt1 { background: white ! important; }
#heading { background: white ! important; border: none; }
.tborder { background: white; border: 0px solid #EEE}
table {color: darkblue; border-spacing: 0px 0px ! important; cell-spacing: 0px 0px ! important;}
.smallfont { color: darkblue; }
.vbmenu_control, .vbmenu_control_alink, .vbmenu_control a:link, .vbmenu_control a:visited { background: white; color: darkblue; }
td { background-color: white ! important; }
select, .popup_feedback>div { background: white; color: darkblue; }
.button, .largeButton { border: 1px solid #AAA; background: #AAF; color: darkblue; }
.button:hover, .largeButton:hover, .button:focus, .button:active, .largeButton:focus, .largeButton:active  { border: 1px solid #AAA; background: #DDF ! important; color: darkblue ! important; }
.panel, .panelsurround {background: #EEF; }
.vBulletin_editor, #vB_Editor_QR, 
  #vB_Editor_QR_controls *, 
  .imagebutton
    { background: #EEE ! important; }
.vbmenu_option a:link, .vbmenu_option a:visited { color: blue; }
.vbmenu_option a:hover { color: darkblue; }
.bginput, .controlbar>*>textarea, .controlbar>textarea { background: white ! important; color: darkblue ! important; background-color: white ! important;}
fieldset.fieldset>div, label {color: #88F ! important; }
.ofont, .ocolor, .osize, .osmilie, .osyscoloar, .smilietitle {color: black ! important; background-color: white ! important;}
.ofont:hover, .ocolor:hover, .osize:hover, .osmilie:hover, .osyscoloar:hover, .smilietitle:hover {color: #88F ! important; background-color: #EEF ! important;}
img:hover {border: none ! important; }
.imagebutton:hover { border: 1px silver solid ! important; }
 
Last edited:

log in or register to remove this ad

I just pasted that into a new style box in the admin CP, and you can now select it as "Child of Black".

Text input areas are still white text on a black background, but otherwise it's pretty cool. :)
 

Awesome! That makes it even easier for others to use!

In my browser, the text inputs are white with dark blue text, but that's probably a cross browser incompatibility. I'll look in to it with the other browsers.
 


There's also a large black background area at the top - are you getting that on your browser?
 



OK, the original post is updated.

Changes:

Black area at top of page should no longer be black.

Some yellow areas near the top have been made white

Black text entries: I don't get these, but I think it may be that I'm using a custom CSS which has a higher SELECTOR specificity, so I made some changes to increase the specificity of these rules. Let me know if you still see black text editors.

Button hovers are fixed.

Labels are no longer white text. (Missed this first round.)
 

That looks great! I'm still getting the black text boxes, but the black section in the header is gone! I'd say that some of those header sections (that were yellow) could use something to disinguish them - maybe the light blue shade you've used elsewhere?

But that's all minor quibbles. It's perfectly functional and looks great!
 

New theme. Inspired by secret agents. Everything is super-stealthy until you aim your gun (or mouse as the case may be) at them.

EN World at its most secretive ....

(Note this theme works best with Chrome and FireFox - IE is not as fully CSS2-compliant and I make heavy use of CSS2 in this theme.)

body { background: white; color: black;}
fieldset.fieldset { border: 1px solid rgb(195, 195, 195) ! important ; display: table-cell; }
span.time { color: rgb(210, 168, 177); }

/* HYPERLINKS */
.body_alink, body a:link, body a:visited { color: rgb(195, 195, 235); }
.vbmenu_option a:link, .vbmenu_option a:visited
{ color: rgb(195, 195, 235); }
.vbmenu_control, .vbmenu_control_alink, .vbmenu_control a:link, .vbmenu_control a:visited
{ background: white; color: rgb(195, 195, 235); }

/* HOVER OVER LINKS */
.vbmenu_option a:hover, a:hover, .alink:hover, .vbmenu_control_alink:hover, .vbmenu_control a:hover, .body_alink:hover
{ color: rgb(0, 0, 119); }

/* GENERIC TABLE CELLS */
.alt1, .alt1active { background: white ! important; }
.alt2, .alt2active { background: rgb(250, 250, 250) ! important; border: 1px solid rgb(195, 195, 195); }
.thead { background: rgb(240, 240, 240) ! important; border: none ! important; }
#heading { background: white ! important; border: none; }
.tborder { background: white; border: 0px solid #EEE }
table { color: rgb(35, 0, 0); border-spacing: 0px 0px ! important; cell-spacing: 0px 0px ! important; }
table td.alt2, td.alt2 *.smallfont { color: rgb(195, 195, 195); }
td.alt2 *.smallfont:hover { color: rgb(35, 0, 0) ! important; }
td { background-color: white ! important; }
td.navbar, span.navbar { color: rgb(195, 195, 195); }
td.navbar:hover, span.navbar:hover { color: rgb(35, 0, 0); }

/* SPECIFIC TABLE CELLS */
div#posts>div>table.tborder>tbody>tr:nth-child(1)>td.thead:nth-child(1) /* top left of post */
{ border: 1px solid rgb(195, 195, 195) ! important; border-right: none ! important; color: rgb(135, 135, 135); }
div#posts>div>table.tborder>tbody>tr:nth-child(1)>td.thead:nth-child(2) /* top right of post */
{ border: 1px solid rgb(195, 195, 195) ! important; border-left: none ! important; color: rgb(135, 135, 135); }
div#posts>div>table.tborder>tbody>tr:nth-child(1)>td.thead:nth-child(2) a /* top right of post - links */
{ color:rgb(195, 195, 235); }
div#posts>div>table.tborder>tbody>tr:nth-child(1)>td.thead:nth-child(2) a:hover /* top right of post - links - hover */
{ color:rgb(0, 0, 119); }
div#posts>div>table.tborder>tbody>tr:nth-child(2)>td.alt2 /* left of post */
{ border: 1px solid rgb(195, 195, 195) ! important; border-top: none ! important; border-bottom: none ! important; }
div#posts>div>table.tborder>tbody>tr:nth-child(2)>td.alt1 /* right of post */
{ border: none ! important; border-right: 1px solid rgb(195, 195, 195) ! important; }
div#posts>div>table.tborder>tbody>tr:nth-child(3)>td.alt2 /* bottom left of post */
{ border: 1px solid rgb(195, 195, 195) ! important; border-top: none ! important; }
div#posts>div>table.tborder>tbody>tr:nth-child(3)>td.alt1 /* bottom right of post */
{ border: none ! important; border-right: 1px solid rgb(195, 195, 195) ! important; border-bottom: 1px solid rgb(195, 195, 195) ! important; }

div#posts td.alt2 a { color: rgb(195, 195, 235); }
div#posts td.alt2 a.bigusername { color: rgb(105, 105, 105); }
div#posts td.alt2 a:hover { color: rgb(0, 0, 119); }
div#posts td.alt1>div:not([id]), div#posts td.alt1>div.smallfont { color: rgb(210, 210, 210); }
div#posts td.alt1>div:not([id]) a, div#posts td.alt1>div.smallfont a { color: rgb(195, 195, 235); }
div#posts td.alt1>div:not([id]):hover, div#posts td.alt1>div.smallfont:hover { color: rgb(35, 0, 0); }
div#posts td.alt1>div:not([id]):hover, div#posts td.alt1>div.smallfont a:hover { color: rgb(0, 0, 119); }


/* QUOTE BOXES */
div#posts>div>table.tborder>tbody>tr:nth-child(2)>td.alt1>div>div { margin: 20px ! important; border: none ! important; margin-bottom:2px ! important; margin-left: 10px ! important; display: table-cell; padding-left: 10px; }
div#posts>div>table.tborder>tbody>tr:nth-child(2)>td.alt1>div>div:before { display: block; margin-top: 20px; content: "."; height: 1px; visibility: hidden; }
div#posts>div>table.tborder>tbody>tr:nth-child(2)>td.alt1>div>div:after { display: block; margin-bottom: 5px; content: "."; height: 1px; visibility: hidden; }

div#posts>div>table.tborder>tbody>tr:nth-child(2)>td.alt1>div>div>div { border: 2px solid rgb(195, 195, 195) ! important; border-bottom: 0px ! important; font-style: italic; width: 80px ! important; margin-bottom: 0px ! important; background-color: rgb(240, 240, 240); font-weight: bold; color: rgb(165, 165, 165); } /* "quote" */
div#posts>div>table.tborder>tbody>tr:nth-child(2)>td.alt1>div>div>table td.alt2 { border: 2px solid rgb(195, 195, 195) ! important; margin-bottom: 0px ! important; color: rgb(75, 75, 75) ! important; }
div#posts>div>table.tborder>tbody>tr:nth-child(2)>td.alt1>div>div>table td.alt2>div:nth-child(1) { color: rgb(105, 105, 105) ! important; }
div#posts>div>table.tborder>tbody>tr:nth-child(2)>td.alt1>div>div>table td.alt2>div:nth-child(1)>strong { color: rgb(90, 90, 90) ! important; }

/* SILVER MEMBERS (names are too light in this theme */
a.bigusername>font{color: rgb(195,195,195) ! important; text-shadow: black 1px 1px 1px; }


/* BREADCRUMBS */
div#mainContents>div>div.page>div:nth-child(1)>table.tborder>tbody>tr>td.alt1 { background: white ! important; }

/* FONT VARIANTS */
.smallfont { color: rgb(195, 195, 195); }
.smallfont:hover, .smallfont *:hover ( color: rgb(35, 0, 0); }
.smallfont a:hover { color: rgb(0, 0, 119); }
.smallfont>span>b>big { color: rgb(195, 195, 235); }
.smallfont>span>b>big:hover { color: rgb(0, 0, 119); }

/* INPUTS */
select, .popup_feedback>div { background: white; color: rgb(35, 0, 0); }
.button, .largeButton, select,
option, option.fjdpth0, option.fjdpth1, option.fjdpth2, option.fjdpth3, option.fjdpth4, option.fjdpth5, option.fjsel
{ border: 1px solid rgb(240, 183, 196); background: rgb(240, 240, 240); color: rgb(35, 0, 0); opacity: 0.4; }
.button:hover, .largeButton:hover, .button:focus, .button:active, .largeButton:focus, .largeButton:active, select:hover,
option:hover, option.fjdpth0:hover, option.fjdpth1:hover, option.fjdpth2:hover, option.fjdpth3:hover, option.fjdpth4:hover, option.fjdpth5:hover, option.fjsel:hover
{ border: 1px solid rgb(255, 0, 0); background: rgb(255, 235, 235) ! important; color: rgb(255, 0, 0)! important; cursor: hand; opacity: 1.0; }
.panel, .panelsurround { background: white; border: none;}

/* POST EDITOR */
.vBulletin_editor, #vB_Editor_QR, #vB_Editor_QR_controls *, .imagebutton
{ background: rgb(240, 240, 240) ! important; }
.bginput, .controlbar>*>textarea, .controlbar>textarea
{ background: white ! important; color: rgb(35, 0, 0)! important; background-color: white ! important;}
fieldset.fieldset>div, label { color: rgb(35, 0, 0) ! important; }
.ofont, .ocolor, .osize, .osmilie, .osyscoloar, .smilietitle
{ color: black ! important; background-color: white ! important;}
.ofont:hover, .ocolor:hover, .osize:hover, .osmilie:hover, .osyscoloar:hover, .smilietitle:hover
{ color: #88F ! important; background-color: #EEF ! important;}
img:hover { border: none ! important; }
.imagebutton:hover { border: 1px silver solid ! important; }

/* IMAGES */
div#posts img { filter: alpha(opacity=10); opacity: 0.1; }
div#posts img:hover { filter: alpha(opacity=100); opacity: 1; border: none ! important; }
div#logo img { filter: alpha(opacity=10) ! important; opacity: 0.1 ! important; }
div#logo img:hover { filter: alpha(opacity=100) ! important; opacity: 1 ! important; border: none ! important; }
td.navbar>strong>img { filter: alpha(opacity=10); opacity: 0.1; }
td.navbar>strong>img:hover { filter: alpha(opacity=100); opacity: 1; border: none ! important; }
Click to expand...
 

Similar Threads

Remus Lupin
Neil Gaiman on Colbert
Replies
7
Views
1K
Megaton
Megaton
Remove ads

Top