# CF Greasemonkey Themes



## mep916

For years, many of us have complained of the look and the layout of the forum. Eventually the site will upgrade to vB4 and, by design, that update will change the look, but in the meantime, we'd like to explore more options via browser plug-ins or anything that allows the end user choice and full customization, without making any changes on the back end. 

In this thread, I'd like users to discuss and offer skins they recommend, where to get them, how to install, customize, etc. Moreover, though, if you have a background in CSS and/or javascript and would like to build some skins specific to CF, that would be AWESOME! 

Apparently you can use Greasemonkey and/or stylist to create the code, or you can download templates. I'm not familiar with coding and only briefly researched before creating this thread, so if I'm missing anything please post your ideas, thoughts, suggestions, etc. Again, we're only looking for skins that can be created and/or implemented by the end user, nothing in the form of vB plug-ins, for example.

Hope all that makes sense. Basically, we want simple skin solutions that work with the forum in a browser add-on/plug-in format. If they exist, post em up. If they don't and you know how to create them, please do.


----------



## Machin3

+1 on this thread, been waiting for this for like 3 years . 

But anyways, I think you really have two options for this:
1.) You can just create a new skin to replace this skin.
-or-
2.) I know VB has an option that allows you to pick and modify their own skins. 

Oh, and one more thing to mention, i've seen this on other forums, there can also be an option where the user scrolls to the bottom and there is a drop down menu with like 5 different styles and the user can choose which ever they want.


----------



## mihir

If I get coding sometime, will try to make something awesome, and also get Kesava's lazy ass into some designing.He has been complaining about the site look for soo loong.


----------



## linkin

The only thing I'd like to see is a fixed-width/centred theme of cofo.


----------



## massahwahl

Long due for an update!  Cant wait to see the new design!


----------



## mep916

Machin3 said:


> +1 on this thread, been waiting for this for like 3 years .
> 
> But anyways, I think you really have two options for this:
> 1.) You can just create a new skin to replace this skin.
> -or-
> 2.) I know VB has an option that allows you to pick and modify their own skins.
> 
> Oh, and one more thing to mention, i've seen this on other forums, there can also be an option where the user scrolls to the bottom and there is a drop down menu with like 5 different styles and the user can choose which ever they want.



Again, for the purposes of this thread, we're not discussing anything in the form of vB plug-ins. I'd like to see if we can accomplish this in the form of browser plug-ins. What you've mentioned is true, and perhaps one day we'll make some of these options available.

Our goal is to give everyone the opportunity to collaborate on different designs and share them with each other. Browser plug-ins allow for more customization and creativity than what's built into the vB stuff. 




mihir said:


> If I get coding sometime, will try to make something awesome, and also get Kesava's lazy ass into some designing.He has been complaining about the site look for soo loong.



Plenty of people have complained of the look. On the flip side, many users are happy with it. For those of you that don't like it, if you want to take the time to browse through some templates or learn how to write these scripts, you can find a theme you're happy with and share it with everyone else! That's the idea here anyway.


----------



## NyxCharon

I've themed some stuff with greasemonkey before. I'll mess around with it for this if I get the chance.

Just a fyi, my themes will probably be dark, minimlast ones, if i actually make any.


----------



## salvage-this

NyxCharon said:


> I've themed some stuff with greasemonkey before. I'll mess around with it for this if I get the chance.
> 
> Just a fyi, my themes will probably be dark, minimlast ones, if i actually make any.



+1  That is what I like about the current theme.  Does not get in the way.  Not too flashy.  Easy to look at for a while.  Too many forums are hard on the eyes.


----------



## Troncoso

I definitely think we need a new modern theme, not necessarily more colorful or flashy though

edit: And I just realized in 9 posts that no one has come up with an idea


----------



## mep916

I've been told by cromewell that we may be limited to changes in only color and fonts, due to the way things are coded in the vB software. Still, that's fine. We need sheets that work in both FF on Chrome. I'm not really concerned with IE tbh.


----------



## BlownFiveLiter

I have a vB3 license that I can play with some styles and let you check them out, if you'd like?  There's a million free styles available, but there's next to no consistency between any of them, if say you wanted to have a light style similar to this, and a dark style for those with light sensitive eyes.  If I get a chance today, I'll play around with some in a test forum on my laptop, otherwise I definitely can tomorrow.


----------



## mep916

BlownFiveLiter said:


> I have a vB3 license that I can play with some styles and let you check them out, if you'd like?  There's a million free styles available, but there's next to no consistency between any of them, if say you wanted to have a light style similar to this, and a dark style for those with light sensitive eyes.  If I get a chance today, I'll play around with some in a test forum on my laptop, otherwise I definitely can tomorrow.



Right now I'm only interested in scripts that can be installed using a browser plug-in, like what I've outlined in my OP. If that's what you have in mind, that's great, go for it. Otherwise don't bother. ian has a license and access to all that. 

The goal of this thread is to avoid forum wide changes that will affect all users. I'd just like to see a few examples posted and go from there. If I have time today, I'll try to produce one myself.


----------



## Geoff

Not related, but you should implement an Android app for CF.


----------



## mep916

[-0MEGA-];1693092 said:
			
		

> Not related, but you should implement an Android app for CF.



we might install tapatalk and/or forumrunner at some point


----------



## BlownFiveLiter

mep916 said:


> Right now I'm only interested in scripts that can be installed using a browser plug-in, like what I've outlined in my OP. If that's what you have in mind, that's great, go for it. Otherwise don't bother. ian has a license and access to all that.
> 
> The goal of this thread is to avoid forum wide changes that will affect all users. I'd just like to see a few examples posted and go from there. If I have time today, I'll try to produce one myself.



