User changing background

HTML & CSS
1

I’ve designed a website for a client which uses PHP, HTML, alongside CSS styling.

Basically I’ve been asked if they can decide on the background colour - there is a standard body bgcolor which is declared by a generic CSS document, which is the standard background colour throughout the site.

I need a method of allowing a user to specify a colour to override this - I’m thinking of a way to declare a colour and assign it to a php variable then use that but because a body bgcolor is declared so early on in the document this doesn’t seem to work.

Any other solutions / ideas?

Thanks in advance

2

how will you prompt them for a new bg colour?

3

I’m thinking either a drop down list, or even a text input as in where they obtain a hex code via a colour chooser website.

4

ok, in that case you could put an onchange event handler on either the <select> or textbox which runs a function that takes the value selected or entered and then with javascript assign the body’s bg color style to the new value.

5

Thanks for idea & I will look into it, although I was trying to avoid using Javascript (incase users have it disabled etc) and was hoping if there was any way of passing the variable using PHP?

6

using js would mean the page doesn’t have to be refreshed for the new colour to take effect after the user selected it.

but yes, you are right it wouldn’t work for javascript disabled browsers.

one alternative is to then put the <select> or textbox in a form which submits to the current page. each time the current page loads you then check with php if a new colour has been sent. if it has, you can then use php to set the body’s bg colour style.

7

We had kind of a similar issue with a manager who wanted to be able to change background-colour and a background image in the header.

He already had a PHP-based admin page.

What we ended up doing was having a list (commented out) of colour/background-image possibilities, with one left out in the open (this was the default combination) in the external CSS sheet. In his admin page, he could select a radio button choosing the image he wanted… and this would get dynamically added to the HTML by the PHP with
<style type=“text/css”>
#header {
background: #thecolour url(thebackgroundimage.jpg) 0 0 no-repeat;
}
</style>
(where the coords and repeating also were pre-set, and they were not all the same)

It meant the style itself isn’t cached, but the image is, so not a huge deal. The included style overrides the CSS from the external stylesheet.

8

This is one of those cases where it probably isn’t worth worrying about people who have Javascript disabled. Assuming that changing the background is simply a cosmetic effect rather than something that’s essential to using the site, I’d go with the simplest option, and anyone whose browser setup doesn’t support it can still use the site absolutely fine. And if you do it properly, they won’t even know they’re missing anything.

9

I’m interested to know the reason for this. Is it purely cosmetic or to provide a perceived accessibility/usability function?

10

Thanks to all for your suggestions - I will take each on board!

Basically I have a basic content management system set up for them (home-made one) to change content thoughout the site. The actual set up of the page - i.e. the colours, logo images etc are only controlled via code which they will be protected from & unable to modify.

I was asked during a quick phone call (I think this is just a general query as opposed to an actual request) if they would be able to assign a new background colour to a few pages in the site easily. I was hoping to maybe make a database table which places the page name alongside a supplied bgcolor which is changed via PHP.

Maybe I’ve taken this idea too seriously though but I would like to make it happen for them.

11

if you haven’t already got one, you could create a table for your cms that stores site constants and drive that table from a “Configure” form in your cms.

for example - in my default online store cms I have a form that is displayed when the user selects “Configure” from the menu. The form drives a table called tblsiteconstants. Typical fields in tblsiteconstants include fldStoreStatus (open or closed), fldCompanyName, fldCompanyUrl etc etc.
Then as each web page is loaded, fldCompanName is included in the <title> and the other parameters are inserted or used as appropriate.

You should be able to do a similar thing and store bg colours in a table driven by your cms.

12

That attribute was deprecated back in 1997 and is ignored if there is anything in the CSS to set the background-color on the body. To upgrade your HTML to the 1997 HTML 4 standard you should delete that attribute.