Toolbar to change background colour of web pages

Dev Shed Forums Sponsor:

Stay one step ahead of the competition. Evaluate and give feedback on some of the hottest web development tools on the market today. Make your opinion heard! Click Here

April 3rd, 2008, 05:33 AM

twinkle_twinkle

Registered User

Join Date: Apr 2008

Posts: 5

Time spent in forums: 45 m 49 sec
Reputation Power: 0

Toolbar to change background colour of web pages

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!!

April 4th, 2008, 09:17 AM

jkmyoung

Contributing User

Join Date: Sep 2004

Posts: 474

Time spent in forums: 3 Days 18 m 31 sec
Reputation Power: 52

I think a simpler way would be Javascript.
Link to the main element, where the bgcolor attribute is.
then use DOM to select the element, and change the bgcolor to the selected color in the color picker.

April 12th, 2008, 08:24 AM

twinkle_twinkle

Registered User

Join Date: Apr 2008

Posts: 5

Time spent in forums: 45 m 49 sec
Reputation Power: 0

I've implemented the functions of buttons to display a popup msg when they are pressed. This works

But whenever i insert the following code into my js file referenced by the toolbar(instead of the popup code), and install the toolbar and press the button that executes this event nothing happens, any ideas what's going wrong? or what i could try?? i can't see what i'm doing wrong

Thanks guys!

Code:

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

April 13th, 2008, 08:58 AM

twinkle_twinkle

Registered User

Join Date: Apr 2008

Posts: 5

Time spent in forums: 45 m 49 sec
Reputation Power: 0

Fixed

thanks! that function now for the functions to change text color, font and size

Quote:

Originally Posted by twinkle_twinkle

I've implemented the functions of buttons to display a popup msg when they are pressed. This works

Thanks guys!

Code:

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

April 13th, 2008, 09:00 AM

twinkle_twinkle

Registered User

Join Date: Apr 2008

Posts: 5

Time spent in forums: 45 m 49 sec
Reputation Power: 0

Fixed

thanks! that function now for the functions to change text color, font and size

Viewing: Dev Shed Forums > Programming Languages - More > XML Programming > Toolbar to change background colour of web pages

« Previous Thread | Next Thread »

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Posting Rules
You may not post new threads You may not post replies You may not post attachments You may not edit your posts vB code is On Smilies are On [IMG] code is On HTML code is Off

View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox

Forum Jump

Free IT White Papers!

Accelerating Trading Partner Performance
One in five. That's how many partner transactions have at least one error. That is an amazing statistic, particularly given the extraordinary leaps in innovation across the global supply chain during the past two decades. Download this white paper to learn more.

Competing on Analytics
This Tech Analysis is designed to help identify characteristics shared by analytics competitors, and includes information about 32 organizations that have made a commitment to quantitative, fact-based analysis.

Cost Effective Scaling with Virtualization and Coyote Point Systems
An overview of the industry trend toward virtualization, how server consolidation has increased the importance of application uptime and the steps being taken to integrate load balancing technology with virtualized servers.

Five Checkpoints to Implementing IP Telephony
Implementation planning for IP PBX software and IP telephony has become vital as businesses replace discontinued legacy PBX phone systems. This informative whitepaper outlines five "checkpoints" for any implementation plan that will help make IP communications a successful proposition.

Hosted Email Security: Staying Ahead of New Threats
In the last two years, email has become a fierce battleground between the nefarious forces of spam and malware, and the heroes of messaging protection. The spam volumes increased alarmingly every month, bringing clever new forms of phishing and virus propagation attacks.

More Free IT White Papers!