Support » Themes and Templates » User controlled CSS file?

  • Resolved vavroom



    Super WordPress n00b here, forgive my ignorance. I looked on the forum & codex, but couldn’t find the answer. I hope someone can point me in the right direction.

    I am working on a site that targets people with vision impairments. Those users who rely on screenreaders are no problem, I can handle that. Those users who need to increase font size are also easily taken care of. However, for user who need white-on-black instead of black-on-white, I’m not sure how to achieve what I need to do.

    What I’ve done in the past is a simple solution. I create an additional CSS file, highcontrast.css. Then I have a button on the page that a user can click, and the highcontrast.css file gets loaded, using the cascading property of CSS, values such as body background-color, p color, etc are over-written to display the site in high contrast.

    Of course, the value of this isn’t limited simply to accessibility issues, one could let the user determine which layout they want entirely based on switching css file “on the fly”.

    What would be the best approach to make this happen?


Viewing 14 replies - 1 through 14 (of 14 total)
  • You can use a styleswitcher:

    That’s actually very easy to set up 😀

    Thanks for the prompt response maerk. However, while ALA generally has fantastic solutions, in this particular instance, I can’t use it.

    I need a solution that doesn’t rely on javascript. Again, the site aims at people with disabilities, which may, or may not, have js enabled/running/accessible. While it is more likely that people with low vision needing the high contrast style would have js turned on than someone relying on screenreading, I cannot afford to make the assumption.

    Therefore, I need a non-javascript solution.

    I’ve found a plugin that appears to do the trick, but it was done pre WP1.2 and I’m not sure if it’ll work, and if it doesn’t, how to fix it. I may be fluent in html/css, but while I can read php, I’m by no means a code jokey 😉

    I’ve done this before on several client sites – it uses stylesheet switching with either PHP or ASP. Can you use either one of those?

    Oh, OK, you can certainly use PHP to do the same thing, but it’s a bit trickier 😀

    I’m using something similar on my blog at the moment, but I can’t remember the code exactly 😉 I’ll take a look and post the solution when I get home, in about three hours.

    It uses cookies, is that a problem?

    I can’t imagine why – all of mine use cookies, too! 😉

    I guess I lump js and cookies together in my head for whatever reason 😉

    Having a “simple” theme that is white-on-black and using the theme-switcher plugin – would not work for you?

    Right, just modified my code for your use. Put this in a file called functions.php, and place it in your template folder along with your other theme files. (Obviously if you already have a functions.php, just add this to the file, don’t overwrite it):

    <?php if ( "Hi-Contrast" == $_POST['display'] ) {
    $display = "Hi-Contrast";
    if ( empty($_COOKIE['display']) ) {
    setcookie("display", "Hi-Contrast", time() + 31536000, "/pathtoblog/");
    } elseif ( "Normal" == $_POST['display'] ) {
    $display = "Normal";
    if ( "Hi-Contrast" == $_COOKIE['display'] ) {
    setcookie("display", "", time() - 31536000, "/pathtoblog/"); // deletes cookie
    } else { // if _POST has been supplied as anything else or is empty, rely on the cookie
    if ( "Hi-Contrast" == $_COOKIE['display'] ) {
    $display = "Hi-Contrast";
    } else {
    $display = "Normal";
    } ?>

    Then, to allow your users to change the style, add this form wherever you think is best:

    <form action="" method="post">
    <input type="submit" name="display" value="Hi-Contrast" /><br />
    <input type="submit" name="display" value="Normal" />

    Then, in your header you can check which style is in use with this:

    <?php global $display;
    if ( "Hi-Contrast" == $display ) : ?>
    <!-- High Contrast Styles Here -->
    <?php else : ?>
    <!-- Normal Styles Here -->
    <?php endif; ?>

    Few notes:

    "/pathtoblog/" is the path from your domain. Say your blog was at, it would be "/stuff/blog/".

    If was just at, it would be "/".

    Sorry this isn’t on pastebin, tried to use it but it was taking ages and then broke 🙁

    Wow, go to bed, come back, and a good discussion ensued! Cool. Thanks folks!

    @dodlebee, you’re right, cookies isn’t an issue, unless of course the user has cookies turned off, but at that point, it’s not my problem anymore, and is certainly not an accessibility issue 😉 PHP is fine, ASP, well, I try to stay away from that <grin>

    @moshu, a theme switcher might work, but is really cumbersome, as it means I’d have to basically copy my theme files and just have one css file different. It is a better approach to be able to change the one css file which is really lightweight.

    @maerk, Thanks for that. I’m unable to test it until I get home later today, but I’ll let you know how that goes.

    Yeah, this will work, sweet, thanks maerk. I have to modify the form a wee bit, don’t want to be using submit buttons, but that’s easy as (html is easy…)


    Cool, glad it works!

    You know you can style input buttons? Ultimately, of course, it’s your choice, but they keep things simple, and you can set the font size to be enormous so they’re easily clickable.

    But yeah, you should have the form however you like, it’s your call 😀

    Yes, I know you can style input buttons 😉 I love what can be accomplished with CSS (even design definition lists so they look like tables! but I digress).

    I ended up using an input button, with a conditional statement. So the user sees the “High contrast” option when they are on the default view, and the “Default” option when they are in high contrast view 🙂

    I’m nearly ready to upload to live server, then it’ll be show and tell if y’all are interested. I certainly could use feedback and constructive criticism on my very first WP theme. 🙂

    Forgot to update this thread with the link. You can see the result of this in action at if you haven’t seen it already 🙂

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘User controlled CSS file?’ is closed to new replies.