www.webdeveloper.com
Results 1 to 15 of 15

Thread: contrast websites

  1. #1
    Join Date
    Nov 2011
    Posts
    126

    contrast websites

    Hey everyone, I'm rebuilding a website for a group, and this site has three contrast option for the vision impaired, The way the site was built. There was a folder for each contrasts. So that means when ever I did an update. I had to copy it to two other folders besides the main one. Right now i rebuilt it with just one contrast. i still have the two other css files that control the two other contrast and font color changes. on the site i have three buttons that can be used to switch the contrast. Can I switch between three css files with a click of a button on the site?

    This is the site that is online now:

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

    This is the site I rebuilt:

    http://www.cjwebconsulting.com/New/index.html

    Thank you in advance

  2. #2
    Join Date
    Nov 2002
    Posts
    2,632
    You could pass what page style they want via a variable and then use PHP to process it.

    Code:
    <a href="index.php?style=white">(img code)</a>
    PHP Code:
    <?php
    switch ($_GET[style]) {
        case 
    black:
            
    ?>
            <link rel="stylesheet" type="text/css" href="css/black.css" />
            <?php
            
    break;
        case 
    white:
            
    ?>
            <link rel="stylesheet" type="text/css" href="css/white.css" />
            <?php
            
    break;
        default:
            
    ?>
            <link rel="stylesheet" type="text/css" href="css/default.css" />
            <?php
    }
    ?>

  3. #3
    Join Date
    Nov 2011
    Posts
    126
    Would I put the first code in my header, and for the php. where would I put that?

  4. #4
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,270
    That's kind of not they way I would approach the problem.

    If accessibility was my only concern then I would create just one stylesheet but using using System colors. ( http://www.w3.org/TR/CSS2/ui.html#system-colors )It's a pretty good assumption that your users will already have the contrast set properly for them at the system level. Or I might specify several alternate stylesheets so they can pick one using their browser controls. Or perhaps I might do a combination of the two.
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  5. #5
    Join Date
    Nov 2011
    Posts
    126
    I agree a 100&#37; with you but this is what they want. This is what they have now, and you will noticed when you click one of the contrast buttons. it changes folders. Theres three of them for each contrast. I want to avoid haveing to do updates in three folders. But I do agree with you.


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

  6. #6
    Join Date
    Nov 2002
    Posts
    2,632
    Quote Originally Posted by Maxxxx View Post
    Would I put the first code in my header, and for the php. where would I put that?
    First part is where ever you are making the links to where they can switch styles. Note, you'll need three links, one for each style. The PHP is in the <head> tag where you would be externally linking to the style sheets.

  7. #7
    Join Date
    Nov 2011
    Posts
    126
    These are my three link buttons.

    Code:
    <div id="page"> <h2><strong>Page Style</strong></h2> 
    <ul>
    <li><img src="images/default.gif" alt="Page style button1" width="80" height="80"  /></li>
     <li><img src="images/WB.gif" alt="Page style button2" width="80" height="80" /></li> 
     <li><img src="images/bw.gif" alt="Page style button3" width="80" height="80" /></li>
    	</ul>
    	</div><!--- end page style --->
    Does this help you?

  8. #8
    Join Date
    Nov 2002
    Posts
    2,632
    This is what is on the live version of the site.

    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>
    This is how I would do it.

    Code:
    <div id="page">
        <h2>Page Style</h2>
        <ul>
            <li id="default">
                <h5><a href="index.php">Standard</a></h5>
            </li>
            <li id="WB">
                <h5><a href="index.php?style=inverted">Inverted</a></h5>
            </li>
            <li id="bw">
                <h5><a href="index.php?style=contrast">High Contrast</a></h5>
            </li>
        </ul>
    </div>
    <h2> should be bold, ie <strong>, by default. If not, it can be handled via external CSS. Anchor tags are inline level tags and shouldn't have block level, ie <h5> tags inside of them. HTML 5 makes that statement blurry, but I still try to follow that rule. Just change the switch statement for the case parts to inverted and contract versus black and white. The index page obviously needs to be a PHP file type versus HTML.

  9. #9
    Join Date
    Nov 2002
    Posts
    2,632
    P.S. I haven't looked at the code, but you might be able to skip on the <h5> tags as well and just use CSS to do the needed styling.

  10. #10
    Join Date
    Nov 2011
    Posts
    126
    This is the three css files. the first one is being used right now. the other two I have not added yet.
    Attached Files Attached Files

  11. #11
    Join Date
    Nov 2002
    Posts
    2,632
    I did a fly through reformat on the code but it's minor. You will want to double check stuff. Something to do that I didn't do because I didn't feel like investing the time is making a fourth CSS file that has CSS, which is included in all three versions. This way you link to that one and then determine which of the smaller CSS files you include.

    You currently have over 1.2K lines of CSS with the three files. All 400+ lines is included for each CSS file you load. If you can take lets say 300 lines that are used in all three files and put it into one CSS file. You then load the 300 lines plus 100 for that version for a total of 400+. If somebody switches versions, you are now loading just the 100 lines for that specific version versus a brand new batch of 400+ lines, much of which is the same code.
    Attached Files Attached Files

  12. #12
    Join Date
    Nov 2011
    Posts
    126
    Believe it or not. But I understood everything you just said Thanks

  13. #13
    Join Date
    Nov 2011
    Posts
    126
    Fast question. Can I link these css files to each button?

  14. #14
    Join Date
    Nov 2002
    Posts
    2,632
    To the ones I did? Yes. I would look at renaming them though. The names they have now are hardly descriptive. My guess is once you strip out the bulk of the CSS that is used in all cases the specific CSS files will be rather small. You are basically just switching colors.

  15. #15
    Join Date
    Nov 2011
    Posts
    126
    You described a few different codes in past messages regarding linking to my buttons. Do I use the one you talk about PHP?

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