Style for Safari?

Need technical advice on coding your web pages? Covers HTML, JavaScript, CSS, and some server side technologies. Also the issue of some webpages not displayed well.

Style for Safari?

Postby Anonymosity » Thu 22 Oct, 2009 4:49 pm

I set up a stylesheet to be used to change the colours of page elements in Safari. The background colour changes work, but the text colour does not always override the colour set in the page code. Why is that? I used !important to try to force my colour to override, but that does not seem to work with text.

Is there any way to set a stylesheet to change the colours only if the background is lighter than a certain value? Is there any way to embed javascript code in a stylesheet, to be used with Safari?
UserAgent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X; rv:1.9.1.3) Gecko Firefox/3.5.3
Anonymosity
silver member
silver member
 
Posts: 396
Joined: Sat 21 Jun, 2008 2:56 am

Postby Antony » Thu 22 Oct, 2009 10:49 pm

Can you show the part of the code that specifies the text colour?

Have you tried something simpler like
Code: Select all
body {color:red}
h1 {color:#125698}
p.test {color:rgb(0,0,255)}
UserAgent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-US; rv:1.9.1.3) Gecko/20090824 Firefox/3.5.3
User avatar
Antony
diamond member
diamond member
 
Posts: 15168
Joined: Tue 18 Jun, 2002 11:36 pm
Location: Sydney, Australia

Postby Anonymosity » Fri 23 Oct, 2009 12:42 am

Yes, I can give you the code that I used to specify the colours.
Code: Select all
body {background-color: #A0FFB0 !important; color: black !important;}
table,td {background-color: peachpuff !important; color: black !important;}
div {background-color: silver !important; color: black !important;}

What does p.test mean in your example?
UserAgent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X; rv:1.9.1.3) Gecko Firefox/3.5.3
Anonymosity
silver member
silver member
 
Posts: 396
Joined: Sat 21 Jun, 2008 2:56 am

Postby Antony » Fri 23 Oct, 2009 6:01 am

Your code looks fine to me.

Anonymosity wrote:What does p.test mean in your example?

It means the for the [tt]test[/tt] class under [tt]P[/tt] element.
e.g.
Code: Select all
<p>Hello, this is P.</p>

<p class="test">Hello, this is P.test.</p>
UserAgent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-US; rv:1.9.1.3) Gecko/20090824 Firefox/3.5.3
User avatar
Antony
diamond member
diamond member
 
Posts: 15168
Joined: Tue 18 Jun, 2002 11:36 pm
Location: Sydney, Australia

Postby Anonymosity » Fri 23 Oct, 2009 1:35 pm

The problem is that my code does not always override the text colour. For instance, on this page, the background is as I specified, but most of the main body text is white, not black.
http://alum.wpi.edu/~geezer/maiden.html

The text that is normally yellow turns black, but the white text remains white.
UserAgent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X; rv:1.9.1.3) Gecko Firefox/3.5.3
Anonymosity
silver member
silver member
 
Posts: 396
Joined: Sat 21 Jun, 2008 2:56 am

Postby Antony » Fri 23 Oct, 2009 10:13 pm

The linked page does not have any CSS included.

I am a bit lost what you want to achieve.
UserAgent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-US; rv:1.9.1.3) Gecko/20090824 Firefox/3.5.3
User avatar
Antony
diamond member
diamond member
 
Posts: 15168
Joined: Tue 18 Jun, 2002 11:36 pm
Location: Sydney, Australia

Postby Anonymosity » Sat 24 Oct, 2009 12:25 am

That page uses HTML code to set the colours. Does that mean that one cannot use a browser content stylesheet to override text colours if they are set with HTML code?
If the background of that page is normally black, and I change it to light green, but most of the text is white, it is very difficult to read. The reason I am using the stylesheet to change the colours is because white backgrounds bother my eyes. They are too bright. If there were some way to detect whether the brightness of the background is very light and if so, just change the background for that, it would be fine.
UserAgent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X; rv:1.9.1.3) Gecko Firefox/3.5.3
Anonymosity
silver member
silver member
 
Posts: 396
Joined: Sat 21 Jun, 2008 2:56 am

Postby Antony » Sat 24 Oct, 2009 1:38 am

Anonymosity wrote:That page uses HTML code to set the colours. Does that mean that one cannot use a browser content stylesheet to override text colours if they are set with HTML code?

Even the page uses HTML to set the colour, the colour (and all other styles) can stilled by specified (changed) by CSS.
So you want to overwrite the style and colour settings originally set by the authour of that page, just on your browser?
OR
You want to change the display of that page or everybody would read it differently?
UserAgent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-US; rv:1.9.1.3) Gecko/20090824 Firefox/3.5.3
User avatar
Antony
diamond member
diamond member
 
Posts: 15168
Joined: Tue 18 Jun, 2002 11:36 pm
Location: Sydney, Australia

Postby Anonymosity » Sat 24 Oct, 2009 4:09 pm

You want to change the display of that page or everybody would read it differently?

I cannot very well do that, since it is not my page.
I want Safari to display any page with the colours set the way I specify, unless there is a way to get Safari to examine the background and just change it if it is too bright. With Firefox, I have a nice extension that dims the background if it is too bright, but I have not found any such thing for Safari, so I settled for an imported stylesheet instead. I guess I could just make the background colours a bit darker to read both white and black text on them.
UserAgent: Mozilla/5.0 (Windows; U; Windows NT 5.1; rv:1.9.1.3) Gecko Firefox/3.5.3
Anonymosity
silver member
silver member
 
Posts: 396
Joined: Sat 21 Jun, 2008 2:56 am


Return to Web Design and Page Coding

Who is online

Registered users: Baidu [Spider], Bing [Bot], Google [Bot], Steeler [Crawler]