The beauty of having multiple skins is that they could choose which skins they wanted to use, or it could also be limited by usergroup (vBulletin.org mod).  I'm not really sure how to accomplish a change like that otherwise.  It's well beyond my abilities.


----------



## Motorcharge

mep916 said:


> I've been told by cromewell that we may be limited to changes in only color and fonts, due to the way things are coded in the vB software. Still, that's fine. We need sheets that work in both FF on Chrome. I'm not really concerned with IE tbh.



You're only limited if whoever is in charge doesn't feel like individually editing each theme with consistent images and the like.

I can understand not changing the default for everyone, but frankly I've never understood why any forum limits everyone to the default as the only option. Who care's what other people use on their end? 

Frankly I hate light forum themes, I can't stand stand anything that's not a black or dark grey background with white font. Just personal preference. Not to keep complaining, but it is sort of annoying how stubborn this site is against updating and changing. The community here is great and why I keep coming back, but the site itself feels like it's stuck in 1998. I remember signing up and almost not coming back because I thought it was an old, dead site. I know it's Ian's forum, and I respect that and try not to complain unless the topic is already being discussed.


----------



## jonnyp11

i'm fine with the look but i agree that options would be nice, although motor's emo/goth themes may be a little too much  which considering i would like those more i can't say much. it is a very old and bland styling atm.


----------



## Motorcharge

jonnyp11 said:


> i'm finw with the look but i agree that options would be nice, although motors emo/goth themes may be a little too much  which considering i would like those more i can't say much



It's neither, I've just always prefered darker themes. Staring at a bright screen hurts my eyes, esp if I dont have a light on in the room, even on non-CRT screens. I just don't get the point in limiting people from having a color scheme that suites them on their end. It's certainly not limited to this site.

If someone want's hot pink text on a purple background, who cares if it's on their end? I certainly understand not having it as the default though.


----------



## jonnyp11

you'd think their'd be a simple app or something for this stuff since so many people use this layout, then it would just change the values on the bits of coding for the colors, doesn't sound like a hard task really, but i'm sure there's more to it than that.


----------



## Motorcharge

There are tons of themes already that can be installed, it's simply a matter of installing them and allowing permissions for users to change them from the control panel. 

Only issue, and it's kinda minor since it only effects user end, is that things like the banner, images, ect have to be customized for each theme.

For example, this image would have to be set for each individual theme if you couldn't set it via an image set.


----------



## mep916

BlownFiveLiter said:


> The beauty of having multiple skins is that they could choose which skins they wanted to use



ffs yes thanks for pointing that out



Motorcharge said:


> You're only limited if whoever is in charge doesn't feel like individually editing each theme with consistent images and the like.





Motorcharge said:


> There are tons of themes already that can be installed, it's simply a matter of installing them and allowing permissions for users to change them from the control panel.



Cromewell and kobaj are working on greasemonkey code as I write this post and I'm optimistic that we'll have a solution as outlined itt. Ian has run vB forums for years, he's well aware of multiple skin mods, so if he hasn't yet installed them, he has his reasons. Instead of scratching my head and trying to figure out WHY we don't have a vB multiple skin option, I came up with this idea. Hopefully it will work out. 

Nothing needs to be installed on the forum. For those that like the current theme, it stays. For those of you that don't like the greasemonkey skins that are provided, I'm hoping we can provide a code template that will allow you to enter in the changes you want, all with how-to instructions so little effort is required on the end-user side.


----------



## NVX_185

Whatever theme we end up with, PLEASE keep the X-Blade case in the banner.  Am I only the only one on this forum that still has that case... In good condition too?


----------



## kobaj

Well dunno how much Cromewell has accomplished but here is a basic color/theme selector for CoFo that I wrote up. It uses GreaseMonkey and as far as I know, only works on Firefox 7 thus far.

Anyway, with the script installed you can scroll to the bottom of the CoFo home page where you will find a drop down selection box on the left. There you can select which color/theme you want cofo to have (currently only two black and white). 

Its really proof of concept and is very basic, but would be extremely easy to expand to include other changes (fonts, spaceing, backgrounds, images, anything) to make a real color/theme selector.

But I don't really have the time. Maybe in a week or two, or if Cromewell wants to work on it or something.


----------



## Cromewell

Yeah, I'll probably expand on what you have so that it handles the various fonts that become hard to read as you adjust the colors (mainly when going to white).

It's also possible to change the colors around this editor box and all the buttons on it. I was fiddling around with a lot of stuff, somethings don't like to change though.


----------



## mep916

I'm offering VIP membership to those that can assist with this project. Kobaj seems to think our goal here is super easy to reach. If you you know some js, please contribute your time and help out the forum. We want multiple skins in the dropdown menu.


----------



## johnb35

Oh, and by the way, he'll also offer VIP status to anyone that can do skins for IE users!!!  HINT HINT.  Don't make me switch my broswer.  IE does great for me. lol


----------



## Cromewell

Greasemonkey can be made to work in IE (partially anyway). Trixie hasn't been updated since 2005 though so some newer features are likely missing. http://www.bhelpuri.net/Trixie/


----------



## Troncoso

I'd like to help. I'm gonna go learn JavaScript. Be right back.


----------



## kobaj

Just wanted to give you guys a taste of whats coming up from me. 

Do note: this is not representative of the final product or themes. I'll have this released to CoFo within a few days. If you want a theme but don't know jack about code, read the paragraph after the picture.

Click for Big




Said paragraph:
With my plugin its rather easy to set background colors, font/text colors, and link colors. The thing is, I don't know what themes you guys want! So tell me! If you know code, you can just look at the plugin (when it is released!) and change it appropriately (I think you may need to give me the code you change so I can re upload it? but I digress) 

If you don't know code take a screenshot of the forums, use paint/gimp/photoshop whatever to fill in what colors you want and where. Even if its not a background/font/link like I listed above, just about anything else is changeable (ie, borders, text areas). Images might be a bit tricky to replace, but doable.

Let me know what you guys want/think.


----------



## mep916

Thanks kobaj. We really appreciate the work so far. This is exactly what I had in mind. If we don't receive any requests for specific color schemes, go with maybe two light and two dark schemes? Pick whatever YOU like. I'm actually among the crowd that is happy with the color scheme, but I'd like to satisfy those that want choice or something different. 

Please post some suggestions people! If you've complained about the colors in the past, let this man know what you want.


----------



## Troncoso

kobaj said:


> Just wanted to give you guys a taste of whats coming up from me.
> 
> Do note: this is not representative of the final product or themes. I'll have this released to CoFo within a few days. If you want a theme but don't know jack about code, read the paragraph after the picture.
> 
> Click for Big
> 
> 
> 
> 
> Said paragraph:
> With my plugin its rather easy to set background colors, font/text colors, and link colors. The thing is, I don't know what themes you guys want! So tell me! If you know code, you can just look at the plugin (when it is released!) and change it appropriately (I think you may need to give me the code you change so I can re upload it? but I digress)
> 
> If you don't know code take a screenshot of the forums, use paint/gimp/photoshop whatever to fill in what colors you want and where. Even if its not a background/font/link like I listed above, just about anything else is changeable (ie, borders, text areas). Images might be a bit tricky to replace, but doable.
> 
> Let me know what you guys want/think.



I enjoy this theme, though I would say the black text on grey may be hard on some eyes, including my own.


----------



## mep916

Troncoso said:


> I enjoy this theme, though I would say the black text on grey may be hard on some eyes, including my own.



We're going to have multiple skins. Please be specific and tell him what colors you would prefer.


----------



## Troncoso

mep916 said:


> We're going to have multiple skins. Please be specific and tell him what colors you would prefer.



Haha, I really like the one he posted, the only thing I would change is make the black text a lighter color. Though, after taking a second look, the text is fine except for the sub forum titles. How about something like this:






Just changed the sub forum title back color, but I think it makes it easier to read


----------



## jonnyp11

i think many people's issues are less with the colors and more with the bland old theme. this theme reminds me of win98 or 2000, idk, but it's so boring really.


----------



## kobaj

You want your themes? Come and get it! I've included three of my own personal ideas, called Dark, White, and Invert. Check out the screenshots below. In order to use these (fully functioning in firefox 7 and Chrome) themes with CoFo Simply install GreaseMonkey plugin and then install my ColorChange plugin.

If you want me to make you a theme. Take a screenshot of the forums, and color it how you want (links, backgrounds, borders, etc) upload it and post it here. I'll try to get your custom theme made for you asap (it really takes about 5 minutes) and upload it for you and everyone to enjoy!

Dark





Invert





White





(Big Here.)


----------



## Troncoso

GAAHHH!!! I wish this was for Chrome!!! I love it!!! The only thing that isn't so cool is the reply box. It looks very out of place.

Edit: And actually, when you post a reply, it shows up in the original CF theme. You have to refresh it for it to look normal


----------



## kobaj

Troncoso said:


> GAAHHH!!! I wish this was for Chrome!!! I love it!!! The only thing that isn't so cool is the reply box. It looks very out of place.
> 
> Edit: And actually, when you post a reply, it shows up in the original CF theme. You have to refresh it for it to look normal



Took a few edits, but it now works in Chrome! You don't even need greasemonkey. Just head straight to the userscripts page and install my ColorChange plugin!

Proof.





As for the editbox. That is considered a proprietary object. I could change it, but none of the buttons would match and formatting would be a nightmare. See image below. If you still want it a different color/to match, let me know and I'll make you a theme, but otherwise it will go unchanged in all the other themes . EDIT: Unless EVERYONE wants the edit box to match the theme. Then I will change it to be as such.

Yep.


----------



## Troncoso

Haha, It's not a deal breaker, I was just pointing that out. It still looks really good.

The only other problem I see is that new posts show up as the old theme, like this:


----------



## kobaj

Troncoso said:


> Haha, It's not a deal breaker, I was just pointing that out. It still looks really good.
> 
> The only other problem I see is that new posts show up as the old theme, like this:
> *snip*



All it takes is a refresh of the display, 
To make the ajax go away, 
Try it real quick
You'll see its slick
and my theme appears to fix the day!


----------



## Troncoso

kobaj said:


> All it takes is a refresh of the display,
> To make the ajax go away,
> Try it real quick
> You'll see its slick
> and my theme appears to fix the day!



Yeah, I know a refresh fixes it, I was just giving feedback. Haha.


----------



## mihir

Ok so how do I begin with this, is there a tutorial or something which I can follow.
I checked out kobaj's code.
Like in the code below how do I know the class names and other stuff?
Thanks 

Feedback: I like the black one but the text boxes feel weird otherwise everything else looks fine 


		Code:
	

 // ==UserScript==
// @name Change Color
// @namespace com.kobaj
// @description Change the Color of CoFo
// @include http://www.computerforum.com*
// ==/UserScript==

var numberofthemes = 4;

//TODO
//get and set link colors
//get and set post box/comment box.

//dun touch this
//********************************//
var options = [];
for (var i = 0; i < numberofthemes; i++)
{
	options = options.concat(document.createElement('option'));
}

//overview
//********************************//
//name of your theme 

