Button to change background colour of webpages

Archives of the forum. How to change dynamically the background color of a web page.

Forum
Wed, 02 Apr 2008 18:33:24

newbeee

I'd like to create a toolbar for FireFox consisting of one button to change the background colour of the currently viewed webpage. At present I have a button "Background Colour", when I click on it I have set up a popup message to say "Code for Changing Background Colour goes here". Ideally I'd like to use a colorpicker for the user to select their colour choice, and then the selected colour be applied as the background colour of the webpage. To change the background colour of a page would it simply be a case of placing a css sheet over the top of the currently viewed page? And if so any ideas on how i do this? Thanks!!
Tue, 08 Apr 2008 11:26:32

Administrator

We can use a technique similar to that in www.xul.fr/javascript/dynamic-images.html for changing the background. the background property could be changed directly.
var x = document.getElementsByTagName("body").item(0);        
x.setAttribute("background", color);
Tue, 08 Apr 2008 11:38:28

newbeee

Thanks for that! If I were to add more buttons to my toolbar to change the text colour and / or the font colour / size, are there similar functions available to use? Thanks again!!
Thu, 10 Apr 2008 12:18:36

Administrator

For the color, the CSS property is color, to replace the background property, and for the size, it is font-size.
Sat, 12 Apr 2008 15:21:41

newbeee

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();
}
Sun, 13 Apr 2008 15:55:56

newbeee

Fixed ;) now for the text colour, size and font buttons.
© 2008-2013 Xul.fr