By ehasted on

My site will be used by many visually imapired users. This means I need to have versions of the site with larger font sizes and greater levels of contrast.

Such users are used to clicking on an image and that then changes the look and feel.
Effectively you're replacing their css but how do you do this in Drupal?

Comments

narres’s picture

narres commented

I'm usually doing this by including a: @import "style.css.php";

This makes me able to use and calculate variables for CSS-setting.

Thomas Narres
Keep the sunny side up

ehasted’s picture

ehasted commented

Are you saying your style.css.php files decides which css to call?
Or can you put logic into the css to decide which version of an item to call?

narres’s picture

narres commented

I'm solving this, setting the varibles in my theme and using style.css.php like:

h2 {
        background-color: inherit;
        color: <? print $color_h2; ?>;
        font-size: <? print $font_size_h2; ?>em;
}

You need to do some coding in your page.tpl.php, if you are using the PHP-template-engine.
Cause I'm don't knowing which engine you are using and which kind of template, it's hard to give more details.

Thomas Narres
Keep the sunny side up

narres’s picture

narres commented

try "Meta Theme": http://drupal.org/node/43376

It's not written by me, but seems to fit your requirements.

Thomas Narres
Keep the sunny side up

tyswan’s picture

tyswan commented

I address the need for various font sizes on my site using CSS elastic design.

Be warned that It's kinda tricky, but It's great when you get it right! I'm a newbie to CSS (taught myself about 2 months ago) but if I can do it, you can too. It just takes commitment (I nearly chucked it all in until I found the article by Richard Rutter)

Have a look at my site (not sure how well it works under IE) You could let me know!
www.bluemts.health-harmony.com.au

Read these articles for concept:
Elastic Design by Patrick Griffiths
Elastic widths using ems

But the one that really helped me work it all out (because of all the nesting in Drupal) is this fantasic article How to size text using ems by Richard Rutter

One hint that really helped a lot is this: set your body font size to 62.5% (i.e 10px). Design your whole site around this basis. The font will be too small, but stick with this during your design phase.

Now, when you're ready, because it's elastic, simply set your body font size to 80% or 90%, and the whole design will scale correctly, and you'll end up with a decent font size.

I hope you give it a go!

And if you have any techy questions, I'd be pleased to answer them if I can.

Cheers,
--
tys

Gary Feldman’s picture

Gary Feldman commented

A technical correction: 62.5% is not 10px. It is 62.5% of whatever the default body size is for the particular browser configuration viewing the page. Since you don't know what users have set their default size to be, you can't convert relative sizes like per cent or em into fixed sizes such as pixels.

Gary Feldman

tyswan’s picture

tyswan commented

Ah yes, you are of course correct...

The assumption is that your default size is 16pt (as explained in the elastic tutorials, and apparently standard). I set my default browser font to 16pt, design my site, and because it's elastic, it doesn't matter what the user's default size is, the design should correctly scale. If your user has a sight impairment then the design should be nicely large.

The only use of 62.5% is during the design for css newbies like me to get thier head around ems, and help me figure out how big 2.4 ems is likely to be.

It's just a trick that helped make designing with ems possible for me. Thought it might help others...

Cheers,
--
tys

tyswan’s picture

tyswan commented

This is also an interesting article on style toggling. This will give you contrast & font switching. Looks complex, but could be very useful.

--
tys

minhcl’s picture

minhcl commented

Why you don't want to use Theme Editor? Checkout this link http://drupal.org/project/theme_editor
Here is its feature:
Editing of CSS, .info, and Template Files
Simple back up and restore functions
Adding and deleting of files
Fine tuned permissions for different themes and file types
And More....