options[0].innerHTML = "Dark";
options[1].innerHTML = "White";
options[2].innerHTML = "default";
options[3].innerHTML = "Invert";

//********************************//
//specials
var smallfontText = ["#ffffff", "#000000", "", "#ffffff"];
var timeText = ["#ffffff", "#000000", "", "#ffffff"];

var tborderColor = ["#000000", "#000000", "", "#ffffff"];


//********************************//
//quickreply

var panelSurroundColor = ["#555555", "#ffffff", "", "#000000"];
var panelColor = ["#555555", "#ffffff", "", "#111111"];

//********************************//
//tcat 

var tcatColor = ["#222222", "#ffffff", "", "#202020"];
var tcatText = ["#ffffff", "#000000", "", "#ffffff"];

//********************************//
//.alt2 .alt2active #headerbar

var alt2Color = ["#444444", "#ffffff", "", "#0E0E0E"];
var alt2Text = ["#ffffff", "#000000", "", "#ffffff"];

//********************************//
//alt1 alt1active

var alt1Color = ["#666666", "#ffffff", "", "#000000"];
var alt1Text = ["#ffffff", "#000000", "", "#ffffff"];

//********************************//
//page body

var pageColor = ["#888888", "#ffffff", "", "#333333"];
var pageText = ["#ffffff", "#000000", "", "#ffffff"];

//********************************//
//thead bands of color

var prefColor = ["#000000", "#ffffff", "", "#E0A22E"];
var prefText = ["#ffffff", "#000000", "", "#ffffff"];

//put it all together!
//********************************//

var thead = document.getElementsByClassName('thead');
var tfeet = document.getElementsByClassName('tfoot');
var vbmenu_control = document.getElementsByClassName('vbmenu_control');

var tcat = document.getElementsByClassName('tcat');

var alt2 = document.getElementsByClassName('alt2');
var alt2active = document.getElementsByClassName('alt2Active'); 
var headerbar = document.getElementById('headerbar'); 

var alt1 = document.getElementsByClassName('alt1');
var alt1active = document.getElementsByClassName('alt1Active');

var page = document.getElementsByClassName('page');

var panelSurround = document.getElementsByClassName('panelsurround');
var panel = document.getElementsByClassName('panel');

var smallfont = document.getElementsByClassName('smallfont');
var time = document.getElementsByClassName('time');

var tborder = document.getElementsByClassName('tborder');

//links

//functions
//********************************//
var index = 0;

function ChangeBackgroundColors(elementsT, inputColor)
{
	var i=0;
	for (i=0;i<elementsT.length;i++)
	{
		elementsT[i].style.setProperty("background", inputColor, "important");
	}
	return;
}

function ChangeTextColors(elementsT, inputColor)
{
	for(var i = 0; i < elementsT.length; i++)
	{
		elementsT[i].style.setProperty("color", inputColor, "important");
	}
	return;
}


function SetAllBackgrounds()
{
	ChangeBackgroundColors(thead, prefColor[index]);
	ChangeBackgroundColors(tfeet, prefColor[index]);
	ChangeBackgroundColors(vbmenu_control, prefColor[index]);
	
	ChangeBackgroundColors(tcat, tcatColor[index]);
	
	ChangeBackgroundColors(alt2, alt2Color[index]);
	ChangeBackgroundColors(alt2active, alt2Color[index]);
	//ChangeBackgroundColors(headerbar, alt2Color[index]);
	headerbar.style.setProperty("background", alt2Color[index], "important");
	
	ChangeBackgroundColors(alt1, alt1Color[index]);
	ChangeBackgroundColors(alt1active, alt1Color[index]);
	
	ChangeBackgroundColors(page, pageColor[index]);
	//ChangeBackgroundColors(document.body, pageColor[index]);
	document.body.style.setProperty("background", pageColor[index], "important");
	
	ChangeBackgroundColors(panelSurround, panelSurroundColor[index]);
	ChangeBackgroundColors(panel, panelColor[index]);
	
	ChangeBackgroundColors(tborder, tborderColor[index]);
}

function SetAllText()
{
	ChangeTextColors(thead, prefText[index]);
	ChangeTextColors(tfeet, prefText[index]);
	ChangeTextColors(vbmenu_control, prefText[index]);
	
	ChangeTextColors(tcat, tcatText[index]);
	
	ChangeTextColors(alt2, alt2Text[index]);
	ChangeTextColors(alt2active, alt2Text[index]);
	headerbar.style.setProperty("color", alt2Text[index], "important");
	
	ChangeTextColors(alt1, alt1Text[index]);
	ChangeTextColors(alt1active, alt1Text[index]);
	
	ChangeTextColors(page, pageColor[index]);
	document.body.style.setProperty("color", pageText[index], "important");
	
	ChangeTextColors(smallfont, smallfontText[index]);
	ChangeTextColors(time, timeText[index]);
	
	//and just about the worst way to handle link color. Oh well.	
	var links = document.getElementsByTagName( 'a' );
	for ( var i = 0; i < links.length; i++ ) 
	{
        links[i].style.color = pageText[index];
    }
}

function SetTThings()
{
	SetAllBackgrounds();
	SetAllText();	
}

GetState();

SetTThings();

//********************************//
//DropDownMenu

var selectionBox = document.createElement('select');

function OnChange()
{
  var myIndex  = selectionBox.selectedIndex;
  //var selValue = selectionBox.options[myIndex].value;
  index = myIndex;
  SetTThings();
  SaveState();
}

selectionBox.name = "ColorChooser";
selectionBox.addEventListener("change", function(e){OnChange()},false);

