Here's what it looks like so far:
Almost everything works perfectly, and the topic selector, main menu, and post menu are all perfectly highlighted. Except for the following:
If you notice, below the poster's name and details but above the online/offline stamp on the left of the post, there is an uncolored region. I can't seem to find that particular region's parent <div>'s class so that I can paint it green.
Other than that, I would like somebody to host this code at some point.
What do you think?
Offline
Pretty cool
I've been thinking about doing something like this for a while now so well done! I was thinking this sort of thing would work well for the new forum development.
I just had a quick look with firebug, I can't see the div for that grey region either... perhaps it is the background colour of that entire box?
Offline
sparks wrote:
Pretty cool
I've been thinking about doing something like this for a while now so well done! I was thinking this sort of thing would work well for the new forum development.
I just had a quick look with firebug, I can't see the div for that grey region either... perhaps it is the background colour of that entire box?
No luck there...
Offline
Search through the stylesheets.
Google chrome 16 is soooooooo cool
Last edited by nickbrickmaster (2012-01-03 09:44:54)
Offline
roijac wrote:
firefox nightly build^^ (aka ff12)
Nah, you just need the addon called tilt.
Offline
roijac wrote:
Firefox 12 is sooo cool
![]()
It sure is.
Actually, I use 11. ♥ the 3D.
Offline
nXIII wrote:
Oh, sorry, it's actually the left border of the .postright element.
Thank you so much!
Offline
Almost done. nXIII, can you figure out the last bit (//help! commenton the for loop)? I want to get the links to have a green pattern, with a dark green hover color.
// ==UserScript==
// @name New CSS
// @namespace CSS
// @description Creates a new CSS
// @include http://scratch.mit.edu/forums*
// ==/UserScript==
if (document.getElementsByClassName == undefined) {//Get element by class name definition
document.getElementsByClassName = function(className)
{
var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)");
var allElements = document.getElementsByTagName("*");
var results = [];
var element;
for (var i = 0; (element = allElements[i]) != null; i++) {
var elementClass = element.className;
if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass))
results.push(element);
}
return results;
}
}
injectAttribForClass("postleft", "backgroundColor", "#60D4AE");//info
injectAttribForClass("box", "backgroundColor", "#25F4C5");//Big boxes
injectAttribForClass("box", "borderStyle", "solid");
injectAttribForClass("box", "borderWidth", "1px");
injectAttribForClass("box", "borderColor", "#006E4A");
injectAttribForClass("conr", "borderStyle", "solid");//Corner
injectAttribForClass("conr", "borderWidth", "1px");
injectAttribForClass("conr", "borderColor", "#006E4A");
injectAttribForClass("conr", "backgroundColor", "#60D4AE");
injectAttribForClass("conr", "color", "#006E4A");
injectAttribForClass("blockpost rowodd", "backgroundColor", "#60D4AE");//?
injectAttribForClass("postright", "borderLeftColor", "#60D4AE");//?
injectAttribForClass("postright", "backgroundColor", "#25F4C5");//?
injectAttribForClass("postfootleft", "backgroundColor", "#60D4AE");//FootLT
injectAttribForClass("postfootright", "backgroundColor", "#25F4C5");//FootRT
injectAttribForClass("codebox", "backgroundColor", "#60D4AE");//FootRT
injectAttribForClass("postreport", "color", "#006E4A");//Lighttext
injectAttribForTag("blockquote", "backgroundColor", "#80E6CC");//incq box
injectAttribForTag("h2", "backgroundColor", "#006E4A");
injectAttribForTag("td", "backgroundColor", "#25F4C5");
injectAttribForTag("td", "borderColor", "#006E4A");
injectAttribForTag("th", "backgroundColor", "#60D4AE");
injectAttribForTag("th", "borderColor", "#006E4A");
document.getElementsByTagName("h2")[0].style.backgroundColor="#FFFFFF";
document.getElementById("brdmenu").style.backgroundColor="#006E4A";
function injectAttribForClass(className, attrib, setting) {//Attribute injector
var pstlts = document.getElementsByClassName(className);
var i;
for (i=0; i<=pstlts.length-1;i++)
{
pstlts[i].style[attrib]=setting;
}
}
function injectAttribForTag(className, attrib, setting) {//Attribute injector
var pstlts = document.getElementsByTagName(className);
var i;
for (i=0; i<=pstlts.length-1;i++)
{
pstlts[i].style[attrib]=setting;
}
}
var pstlts = document.getElementsByTagName("a");
for (i=0; i<=pstlts.length-1;i++) {// Help!
pstlts[i].onmouseover=function(evt) {
this.style.color="green";
};
pstlts[i].onmouseout=function(evt) {
this.style.color="darkGreen"
};
}Last edited by Hardmath123 (2012-01-04 08:35:42)
Offline



