WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: looking for a tutorial for beginners on making a computer more accessible to someone with low vision

for

From: Jeevan Reddy
Date: Aug 16, 2010 12:30AM

Hello sandy
here i'm giving solution to your second paart of your problem, i.e how
to create custom style sheet.
Creating a custom CSS file
Copy & paste the following lines (from the box below this text) and save the
file as "design/tscm/stylesheets/tscm.css".
body
{
background-color: #ffffff;
background-image: URL("../images/background.png");
background-repeat: repeat;
}

p
{
font-size: 80%;
}

td
{
font-size: 100%;
}

hr
{
height: 0px;
}

a
{
color: #444444;
}

a:visited
{
color: #666666;
}

a:hover
{
color: #aaaaaa;
}

.main
{
width: 732px;
margin-left: auto;
margin-right: auto;
}

.border
{
color: #ffffff;
background-color: #333333;
}

.menu
{
width: 80%;
background-color: #474747;
margin-left: auto;
margin-right: auto;
text-align: center;
font-size: 80%;
padding: 2px;
}

.menu a
{
color: #cccccc;
}

.menu a:visited
{
color: #bbbbbb;
}

.menu a:hover
{
color: #eeeeee;
}

.content
{
padding: 32px;
text-align: left;
}

.footer
{
color: #bbbbbb;
background-color: #333333;
padding: 4px;
text-align: center;
font-size: 70%;
}

.footer a
{
color: #eeeeee;
}

.footer a:visited
{
color: #eeeeee;
}

.footer a:hover
{
color: #ef8e00;
}

.pagetitle
{
font-size: 170%;
padding-bottom: 8px;
}
Using the custom CSS file
Edit the main template file ("design/tscm/templates/pagelayout.tpl"). In the
head section, add the following code after the already existing
stylesheet-related lines:
<link rel="stylesheet" type="text/css"
href={"stylesheets/tscm.css"|ezdesign} />
This line will tell eZ publish to make use of the custom CSS file that we
just created.
After you refresh the TSCM page in the browser. You should see that the
background has changed from plain white to grayish vertical stripes. (If the
background does not change, try to clear the

see below how to change font size in different browsers.
ost Web browsers include functionality to let you increase or decrease the
text in a Web page. For example, to increase text size: Browser Example Menu
Items *Macintosh Shortcut* *Windows Shortcut* Internet Explorer

[image: Internet Explorer screen capture as described in the page]
View >
Text Size >
Largest . . Firefox,
Netscape [image: Firefox/Netscape screen capture as described in the page]
View >
Text Size >
Increase *Command+* *Ctrl++* Opera [image: Opera screen capture as
described in the page]
View >
Zoom >
%

*Command+*

*+*

*or*

*0*
Safari [image: Safari screen capture as described in the page] View >
Make Text Bigger *Command+* . Why doesn't this work with some
On Fri, Aug 13, 2010 at 8:32 PM, Sandy < <EMAIL REMOVED> > wrote:

> hello list,
>
> Can someone please point me at a good tutorial for beginners on making a
> computer more accessible to someone with low vision?
>
> I am hoping to find something that explains how to increase the
> computer's default font size, how to use custom style-sheets on web
> sites and anything else that this very knowledgeable crowd would
> consider useful.
>
> thanks!
> Sandy
>