for(var i = 0; i<options.length;i++)
{
	selectionBox.appendChild(options[i]);
}

document.body.appendChild(selectionBox);

//********************************//
//save state

function SaveState()
{
	GM_setValue("cofoColorChoice2",index);
}

function GetState()
{
	index = GM_getValue("cofoColorChoice2");
	if(index == null)
	{
		index = 0;
	}
	
	options[index].selected = "selected";
}


----------



## kobaj

mihir said:


> Ok so how do I begin with this, is there a tutorial or something which I can follow.
> I checked out kobaj's code.
> Like in the code below how do I know the class names and other stuff?
> Thanks
> 
> Feedback: I like the black one but the text boxes feel weird otherwise everything else looks fine



This should help you out with class names.


----------



## mihir

Thanks


----------



## mep916

kobaj, we can't make any changes to the images, aside from removing them, is that correct? so no color changes or anything like that?


----------



## mihir

I think we can.
Try running this script



		PHP:
	

// ==UserScript==
// @name Change Color
// @namespace com.kobaj
// @description Change the Color of CoFo
// @include http://www.computerforum.com*
// ==/UserScript==

var numberofthemes = 4;
var images = document.getElementsByTagName ("img");
var x =0;
while(x<2)
{
	images[x].src = "http://s3.amazonaws.com/files.posterous.com/temp-2011-04-14/zptxFBfswmDIGruppDJGhtxkmEDIzbksvxlfzrxkenhsgdoopGseqJtalkbn/done.png.scaled500.png?AWSAccessKeyId=AKIAJFZAE65UYRT34AOQ&Expires=1320080554&Signature=%2FRgkE9LVptY2BSI2XBs34QwFiLA%3D";
	x=x+1;
}

//TODO
//get and set link colors
//get and set post box/comment box.

//dun touch this
//********************************//
var options = [];
for (var i = 0; i < numberofthemes; i++)
{
	options = options.concat(document.createElement('option'));
}

//overview
//********************************//
//name of your theme 

options[0].innerHTML = "Dark";
options[1].innerHTML = "White";
options[2].innerHTML = "default";
options[3].innerHTML = "Invert";

//********************************//
//specials
var smallfontText = ["#ffffff", "#000000", "", "#ffffff"];
var timeText = ["#ffffff", "#000000", "", "#ffffff"];

var tborderColor = ["#000000", "#000000", "", "#ffffff"];


//********************************//
//quickreply

var panelSurroundColor = ["#555555", "#ffffff", "", "#000000"];
var panelColor = ["#555555", "#ffffff", "", "#111111"];

//********************************//
//tcat 

var tcatColor = ["#222222", "#ffffff", "", "#202020"];
var tcatText = ["#ffffff", "#000000", "", "#ffffff"];

//********************************//
//.alt2 .alt2active #headerbar

var alt2Color = ["#444444", "#ffffff", "", "#0E0E0E"];
var alt2Text = ["#ffffff", "#000000", "", "#ffffff"];

//********************************//
//alt1 alt1active

var alt1Color = ["#666666", "#ffffff", "", "#000000"];
var alt1Text = ["#ffffff", "#000000", "", "#ffffff"];

//********************************//
//page body

var pageColor = ["#888888", "#ffffff", "", "#333333"];
var pageText = ["#ffffff", "#000000", "", "#ffffff"];

//********************************//
//thead bands of color

var prefColor = ["#000000", "#ffffff", "", "#E0A22E"];
var prefText = ["#ffffff", "#000000", "", "#ffffff"];

//put it all together!
//********************************//

var thead = document.getElementsByClassName('thead');
var tfeet = document.getElementsByClassName('tfoot');
var vbmenu_control = document.getElementsByClassName('vbmenu_control');

var tcat = document.getElementsByClassName('tcat');

var alt2 = document.getElementsByClassName('alt2');
var alt2active = document.getElementsByClassName('alt2Active'); 
var headerbar = document.getElementById('headerbar'); 

var alt1 = document.getElementsByClassName('alt1');
var alt1active = document.getElementsByClassName('alt1Active');

var page = document.getElementsByClassName('page');

var panelSurround = document.getElementsByClassName('panelsurround');
var panel = document.getElementsByClassName('panel');

var smallfont = document.getElementsByClassName('smallfont');
var time = document.getElementsByClassName('time');

var tborder = document.getElementsByClassName('tborder');

//links

//functions
//********************************//
var index = 0;

function ChangeBackgroundColors(elementsT, inputColor)
{
	var i=0;
	for (i=0;i<elementsT.length;i++)
	{
		elementsT[i].style.setProperty("background", inputColor, "important");
	}
	return;
}

function ChangeTextColors(elementsT, inputColor)
{
	for(var i = 0; i < elementsT.length; i++)
	{
		elementsT[i].style.setProperty("color", inputColor, "important");
	}
	return;
}


function SetAllBackgrounds()
{
	ChangeBackgroundColors(thead, prefColor[index]);
	ChangeBackgroundColors(tfeet, prefColor[index]);
	ChangeBackgroundColors(vbmenu_control, prefColor[index]);
	
	ChangeBackgroundColors(tcat, tcatColor[index]);
	
	ChangeBackgroundColors(alt2, alt2Color[index]);
	ChangeBackgroundColors(alt2active, alt2Color[index]);
	//ChangeBackgroundColors(headerbar, alt2Color[index]);
	headerbar.style.setProperty("background", alt2Color[index], "important");
	
	ChangeBackgroundColors(alt1, alt1Color[index]);
	ChangeBackgroundColors(alt1active, alt1Color[index]);
	
	ChangeBackgroundColors(page, pageColor[index]);
	//ChangeBackgroundColors(document.body, pageColor[index]);
	document.body.style.setProperty("background", pageColor[index], "important");
	
	ChangeBackgroundColors(panelSurround, panelSurroundColor[index]);
	ChangeBackgroundColors(panel, panelColor[index]);
	
	ChangeBackgroundColors(tborder, tborderColor[index]);
}

