READERS LIKE YOU! Support TidBITS with a contribution today!
<http://www.tidbits.com/about/support/contributors.html>
Special thanks this week to John O'Shaughnessy, Bob Dolan,
Robin S. Armstrong, and David M. Douds for their generous support!

Use Custom CSS to Tweak TidBITS Display

tekelenb (apparently) - 02:23pm Oct 11, 2007 PST
via email

Re: <http://db.tidbits.com/article/9227>

There's a risk that some other site uses the same class names "head_primary"
and "head_secondary". In your proposed solution the user's Style Sheet would
affect those cases also, not just the TidBITS site.

Ideally, web browsers would allow users to define exactly which site(s) a
particular User Style Sheet should be applied to. Unfortunately they still
don't (browser vendors are still spending half their time making broking web
sites 'work'). A poor man's workaround is for web publishers to set an id on
the <body> element, which provides users with a reasonably reliable method to
write User CSS that targets a specific site only.

The convention is to have the id consist of the site's domain name, replacing
periods with hypens. Thus: <body id="tidbits-com">

The User CSS Style Sheet can then read:

body#tidbits-com .head_primary, body#tidbits-com .head_secondary
{text-transform: uppercase}

HTH

--
Sander Tekelenburg, <http://www.euronet.nl/~tekelenb/>

Mark as Read

dshepherdson (apparently) - Oct 16, 2007 3:33 am (#1 Total: 2)

via email

Posts: 19

Re: Use Custom CSS to Tweak TidBITS Display

On 11 Oct 2007, at 10.23 pm, Sander Tekelenburg wrote:

> Ideally, web browsers would allow users to define exactly which site
> (s) a
> particular User Style Sheet should be applied to. Unfortunately
> they still
> don't

OmniWeb has provided this for quite some time, with its Site-Specific
Preferences. There's also a Firefox plug-in called Stylish that
allows something similar.

David

jesse_the_k307 (apparently) - Oct 17, 2007 5:34 am (#2 Total: 2)

via email

Posts: 1

Re: Use Custom CSS to Tweak TidBITS Display

I wanted to compliment the web redesigners for sensibly including
access features for those of us with print impairments.

-- Audio for every article! Yay! Especially when it's accompanied by
the full text of same.

-- Very thoughtful three column format still degrades quite readably,
even at very large sizes. As the attached screen grab shows, my
default font size is huger than large. Many columnar designs become
illegible at that size. (The handy workaround in that case is the
"linearize" bookmarklet, pasted below.) But not TidBITS! Your clever
placement of the "disembodied heads" above the slogan means that even
when they no longer fit in the masthead, the slogan remains (so
they're *really* disembodied heads).

Great work!
--
Jesse the K -- Madison WI USA -- jesse_the_k

pobox.com
Happiness makes up in height for what it lacks in length.

Here's the "linearize" bookmark, which elongates multicolumn
confusion into legibility.

<javascript:(function(){var%20D=document,e,styles=%
22table,thead,tbody,tr,th,td{display:block!important;}*{width:auto!
important;height:auto!important;position:static!important;float:none!
important;margin-left:0!important;margin-right:0!important;}%
20img,iframe,embed,object{display:none;}%20body%20{margin:4px!
important;}%22;%20e=D.createElement('link');%20e.rel='stylesheet';%
20e.href=window.opera%20?%20%22javascript:'%22+styles+%22'%22%20:%20%
22data:text/css,%22+styles;%20D.getElementsByTagName(%22head%22)
[0].appendChild(e)})()>

TidBITS TidBITS TidBITS Talk Use Custom CSS to Tweak TidBITS Display

Use Custom CSS to Tweak TidBITS Display

Add a message