[pmwiki-users] Proposition for a new PmWiki Skin

Lars Eighner surname at larseighner.com
Tue Oct 11 04:31:29 CDT 2011


On Tue, 11 Oct 2011, Eric Forgeot wrote:

> On 09/10/2011 05:12, Kathryn Andersen wrote:
>> Still, the menu text is too pale.
>
> I've updated the theme, now the text menu is slightly less pale:
> http://anamnese.online.fr/pmwiki-efo/index.php/PmWiki/PmWiki
>
>> You should allow people to set their own text size; don't mess with
>> the default size.
>> Some people need very large font sizes, and others, small.
> how that setting their own size? With a menu and some javascript?
> Generally people can change the font size using some options in their
> browser (ctrl + mousewheel being the quickest)
> If they are really picky about this, they probably already have their
> own css rule they can apply on every website (Firefox allows this)
>
> The behavior for changing fonts can be different according to the
> browser. For example Firefox will only resize fonts,

This has not be true for several recent versions of Firefox.  Users can
elect to zoom text only or all elements together (View -> Zoom -> check or
uncheck 'Zoom Text Only' -- or depending on the implementation this may be
Alt-V Z T).

> while Opera will
> resize background and images as well. I see now there is also an option
> to change the images as well in Firefox.

Yes, as above.

>
> Besides, I've heard there are also default font size differences among
> browsers. Maybe it changed since then.

Yes, but since you have no way of know whether the user has change the
default to suit him- or herself, you cannot help matters by trying to set
it.

However, there is a difference in the relative sizes of headings between
browsers.  You can achieve a more uniform crossbrowser appearance for you
pages by starting all stylesheets with a section to standardize this and
other variations between browsers such as

/* This section address variations in browser default values */

.clear
{
 	clear: both;
 	padding-bottom: 1px;
 	margin-bottom: -1px; 
}
.hide, .divider
{
 	display: none;
}
.inside
{
 	padding: 0 1em;
}

ul, ol, dl, p, h1, h2, h3, h4, h5, h6
{
 	margin-top: 14px;
 	margin-bottom: 14px;
 	padding-top: 0;
 	padding-bottom: 0;
}
h1
{
 	font-size: 220%;
}
h2
{
 	font-size: 190%;
}
h3
{
 	font-size: 160%;
}
h4
{
 	font-size: 110%;
}
h5
{
 	font-size: 100%;
}
h6
{
 	font-size: 70%;
}

a, a:link, a:visited, a:active
{
 	text-decoration: underline;
}
a:hover
{
 	text-decoration: none;
}
a img
{
 	border-width: 0;
}
code
{
 	font-family: "Courier New", Courier, monospace;
}
label
{
 	cursor: pointer;
}
table
{
 	font-size: 100%;
}
td, th
{
 	vertical-align: top;
}
span.strike
{
 	text-decoration: line-through;

/* end standardization section */

These values may not suit you as a standard, and in particular stylesheets
you will almost always override some of them either in general or in
particular cases.  The beauty of the cascade (the c in css) is that
subsequent and more particular style will override these.

>
> For webmaster, with em they just need to change the default font to
> change the whole appareance. I've turned back to px for placing elements
> around the banner, because it's easier to alter later.
>
>> Which means one shouldn't customize the font size.
>>
>
> webmasters need to customize it

When this has to be done for banners and special features, it can be done by
using id to style particular parts.

Float and percentages should allow text-only zooming to work (at least
through three or four notches) without horizontal scrolling in a well
designed page.


-- 
Lars Eighner
http://www.larseighner.com/index.html
8800 N IH35 APT 1191 AUSTIN TX 78753-5266




More information about the pmwiki-users mailing list