function SetAllText()
{
	ChangeTextColors(thead, prefText[index]);
	ChangeTextColors(tfeet, prefText[index]);
	ChangeTextColors(vbmenu_control, prefText[index]);
	
	ChangeTextColors(tcat, tcatText[index]);
	
	ChangeTextColors(alt2, alt2Text[index]);
	ChangeTextColors(alt2active, alt2Text[index]);
	headerbar.style.setProperty("color", alt2Text[index], "important");
	
	ChangeTextColors(alt1, alt1Text[index]);
	ChangeTextColors(alt1active, alt1Text[index]);
	
	ChangeTextColors(page, pageColor[index]);
	document.body.style.setProperty("color", pageText[index], "important");
	
	ChangeTextColors(smallfont, smallfontText[index]);
	ChangeTextColors(time, timeText[index]);
	
	//and just about the worst way to handle link color. Oh well.	
	var links = document.getElementsByTagName( 'a' );
	for ( var i = 0; i < links.length; i++ ) 
	{
        links[i].style.color = pageText[index];
    }
}

function SetTThings()
{
	SetAllBackgrounds();
	SetAllText();	
}

GetState();

SetTThings();

//********************************//
//DropDownMenu

var selectionBox = document.createElement('select');

function OnChange()
{
  var myIndex  = selectionBox.selectedIndex;
  //var selValue = selectionBox.options[myIndex].value;
  index = myIndex;
  SetTThings();
  SaveState();
}

selectionBox.name = "ColorChooser";
selectionBox.addEventListener("change", function(e){OnChange()},false);

for(var i = 0; i<options.length;i++)
{
	selectionBox.appendChild(options[i]);
}

document.body.appendChild(selectionBox);

//********************************//
//save state

function SaveState()
{
	GM_setValue("cofoColorChoice2",index);
}

function GetState()
{
	index = GM_getValue("cofoColorChoice2");
	if(index == null)
	{
		index = 0;
	}
	
	options[index].selected = "selected";
}



Just added this part 

*var images = document.getElementsByTagName ("img");
var x =0;
while(x<2)
{
	images[x].src = "http://s3.amazonaws.com/files.posterous.com/temp-2011-04-14/zptxFBfswmDIGruppDJGhtxkmEDIzbksvxlfzrxkenhsgdoopGseqJtalkbn/done.png.scaled500.png?AWSAccessKeyId=AKIAJFZAE65UYRT34AOQ&Expires=1320080554&Signature=%2FRgkE9LVptY2BSI2XBs34QwFiLA%3D";
	x=x+1;
}*

We can just set the if condition for every image in order we need to change.

*Check the Cofo Logo*


----------



## Cromewell

mep916 said:


> kobaj, we can't make any changes to the images, aside from removing them, is that correct? so no color changes or anything like that?



The buttons around the edit box are changable. But the rest probably not. edit: imagebutton is the class you want to change


----------



## Cromewell

Code:
	

// ==UserScript==
// @name Change Color
// @namespace com.kobaj
// @description Change the Color of CoFo
// @include http://www.computerforum.com*
// ==/UserScript==

var numberofthemes = 4;

//TODO
//get and set link colors
//get and set post box/comment box.

//dun touch this
//********************************//
var options = [];
for (var i = 0; i < numberofthemes; i++)
{
    options = options.concat(document.createElement('option'));
}

//overview
//********************************//
//name of your theme 

options[0].innerHTML = "Dark";
options[1].innerHTML = "White";
options[2].innerHTML = "default";
options[3].innerHTML = "Invert";

//********************************//
//specials
var smallfontText = ["#ffffff", "#000000", "", "#ffffff"];
var timeText = ["#ffffff", "#000000", "", "#ffffff"];

var tborderColor = ["#000000", "#000000", "", "#ffffff"];


//********************************//
//quickreply

var panelSurroundColor = ["#555555", "#ffffff", "", "#000000"];
var panelColor = ["#555555", "#ffffff", "", "#111111"];

//********************************//
//vbulletin_editor
var editorPanelColor = ["#333333", "#ffffff", "", "#000000"];

//********************************//
//tcat 

var tcatColor = ["#222222", "#ffffff", "", "#202020"];
var tcatText = ["#ffffff", "#000000", "", "#ffffff"];

//********************************//
//.alt2 .alt2active #headerbar

var alt2Color = ["#444444", "#ffffff", "", "#0E0E0E"];
var alt2Text = ["#ffffff", "#000000", "", "#ffffff"];

//********************************//
//alt1 alt1active

var alt1Color = ["#666666", "#ffffff", "", "#000000"];
var alt1Text = ["#ffffff", "#000000", "", "#ffffff"];

//********************************//
//page body

var pageColor = ["#888888", "#ffffff", "", "#333333"];
var pageText = ["#ffffff", "#000000", "", "#ffffff"];

//********************************//
//thead bands of color

var prefColor = ["#000000", "#ffffff", "", "#E0A22E"];
var prefText = ["#ffffff", "#000000", "", "#ffffff"];

//put it all together!
//********************************//

var thead = document.getElementsByClassName('thead');
var tfeet = document.getElementsByClassName('tfoot');
var vbmenu_control = document.getElementsByClassName('vbmenu_control');

var tcat = document.getElementsByClassName('tcat');

