Forum:CSS code that makes the edit window look like the Fallout 3 terminal screens

Hello,

I just wrote up CSS code that makes the edit window look like the Fallout 3 terminal screens, for anyone who is interested in adding it to their CSS page.

If there is interest in doing it, we could add it to the wiki CSS page, if other people think it would be a good change.

/* - Contributed by Inquisitor Ehrenstein -- */ textarea { background: #0B1907; }   clear: both; color: #82FA58; /* -- */
 * 1) toolbar,
 * 2) wpTextbox1 {

Inquisitor Sasha Ehrenstein aus dem Sturmkrieg Sector (Contributions) (Edit Count) Contact: CW - SK (de) - MW.org 01:43, 17 June 2012 (UTC)


 * Yeah, it's not too bad! It's quite pleasing to the eye surprisingly. Shame about the surrounding area, but I'll see if it grows on me. -- GOTW '''User 17:12, 17 June 2012 (UTC)


 * I actually quite like it, although I am sure the novelty will wear off. But as such I have done a bit of playing around and come up with the following code as a replacement.

body.action-edit textarea#wpTextbox1 { background: url('/images/9/92/Gterminal.png') top center repeat #0B1907; color: #23ff85; font-family: fixedsys, consolas, monospace; font-size: 17px; border: none; padding: 0.1em 0 0 0.1em; }
 * It might be worthy of a gadget just for fun. Works best in FF and, as usual, IE sucks at it. User avatar tag.gifUser Avatar talk.png 19:05, 17 June 2012 (UTC)


 * Yours looks even better. What are FF and IE? Sternkreuz.png Inquisitor Sasha Ehrenstein aus dem Sturmkrieg Sector (Contributions) (Edit Count) Contact: CW - SK (de) - MW.org 21:56, 17 June 2012 (UTC)


 * Firefox and Internet Explorer. User avatar tag.gifUser Avatar talk.png 22:18, 17 June 2012 (UTC)


 * Yeah, this one is pretty impressive too. I don't think the larger text on IE is necessarily a problem, but is there nothing you can do about that? -- GOTW '''User 11:41, 18 June 2012 (UTC)

If anyone has chrome, they can use the following to add scale lines to the edit window. Media used [[Media:Gterminal.png]][[Media:Image.png]]

body.action-edit textarea#wpTextbox1 { background: url('/images/9/92/Gterminal.png') top center repeat #0B1907; color: #23ff85; font-family: fixedsys, consolas, monospace; font-size: 17px; border: none; padding: 0.1em 0 0.1em 0.1em; height: 420px; } body.action-edit textarea#wpTextbox1:before { content: ""; width: 944px; height: 420px; position: absolute; left: 0; background: url('/images/3/34/Image.png') repeat; opacity: 0.4; pointer-events: none; }

12:44, 22 June 2012 (UTC)


 * I've turned a modified version of this into a gadget ("FO3TerminalEditor"). This version should work in all major browsers (Firefox, Chrome, Safari, Opera, Internet Explorer 7+); only IE7 has a little bug where the background graphic scrolls along with the content of the edit window. -- Porter21 (talk) 09:42, 17 July 2012 (UTC)