Toolbar button to change background colour of web pages

[twinkle_twinkle]

Toolbar button to change background colour of web pages

--------------------------------------------------------------------------------

I want to create a toolbar for FireFox consisting of one button to change the background colour of the currently viewed webpage. I am building the toolbar in XUL, this XUL file houses the buttons, and then references a JavaScript file which holds the functions.

At present I have a button "Background Colour", when I click on it, there is a drop down menu of 4choices, when you click on any of these I have set up a popup message to say "Code for Changing Background Colour goes here".

This is the XUL code


<button type="menu" label="Background Colour">
<menupopup>
<menuitem label="White" oncommand="BGColour(event)"/>
<menuitem label="Black" oncommand="BGColour(event)"/>
<menuitem label="Cream" oncommand="BGColour(event)"/>
<menuitem label="Blue" oncommand="BGColour(event)"/>
</menupopup>
</button>



This is the javascript:


function BGColour(event)
{
alert("Code for changing background colour goes here");
}


How would I change the background colour of the webpage at hand? Would it be a case of placing a .css file over the top of the viewed webpage? If so how would you do this? If not, any ideas?

Thanks!!

[PeejAvery]

Well, I don't know how Firefox would interact with the scripting from the toolbar itself. However, if you are attempting to change the background in JavaScript, you would use...

document.getElementsByTagName('body')[0].style.background = '#ffff00';

[twinkle_twinkle]

Thanks PeejAvery!

I've built the UI for the toolbar in XUL it was actually implementing the javascript I was having trouble with.

After I get the background button working I wish to add buttons to my toolbar to change the text colour and font. Would you know off the top of your head where I could find a list of the methods that I would use?

Thanks for your help!

[PeejAvery]

I would say that one of your best resources would be BornGeek (http://www.borngeek.com/firefox/toolbar-tutorial/).

[twinkle_twinkle]

whenever i insert the following code into my js file referenced by the toolbar, and install the toolbar none of the toolbar functions accessed by any of the buttons work, any ideas what's going wrong? or what i could try?? i can't see what i'm doing wrong
Thanks guys!

function BGColour(event)
{
var currentDocument = getBrowser().getBrowserForTab( getBrowser ).selectedTab ).contentDocument;
currentDocument.body.style.backgroundColor = "magenta";
BrowserReload();
}

[PeejAvery]

Well, you are missing a parenthesis after selectedTab. Remember that Firefox comes with an Error Console under the Tools menu. It can help you greatly in debugging.

[twinkle_twinkle]

Thanks, i couldnt spot that. I've put the missing parenthesis in, that allows the other functions to work, but the BGColour function still isnt working, it doesnt seem to do anything.

[PeejAvery]

As I mentioned...have you checked the Error Console?

[twinkle_twinkle]

Thank you I've the function working!