var alt2 = document.getElementsByClassName('alt2');
var alt2active = document.getElementsByClassName('alt2Active'); 
var headerbar = document.getElementById('headerbar'); 

var alt1 = document.getElementsByClassName('alt1');
var alt1active = document.getElementsByClassName('alt1Active');

var page = document.getElementsByClassName('page');

var panelSurround = document.getElementsByClassName('panelsurround');
var panel = document.getElementsByClassName('panel');

var smallfont = document.getElementsByClassName('smallfont');
var time = document.getElementsByClassName('time');

var tborder = document.getElementsByClassName('tborder');

var vbEditor = document.getElementsByClassName('vBulletin_editor');
var vbEditorButtons = document.getElementsByClassName('imagebutton');

//links

//functions
//********************************//
var index = 0;

function ChangeBackgroundColors(elementsT, inputColor)
{
    var i=0;
    for (i=0;i<elementsT.length;i++)
    {
        elementsT[i].style.setProperty("background", inputColor, "important");
    }
    return;
}

function ChangeTextColors(elementsT, inputColor)
{
    for(var i = 0; i < elementsT.length; i++)
    {
        elementsT[i].style.setProperty("color", inputColor, "important");
    }
    return;
}


function SetAllBackgrounds()
{
    ChangeBackgroundColors(thead, prefColor[index]);
    ChangeBackgroundColors(tfeet, prefColor[index]);
    ChangeBackgroundColors(vbmenu_control, prefColor[index]);
    
    ChangeBackgroundColors(tcat, tcatColor[index]);
    
    ChangeBackgroundColors(alt2, alt2Color[index]);
    ChangeBackgroundColors(alt2active, alt2Color[index]);
    //ChangeBackgroundColors(headerbar, alt2Color[index]);
    headerbar.style.setProperty("background", alt2Color[index], "important");
    
    ChangeBackgroundColors(alt1, alt1Color[index]);
    ChangeBackgroundColors(alt1active, alt1Color[index]);
    
    ChangeBackgroundColors(page, pageColor[index]);
    //ChangeBackgroundColors(document.body, pageColor[index]);
    document.body.style.setProperty("background", pageColor[index], "important");
    
    ChangeBackgroundColors(panelSurround, panelSurroundColor[index]);
    ChangeBackgroundColors(panel, panelColor[index]);
    
    ChangeBackgroundColors(tborder, tborderColor[index]);
	
	ChangeBackgroundColors(vbEditor, editorPanelColor[index]);
	ChangeBackgroundColors(vbEditorButtons, editorPanelColor[index]);
}

function SetAllText()
{
    ChangeTextColors(thead, prefText[index]);
    ChangeTextColors(tfeet, prefText[index]);
    ChangeTextColors(vbmenu_control, prefText[index]);
    
    ChangeTextColors(tcat, tcatText[index]);
    
    ChangeTextColors(alt2, alt2Text[index]);
    ChangeTextColors(alt2active, alt2Text[index]);
    headerbar.style.setProperty("color", alt2Text[index], "important");
    
    ChangeTextColors(alt1, alt1Text[index]);
    ChangeTextColors(alt1active, alt1Text[index]);
    
    ChangeTextColors(page, pageColor[index]);
    document.body.style.setProperty("color", pageText[index], "important");
    
    ChangeTextColors(smallfont, smallfontText[index]);
    ChangeTextColors(time, timeText[index]);
    
    //and just about the worst way to handle link color. Oh well.    
    var links = document.getElementsByTagName( 'a' );
    for ( var i = 0; i < links.length; i++ ) 
    {
        links[i].style.color = pageText[index];
    }
}

function SetTThings()
{
    SetAllBackgrounds();
    SetAllText();    
}

GetState();

SetTThings();

//********************************//
//DropDownMenu

var selectionBox = document.createElement('select');

function OnChange()
{
  var myIndex  = selectionBox.selectedIndex;
  //var selValue = selectionBox.options[myIndex].value;
  index = myIndex;
  SetTThings();
  SaveState();
}

selectionBox.name = "ColorChooser";
selectionBox.addEventListener("change", function(e){OnChange()},false);

for(var i = 0; i<options.length;i++)
{
    selectionBox.appendChild(options[i]);
}

document.body.appendChild(selectionBox);

//********************************//
//save state

function SaveState()
{
    GM_setValue("cofoColorChoice2",index);
}

function GetState()
{
    index = GM_getValue("cofoColorChoice2");
    if(index == null)
    {
        index = 0;
    }
    
    options[index].selected = "selected";
}


Changes the editor box and buttons around it. The smiley faces aren't fully transparent around the borders, and there is a mouse over which changes the button color that I haven't found yet.

edit: It looks like the mouseover function is firing in vbulletin_global.js but it is a minimized script and my tidy program isn't working on it. Will try updating it later.


----------



## kobaj

mep916 said:


> kobaj, we can't make any changes to the images, aside from removing them, is that correct? so no color changes or anything like that?



They can be changed, see Mihir's post. The only caveat is that the image you want to replace with must be hosted somewhere.



Cromewell said:


> *snip*



I've uploaded your edit/post/comment/whateveritscalled/box code to the userscript page. I spent about an hour trying to get the dang boxes to change box to the background color after mouseover and was unsuccessful. I'll leave that up to you. I found a few other bugs I need to get myself anyway.


----------



## mihir

kobaj said:


> They can be changed, see Mihir's post. The only caveat is that the image you want to replace with must be hosted somewhere.



They can be hosted on the CoFo server itself I guess.



kobaj said:


> I've uploaded your edit/post/comment/whateveritscalled/box code to the userscript page. I spent about an hour trying to get the dang boxes to change box to the background color after mouseover and was unsuccessful. I'll leave that up to you. I found a few other bugs I need to get myself anyway.



I found when you edit a post, it loses the color scheme after you save it.


----------



## Cromewell

mihir said:


> I found when you edit a post, it loses the color scheme after you save it.



This is because the script runs on page ready but new posts come in via an ajax call which doesn't reload the page. I'm sure there is a way around that, but you can just reset the theme and it will update the new post. Anything that works that way is affected, editing posts, making new ones with the quick reply, etc.



> I spent about an hour trying to get the dang boxes to change box to the background color after mouseover and was unsuccessful. I'll leave that up to you.


I'll look at it again when I get a chance.


----------



## Cromewell

After trying off and on for the last day or so (with no results ) to get the mouseover to highlight a different color or at worst return it to the color we are setting I'm going to take a bit of a break. Going through all those JS files to find the name of the event handler to replace it with my own was maddening


----------



## kobaj

Cromewell said:


> After trying off and on for the last day or so (with no results ) to get the mouseover to highlight a different color or at worst return it to the color we are setting I'm going to take a bit of a break. Going through all those JS files to find the name of the event handler to replace it with my own was maddening



Eh, I was approaching it a slightly different way.



		PHP:
	

function replaceQuick()
{
var quickbox = document.getElementById('vB_Editor_QR_controls');
if (quickbox != null)
var td = quickbox.childNodes[1].childNodes[1].childNodes[0].childNodes;
for(var i=0; i < td.length; i++)
{
if(td[i].nodeName == "TD")
{
	td[i].childNodes[0].innerHTML = "<span style=\"background:" + editorPanelColor[index] + ";visibility:visable;padding:0;height:100%;width:100%;display:block;\">" + td[i].innerHTML + "</span>";
}
}


Which kinda works, but not really.


----------



## mep916

I'm really impressed with what we have so far. Thanks guys. It always seems difficult to get something like this off the ground. Sorry I haven't been able to assist with the code effort. I know absolutely nothing about js, and very little HTML (took an old intro course in community college), so in the hours it would have took me to learn the basics, you guys cranked out some workable material.


----------



## lucasbytegenius

Well I'm trying to make the width of the forum smaller, but apparently the width was coded into the HTML, which Stylish can't change apparently


----------



## kobaj

lucasbytegenius said:


> Well I'm trying to make the width of the forum smaller, but apparently the width was coded into the HTML, which Stylish can't change apparently



Do you mean something like this?


----------



## lucasbytegenius

kobaj said:


> Do you mean something like this?



Yes exactly


----------



## kobaj

lucasbytegenius said:


> Yes exactly



What size do you want? I'll make you a grease monkey/theme for it.


----------



## lucasbytegenius

kobaj said:


> What size do you want? I'll make you a grease monkey/theme for it.



85% please


----------



## kobaj

lucasbytegenius said:


> 85% please



And done.

EVERYONE, If I could have your attention please!

Version 4 of the cofo color changer is released and available for download.

Change log:
Added Theme Green
Added Theme Red
Modified other Themes slightly
Added 85% width checkbox
Fixed a few bugs with font color
Fixed a few of the post box bugs

Enjoy (though if someone wants to spruce up green and red to make them more than what they currently are, feel free).

Also, let this be a testament and proof that if you request something (like 85% width) I will deliver!


----------



## Machin3

*Not to promote other forums*, but overclock.net just redid their site and it looks great. IMHO, cf should be looking into modernizing the site. Just a thought though.


----------



## kobaj

Ladies and Gentlemen,

Please take note:

Version 5 is released .

Change log: 
Fixed up the post boxes.
Changed color of top bar.
Added shade text.

Screenshot: (click for big)


----------



## turbodiesel

cool


----------



## Motorcharge

Wish I hadn't forgotten about this thread. The dark themes are so much better on my eyes.


----------



## Darren

Ok how do I change the color? I just installed version 5 and am using Chrome. Maybe I'm missing something obvious.


----------



## salvage-this

I just installed it from the link that Kobaj posted and it worked after a refresh of the page.


----------



## kobaj

Denther said:


> Ok how do I change the color? I just installed version 5 and am using Chrome. Maybe I'm missing something obvious.



Use the selection tool in the bottom left hand corner.
If you want custom colors, you can poke around in the source code, or request it in this thread and I'll make it .

If the selection tool in the bottom corner is not working/showing up, pm me and I'll get a bug report working between us to resolve the problem.


----------



## checkmate

mep916 said:


> For years, many of us have complained of the look and the layout of the forum. Eventually the site will upgrade to vB4 and, by design, that update will change the look, but in the meantime, we'd like to explore more options via browser plug-ins or anything that allows the end user choice and full customization, without making any changes on the back end.
> 
> In this thread, I'd like users to discuss and offer skins they recommend, where to get them, how to install, customize, etc. Moreover, though, if you have a background in CSS and/or javascript and would like to build some skins specific to CF, that would be AWESOME!
> 
> Apparently you can use Greasemonkey and/or stylist to create the code, or you can download templates. I'm not familiar with coding and only briefly researched before creating this thread, so if I'm missing anything please post your ideas, thoughts, suggestions, etc. Again, we're only looking for skins that can be created and/or implemented by the end user, nothing in the form of vB plug-ins, for example.
> 
> Hope all that makes sense. Basically, we want simple skin solutions that work with the forum in a browser add-on/plug-in format. If they exist, post em up. If they don't and you know how to create them, please do.


Stylebot is a nice chrome extension you should use. I forget what the firefox equivalent of that is (I never use FF) but I think there's more now for both browsers.


----------