Offline
Nice. Why do you do this with JS and not CSS?
Offline
scimonster wrote:
Nice. Why do you do this with JS and not CSS?
![]()
How would I, with CSS?
Offline
Hardmath123 wrote:
Almost done. nXIII, can you figure out the last bit (//help! commenton the for loop)? I want to get the links to have a green pattern, with a dark green hover color.
Code:
// ==UserScript== // @name New CSS // @namespace CSS // @description Creates a new CSS // @include http://scratch.mit.edu/forums* // ==/UserScript== if (document.getElementsByClassName == undefined) {//Get element by class name definition document.getElementsByClassName = function(className) { var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)"); var allElements = document.getElementsByTagName("*"); var results = []; var element; for (var i = 0; (element = allElements[i]) != null; i++) { var elementClass = element.className; if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass)) results.push(element); } return results; } } injectAttribForClass("postleft", "backgroundColor", "#60D4AE");//info injectAttribForClass("box", "backgroundColor", "#25F4C5");//Big boxes injectAttribForClass("box", "borderStyle", "solid"); injectAttribForClass("box", "borderWidth", "1px"); injectAttribForClass("box", "borderColor", "#006E4A"); injectAttribForClass("conr", "borderStyle", "solid");//Corner injectAttribForClass("conr", "borderWidth", "1px"); injectAttribForClass("conr", "borderColor", "#006E4A"); injectAttribForClass("conr", "backgroundColor", "#60D4AE"); injectAttribForClass("conr", "color", "#006E4A"); injectAttribForClass("blockpost rowodd", "backgroundColor", "#60D4AE");//? injectAttribForClass("postright", "borderLeftColor", "#60D4AE");//? injectAttribForClass("postright", "backgroundColor", "#25F4C5");//? injectAttribForClass("postfootleft", "backgroundColor", "#60D4AE");//FootLT injectAttribForClass("postfootright", "backgroundColor", "#25F4C5");//FootRT injectAttribForClass("codebox", "backgroundColor", "#60D4AE");//FootRT injectAttribForClass("postreport", "color", "#006E4A");//Lighttext injectAttribForTag("blockquote", "backgroundColor", "#80E6CC");//incq box injectAttribForTag("h2", "backgroundColor", "#006E4A"); injectAttribForTag("td", "backgroundColor", "#25F4C5"); injectAttribForTag("td", "borderColor", "#006E4A"); injectAttribForTag("th", "backgroundColor", "#60D4AE"); injectAttribForTag("th", "borderColor", "#006E4A"); document.getElementsByTagName("h2")[0].style.backgroundColor="#FFFFFF"; document.getElementById("brdmenu").style.backgroundColor="#006E4A"; function injectAttribForClass(className, attrib, setting) {//Attribute injector var pstlts = document.getElementsByClassName(className); var i; for (i=0; i<=pstlts.length-1;i++) { pstlts[i].style[attrib]=setting; } } function injectAttribForTag(className, attrib, setting) {//Attribute injector var pstlts = document.getElementsByTagName(className); var i; for (i=0; i<=pstlts.length-1;i++) { pstlts[i].style[attrib]=setting; } } var pstlts = document.getElementsByTagName("a"); for (i=0; i<=pstlts.length-1;i++) {// Help! pstlts[i].onmouseover=function(evt) { this.style.color="green"; }; pstlts[i].onmouseout=function(evt) { this.style.color="darkGreen" }; }
Just add an injectAttribForTag("a", "color", "darkGreen"); to set their color initially
scimonster wrote:
Nice. Why do you do this with JS and not CSS?
![]()
I was wondering that too...
Offline
Hardmath123 wrote:
scimonster wrote:
Nice. Why do you do this with JS and not CSS?
![]()
How would I, with CSS?
If you're just restyling it...
Do you know CSS?
Offline
Hardmath123 wrote:
scimonster wrote:
Nice. Why do you do this with JS and not CSS?
![]()
How would I, with CSS?
In a userscript, just inject your stylesheet (hosted on dropbox or something) into the page.
Offline