www.webdeveloper.com
Results 1 to 13 of 13

Thread: Background colour

  1. #1
    Join Date
    Nov 2011
    Posts
    118

    Background colour

    I want to rebuild a website, and I want to have a button that gives people the option of three background color choices. How can I do that?

  2. #2
    Join Date
    Nov 2002
    Posts
    2,632
    JavaScript or PHP can do it.

  3. #3
    Join Date
    Feb 2012
    Posts
    61
    you can do it using javascript easily, give id to body like this

    <body id="changecolor">

    then handle id using
    document.getElementByid('changecolor').style.background-color:#ff0000;

    hope it will helpfull to you...get me back if any query....
    Thanks,
    Som
    Full2pune

  4. #4
    Join Date
    Mar 2012
    Location
    chandigarh
    Posts
    33
    thanks for this code dude...

  5. #5
    Join Date
    Nov 2011
    Location
    Nigeria
    Posts
    28
    You can use javascript:
    you can add multiple classes to an element by giving a space in between classnames like this
    Code:
    <body class="blue red green">
     some html. . .
    </body>
    and add an onclick event handler to each button like:
    Code:
    <input type="button" value="change to blue" onclick="blue_bg()">
    if for e.g the "change to blue" button is clicked, the blue_bg function is called, the blue class is added and the 2 other classes are removed and background is changed to blue (JQuery can b handy if u wish to use it).
    COOKIES can be used to remember the user if you wish.
    Last edited by ibixxon; 03-10-2012 at 07:46 AM.

  6. #6
    Join Date
    Nov 2011
    Posts
    118
    Thank you everyone. What I'm trying to do is rebuild a site that is very hard to update because of the three different background colors. I have to update one page in one folder then copy it to two other folders and change the css path. You will see what I mean when looking at this site. Keep in mind, I did not build this site. I just took over it.

    http://www.aacwinnipeg.mb.ca/

  7. #7
    Join Date
    Nov 2011
    Location
    Nigeria
    Posts
    28
    Then start building.. If you have any dificulties feel free 2 query.

  8. #8
    Join Date
    Nov 2011
    Posts
    118
    Is there away I can extract the javascript from the site. I understand css, so thats not a problem, but javascript I'm still learning.

    http://www.aacwinnipeg.mb.ca

  9. #9
    Join Date
    Nov 2011
    Location
    Nigeria
    Posts
    28
    Are you trying to remove javascript from the site entirely ? Or from a portion of a page ?

    If you want to remove javascript entirely you might have a problem, that is If JS is used to generate some part of the page/site.
    But then it will be easier to remove, if JS is saperated from main content.
    If you want to remove javascript from a portion of a page, it probably have been linked or written in the page, so its either you locate and delete it or remove the link to the JS file.
    If i didn't ans. your question, its probably bcos i didn't understand it. You can help by making it clear.

  10. #10
    Join Date
    Nov 2011
    Posts
    118
    I started rebuilding by taking the first page and starting from there. I don't want to use all the javascript just parts of it. For example trying to figure how they got the rollover affect to some buttons.

  11. #11
    Join Date
    Mar 2012
    Posts
    1,405
    Quote Originally Posted by Maxxxx View Post
    I have to update one page in one folder then copy it to two other folders and change the css path. You will see what I mean when looking at this site aacwinnipeg.mb.ca
    Your problem is that the home page seems to have the file extension ".html". HTML is clumsy because it does not have any variables. So, to change the background color, you have to have three versions of EVERY html pages. That's the way it is.

    You can avoid having to copy the html files by using php. However:

    1. You need to be familiar with the basics of passing variables in php! if not, then I suggest that you have two choices:

    a) if you are being paid to maintain the site, you could point out that the color facility is cumbersome and costly in your time. If they say "so what?", just shrug and get on with it.

    b) if you are maintaining the site voluntarily, I would make taking it on conditional on removing the facility! It really is not worth the hassle.

    2. Otherwise, the web pages need to have the fie extension ".php" instead of ".html" to support variables. This can be a problem on the home page, So what you can do as a compromise is:

    a) Locate the three versions of the home page (and their css files) in the same directory. Fortunately they already have different names: index.html, inv.html and hc.html.

    b) Rename the rest of one version of the web pages ".php" instead of ".html".

    c) Amend the anchors linking the web pages to simulate a GET form submission. I'm not sure whether this is documented. It's a trick I worked out for myself when rebuilding an old site like you are doing. However, it is a little complicated to put here. If you are interested I can document it.


    P.S. If the javascript is working, why remove it?
    Last edited by jedaisoul; 03-10-2012 at 12:06 PM.

  12. #12
    Join Date
    Nov 2011
    Posts
    118
    I'll have to think over my options. i just want to avoid doing everything three times. i'll get back to you.

  13. #13
    Join Date
    Nov 2011
    Posts
    118
    How cn I ad my own image to this code?

    Code:
    <input type="button"
    
     value="White bg, black text"
    
     onClick="document.bgColor = '#FFFFFF';document.fgColor='#000000';">
    better yet. If I could add the three images i have in the code below. would help me alot in rebuilding a page.


    Code:
    <div id="page"> <h2><strong>Page Style</strong></h2> <ul><li id="default"><a href="index.html"><h5>Standard</h5></a></li> <li id="WB"><a href="inv/inv.html"><h5>Inverted</h5></a></li> <li id="bw"><a href="hc/hc.html"><h5>High Contrast</h5></a></li>
    	</ul>
    	</div>
    Last edited by Maxxxx; 03-10-2012 at 06:21 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles