/    Sign up×
Community /Pin to ProfileBookmark

contrast websites

Copy linkTweet thisAlerts:
Mar 14.2012

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:

[url]http://www.aacwinnipeg.mb.ca/[/url]

This is the site I rebuilt:

[url]http://www.cjwebconsulting.com/New/index.html[/url]

Thank you in advance

to post a comment
HTML

14 Comments(s) ↴

Copy linkTweet thisAlerts:
@spufiMar 14.2012 — You could pass what page style they want via a variable and then use PHP to process it.

<i>
</i>&lt;a href="index.php?style=white"&gt;(img code)&lt;/a&gt;


[code=php]
<?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
}
?>
[/code]
Copy linkTweet thisAlerts:
@MaxxxxauthorMar 14.2012 — Would I put the first code in my header, and for the php. where would I put that?
Copy linkTweet thisAlerts:
@CharlesMar 14.2012 — 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.
Copy linkTweet thisAlerts:
@MaxxxxauthorMar 14.2012 — 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/
Copy linkTweet thisAlerts:
@spufiMar 14.2012 — Would I put the first code in my header, and for the php. where would I put that?[/QUOTE]

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.
Copy linkTweet thisAlerts:
@MaxxxxauthorMar 14.2012 — 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 --->[/CODE]

Does this help you??
Copy linkTweet thisAlerts:
@spufiMar 15.2012 — This is what is on the live version of the site.

<i>
</i>&lt;div id="page"&gt;
&lt;h2&gt;&lt;strong&gt;Page Style&lt;/strong&gt;&lt;/h2&gt;
&lt;ul&gt;
&lt;li id="default"&gt;
&lt;a href="index.html"&gt;&lt;h5&gt;Standard&lt;/h5&gt;&lt;/a&gt;
&lt;/li&gt;
&lt;li id="WB"&gt;
&lt;a href="inv/inv.html"&gt;&lt;h5&gt;Inverted&lt;/h5&gt;&lt;/a&gt;
&lt;/li&gt;
&lt;li id="bw"&gt;
&lt;a href="hc/hc.html"&gt;&lt;h5&gt;High Contrast&lt;/h5&gt;&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;


This is how I would do it.

<i>
</i>&lt;div id="page"&gt;
&lt;h2&gt;Page Style&lt;/h2&gt;
&lt;ul&gt;
&lt;li id="default"&gt;
&lt;h5&gt;&lt;a href="index.php"&gt;Standard&lt;/a&gt;&lt;/h5&gt;
&lt;/li&gt;
&lt;li id="WB"&gt;
&lt;h5&gt;&lt;a href="index.php?style=inverted"&gt;Inverted&lt;/a&gt;&lt;/h5&gt;
&lt;/li&gt;
&lt;li id="bw"&gt;
&lt;h5&gt;&lt;a href="index.php?style=contrast"&gt;High Contrast&lt;/a&gt;&lt;/h5&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;


<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.
Copy linkTweet thisAlerts:
@spufiMar 15.2012 — 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.
Copy linkTweet thisAlerts:
@MaxxxxauthorMar 15.2012 — This is the three css files. the first one is being used right now. the other two I have not added yet.
Copy linkTweet thisAlerts:
@spufiMar 16.2012 — 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.
Copy linkTweet thisAlerts:
@MaxxxxauthorMar 16.2012 — Believe it or not. But I understood everything you just said ? Thanks
Copy linkTweet thisAlerts:
@MaxxxxauthorMar 16.2012 — Fast question. Can I link these css files to each button?
Copy linkTweet thisAlerts:
@spufiMar 16.2012 — 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.
Copy linkTweet thisAlerts:
@MaxxxxauthorMar 16.2012 — You described a few different codes in past messages regarding linking to my buttons. Do I use the one you talk about PHP?
×

Success!

Help @Maxxxx spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.3,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...