I think it would benefit all work-using TWW members if we could have the option of making TWW black and white so its not painfully obvious to our passing co-workers that we are on a NCSU message board.

4/8/2009 5:44:52 PM

[new]
[couldn't have gone in the good suggestions thread]

I'm Big Business and i approved this message.

4/8/2009 5:45:22 PM

FF + Greasemonkey + TWW @ Work Script

4/8/2009 8:14:36 PM

i ♥ this thread

4/8/2009 8:15:34 PM

http://tww.e00.us/atwork/
(install Greasemonkey first.)

you can enable/disable it after installation by right-clicking on the little monkey icon in the bottom right corner of the browser window.



i can make new "reply to topic" images and whatnot, or replace them with text links, whatever you guys want... just didn't feel like doing that tonight

4/9/2009 12:49:54 AM

Quote :

"NOT HAPPENING BUDDY"

ncsu=RED

get on any other message board for a college and its the same. well every one in NC is

4/9/2009 12:56:00 AM

^but it's already done.

4/9/2009 12:56:55 AM

Quote :

"DIDN'T READ THREAD"

4/9/2009 12:57:51 AM

Quote :

"BLEW MY MIND"

4/9/2009 1:19:03 AM

Even, this greasemonkey script is awesome, thanks!

4/9/2009 10:11:08 AM

awesome.

uncblue

I'm Big Business and i approved this message.

4/9/2009 10:36:15 AM

That's not the original TWW@Work script in the screenshot up there. I'm still running that OG blue and white script.

[Edited on April 9, 2009 at 2:26 PM. Reason : l]

4/9/2009 2:26:02 PM

how do you change the colors to something other than black?

the red used to hurt my eyes, i've gotten used to it though. the black hurts

[Edited on April 9, 2009 at 3:35 PM. Reason : ]

4/9/2009 3:33:58 PM

^^there was another one? the one in the screenshot is the one i wrote...

^what color would you prefer? i thought about doing shades of gray.

4/9/2009 6:34:42 PM

This is the original one. I don't remember who wrote it originally, but it has been around for years. It's great for me because the colors almost perfectly match my Lotus Notes theme. I like what you did with the logo at the top left evan...I might have to borrow that.

[Edited on April 10, 2009 at 9:46 AM. Reason : l]

4/10/2009 9:21:37 AM

Nice wolf replacement. I'd copy to a more reliable server though:

4/10/2009 9:55:52 AM

Quote :

"// ==UserScript== // @name TWW at Work // @description Create custom styles for TWW to blend into to your corporate intranet! // @namespace http://thalions.com/greasemonkey // @include http://*brentroad.com/* // @include http://*thewolfweb.com/* // ==/UserScript== function addGlobalStyle(css) { var head, style; head = document.getElementsByTagName('head')[0]; if (!head) { return; } style = document.createElement('style'); style.type = 'text/css'; style.innerHTML = css; head.appendChild(style); } // Override the current CSS styles. As is, this only updates the colors and doesn't change anything else about // the style. You can add new styles or override ones found at http://brentroad.com/style.css using the // addGlobalStyle() function. // .button - Buttons, like "Post Reply" addGlobalStyle( ' .button { color: #1A327B; background-color: #CAD4E3; border-color :#0E2774; }' ); // .bar - The main color on the page, like in the main menu bar, and the outer frame around the main tables addGlobalStyle( ' .bar { color: #1A327B; background: #CAD4E3; border: 2px solid #0E2774; }' + ' .bar select { background-color: #CAD4E3; color: #1A327B; }' + ' .bar A:link { color: #1A327B; }' + ' .bar A:visited { color: #1A327B; }' + ' .bar A:hover { color: #FFFFFF; }' ); // .inbar - The inner-main tables, like where the posts are actually listed addGlobalStyle( ' .inbar { border: 1px solid #1A327B; }' + ' .inbar A:link { color: #1A327B; }' + ' .inbar A:visited { color: #1A327B; }' + ' .inbar A:hover { color: #000000; }' ); // .inbar_sel - A selected item in the inbar, like a letter when browsing User names or Photo Galleries addGlobalStyle( ' .inbar_sel { background:#CAD4E3; }' ); // "global links", like for "inbox" and "logout" addGlobalStyle( ' A.normal:link, A.normal:visited { color: #1A327B; }' + ' A.normal:hover { color: #000000; }' ); // Replace the logos with your own pictures function replace_logos() { // insert a custom picture or logo - replace "photos/00003455.jpg" at the end of next line with URL of picture. // If it is in a TWW photo gallery, you can use a relative link starting with "photos/" platypus_do_function(window, 'do_insert_html',document.evaluate('/HTML[1]/BODY[1]/TABLE[1]/TBODY[1]/TR[1]/TD[1]/TABLE[1]/TBODY[1]/TR[1]/TD[2]/A[1]/IMG[1]', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE,null).singleNodeValue,'<td><a href="default.aspx"><img border=0 src="photos/00003455.jpg"></a></td>',false,false); // remove the "The Wolf Web" logo platypus_do_function(window, 'smart_remove',document.evaluate('/HTML[1]/BODY[1]/TABLE[1]/TBODY[1]/TR[1]/TD[1]/TABLE[1]/TBODY[1]/TR[1]/TD[2]/A[1]/IMG[1]', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE,null).singleNodeValue,'null'); // remove the wolf head logo platypus_do_function(window, 'smart_remove',document.evaluate('/HTML[1]/BODY[1]/TABLE[1]/TBODY[1]/TR[1]/TD[1]/TABLE[1]/TBODY[1]/TR[1]/TD[1]', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE,null).singleNodeValue,'null'); // remove ad - turned off by default // platypus_do_function(window, 'smart_remove',document.evaluate('/HTML[1]/BODY[1]/TABLE[1]/TBODY[1]/TR[1]/TD[2]/A[1]/IMG[1]', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE,null).singleNodeValue,'null'); // replace "New" and "Old" icons - you can create a new icons with your desired colors, and upload it. // Note that if it is stored in a TWW gallery, it will be a JPG and not a transparent GIF, as is normally is var images, img; images = document.evaluate( '//img[@src]', document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null); for (var i = 0; i < images.snapshotLength; i++) { img = images.snapshotItem(i); // should probably use regex's here.... oh well if ((img.src == "http://brentroad.com/images/new.gif") || (img.src == "http://www.brentroad.com/images/new.gif") || (img.src == "http://thewolfweb.com/images/new.gif") || (img.src == "http://www.thewolfweb.com/images/new.gif")) { img.src = "photos/00412058.jpg"; // relative URL of new "new" icon } else if ((img.src == "http://brentroad.com/images/old.gif") || (img.src == "http://www.brentroad.com/images/old.gif") || (img.src == "http://thewolfweb.com/images/old.gif") || (img.src == "http://www.thewolfweb.com/images/old.gif")) { img.src = "photos/00412059.jpg"; // relative URL of new "old" icon } } }; // Ends replace_logos window.addEventListener("load", function() { replace_logos() }, false); "

This may or may not work...Anyway, that's the script I use. Save it as twwwork.user.js, install greasemonkey, and load the script with http://*brentroad.com/* and http://*thewolfweb.com* in the "Included Pages" section of greasemonkey.

4/10/2009 10:39:45 AM

Here is a temporary solution I did to replace every image on tww with my own:

var newImageURL = "http://www4.ncsu.edu/~jbtilley/temp/tww/"

function replaceStyleSheet(oldCSS, newCSS) {
    document.evaluate('//link[@rel="stylesheet" and @href="'+oldCSS+'"]', document, null, 
		      XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.href = newCSS;
}

function getImageName(imageURL) {
	var charat = imageURL.lastIndexOf("/")
	return imageURL.substring(charat+1, imageURL.length)
}

replaceStyleSheet("style.css", newImageURL + "myTWWcss.css");

var imgs = document.getElementsByTagName('img');
// Top left
for (i=0;i<imgs.length;i++) {
	imgs[i].src = newImageURL + getImageName(imgs[i].src);
}

http://www4.ncsu.edu/~jbtilley/temp/tww/

http://<tdub>/image/

4/10/2009 12:06:33 PM

Well, I'm glad I tried to include a screenshot, as my javascript replaces all images with ones in the secondary directory - even the ones in posts. I'll have to go back to the drawing board.

Edit. Latest attempt:

var newImageURL = "http://www4.ncsu.edu/~jbtilley/temp/tww/"
var twwImageURL = "http://" + document.domain + "/images/"

function replaceStyleSheet(oldCSS, newCSS) {
    document.evaluate('//link[@rel="stylesheet" and @href="'+oldCSS+'"]', document, null, 
		      XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.href = newCSS;
}

function getImageName(imageURL) {
	var charat = imageURL.lastIndexOf("/")
	return imageURL.substring(charat+1, imageURL.length)
}

replaceStyleSheet("style.css", newImageURL + "myTWWcss.css");

var imgs = document.getElementsByTagName('img');
// Top left
for (i=0;i<imgs.length;i++) {
    if (imgs[i].src.search(twwImageURL) != -1) {
		imgs[i].src = newImageURL + getImageName(imgs[i].src);
	}
}

4/10/2009 12:38:16 PM

that's pretty bad ass

not too crazy about your color choice though

4/10/2009 1:39:38 PM

yeah seriously. why would you possibly use that color

4/10/2009 2:01:55 PM

Yeah, I don't like it either. I'll have to come up with something better - I was just ripping colors and gradients from outlook. I'm not the best good when it comes to graphic design/color scheming.

[Edited on April 10, 2009 at 2:05 PM. Reason : -]

4/10/2009 2:04:42 PM

i like those colors, but have no idea how to do what you said

4/11/2009 6:19:03 PM

lol do you guys really want something that makes it look like a webmail client?

i mean, i'll code up some css to do it... but i don't really see much usefulness in it.

4/12/2009 6:19:50 PM

Quote :

"Well, I'm glad I tried to include a screenshot, as my javascript replaces all images with ones in the secondary directory - even the ones in posts. I'll have to go back to the drawing board."

unfortunately (or fortunately, depending on how you look at it) that replaces smilies as well.

time for some regex, son.

[Edited on April 12, 2009 at 6:24 PM. Reason : also, lol at the locked/new mail icons for new/old]

4/12/2009 6:23:23 PM

^^i share an office, i want it to look as bland and boring as possible

4/12/2009 7:32:28 PM

define "bland" in regards to your request

i consider TWW's design to be fairly bland currently (save for the bright red)

4/12/2009 7:47:33 PM

the colors in jbtilley's and skack's are much less noticeable, the greasemonkey script you have still has bold dark borders that make is stand out

the more it looks like outlook the better

4/12/2009 7:57:24 PM

Quote :

"unfortunately (or fortunately, depending on how you look at it) that replaces smilies as well."

I copied all the images in the tww/images folder, so mine has the smileys. I visited a few pages to make sure I got all the images. There may have been a few I missed.

4/13/2009 7:50:23 AM

i really like those color options. i don't like the stark red or black or any solid color, except for maybe light gray. the fading color looks a little more "professional" and not so HEYLOOKI'MONASITEISHOULDN'TBE!!!!

thanks!

oh, one thing i would change is the unbold the old topics.

[Edited on April 13, 2009 at 8:25 AM. Reason : ]

4/13/2009 8:25:03 AM

hmm...

every once in a while when i click a link or reload, there's a flash of the normal redness for a bit. what's up with that?

4/13/2009 2:02:08 PM

4/14/2009 1:36:02 PM

can someone give me a fairly comprehensive "how to" to run jbtilley's script?

I have greasemonkey and evan's script installed, but i would rather not look at black and white.

4/14/2009 4:09:09 PM

Here's a zip file of all the tww images. In the zip file I have my new versions of the images files and a backup folder with all the old images. It also includes the css file.

http://www4.ncsu.edu/~jbtilley/temp/tww.zip

Extracting this creates a directory called tww with all the relevant files. Copy the contents of this folder up to a host somewhere (I used my unity account - which won't last forever). Then edit the javascript:

var newImageURL = "http://www4.ncsu.edu/~jbtilley/temp/tww/"
var twwImageURL = "http://" + document.domain + "/images/"

function replaceStyleSheet(oldCSS, newCSS) {
    document.evaluate('//link[@rel="stylesheet" and @href="'+oldCSS+'"]', document, null, 
		      XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.href = newCSS;
}

function getImageName(imageURL) {
	var charat = imageURL.lastIndexOf("/")
	return imageURL.substring(charat+1, imageURL.length)
}

replaceStyleSheet("style.css", newImageURL + "myTWWcss.css");

var imgs = document.getElementsByTagName('img');
// Top left
for (i=0;i<imgs.length;i++) {
    if (imgs[i].src.search(twwImageURL) != -1) {
		imgs[i].src = newImageURL + getImageName(imgs[i].src);
	}
}

4/15/2009 9:04:20 AM

Quote :

"Not sure why it's not finding the images for you."

I didn't try the script, my screenshot is from simply turning off the "automatically load images" option in the Options, Content part of Firefox, and then unchecking the 'Let webpages use their own colors' option, and then manually changing the link colors to black and gray

4/15/2009 11:13:50 AM

Nice.

4/15/2009 11:41:13 AM

can't you define a local directory rather than have to host the images (ie. c:\tww)

4/16/2009 12:49:20 AM

sure.

http://en.wikipedia.org/wiki/File_URI_scheme

4/16/2009 1:14:24 AM

it looks like the only problem might be this part

Quote :

"Mozilla browsers refuse to follow file: links on a page that it has fetched with the HTTP protocol, so that the page's own URL is an http: URL. When you click on such a link, nothing happens. The purpose is security: to prevent a remote page from executing a program on the visitor's computer. The file: links work on Mozilla on pages that are local files on the user's disk. Mozilla browsers can be configured to override this security restriction as detailed in Mozillazine's "Links to Local Pages Don't Work""

4/16/2009 2:19:04 AM

hey, it's broken this morning

what is the deal?? i'm gonna have to disable this.

4/16/2009 8:22:25 AM

Quote :

"the more it looks like outlook the better"

4/16/2009 4:49:30 PM

^^Had to re-host the images.

4/16/2009 7:22:46 PM

anyway to use the tww looks like outlook script, without having to hosting, etc.

I mean, I want to click a link, auto install the script, and I'm done.

4/28/2009 6:10:20 PM