[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 254
  • Last Modified:

I want different Color setup for printring and for the monitor in my css

I have been making a lot changes to my company intranet including a color change. This meens that when i print out a HTML document the text is blurry. I use #000066 for bagground and #FFFFFF for text. I know it is possable to define a @media in your css file, but i can not make it work. I have included a copy of the css file below. I want it to be BG="#000066" when i see it on screen and BG="#FFFFFF" when i print.

@media screen
{BODY
 BGCOLOR: #000066;
    text: #FFFFFF;
    FONT-FAMILY: Arial, Helvetica;
    FONT-SIZE: 100%;
    FONT-STYLE: normal;
    LETTER-SPACING: normal;
    LINE-HEIGHT: normal
          
h1 { font-family: arial, helvetica; font-size: 22; color: rgb(255,255,255);}
h2 { font-family: arial, helvetica; font-size: 18; color: rgb(255,255,255);}
h3 { font-family: arial, helvetica; font-size: 16; color: rgb(255,255,255);}
h4 { font-family: arial, helvetica; font-size: 13; color: rgb(255,255,255);}
h5 { font-family: arial, helvetica; font size:  8; color: rgb(255,255,255);}

A:link      {color: yellow; text decoration: none}
A:visited {color: yellow; text-decoration: none}
      A:hover            {color: red; text-decoration: none}
      

}


@media print
{BODY
 BGCOLOR: #FFFFFF;
    text: #000000;
    FONT-FAMILY: Arial, Helvetica;
    FONT-SIZE: 100%;
    FONT-STYLE: normal;
    LETTER-SPACING: normal;
    LINE-HEIGHT: normal
          
          h1            { font-family: arial, helvetica; font-size: 22; color: rgb(0,0,0);}
      h2            { font-family: arial, helvetica; font-size: 18; color: rgb(0,0,0);}
      h3            { font-family: arial, helvetica; font-size: 16; color: rgb(0,0,0);}
      h4            { font-family: arial, helvetica; font-size: 13; color: rgb(0,0,0);}
      h5            { font-family: arial, helvetica; font size:  8; color: rgb(0,0,0);}
      A:link            {color: yellow; text-decoration: none}
      A:visited      {color: yellow; text-decoration: none}
      A:hover            {color: red; text-decoration: none}
      

}
0
nicosan
Asked:
nicosan
1 Solution
 
nicosanAuthor Commented:
Edited text of question.
0
 
nissepCommented:
You maybe has forgotten the link to the css file, if you have just put it in the head. Like this.         <head><link rel="stylesheet" type="text/css" href="file.css">
try it out 'cause I didn't notice anything wrong in youre file.
0
 
nicosanAuthor Commented:
I have put the following in my <HEAD>

<LINK REL="stylesheet" TYPE="text/css" MEDIA="screen,print" HREF="allianz.css">
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
TTomCommented:
What little I have been able to find indicates that one way of doing this is to define two separate .css files, one for screen and one for print and then insert two links:

<LINK rel="stylesheet" media="screen" href="screen.css" type="text/css">
<LINK rel="stylesheet" media="print" href="print.css" type="text/css">

Are you willing to go that route?

Tom

0
 
TTomCommented:
I should add that I have found a reference to the "proposed CSS @media construct" for doing what you have attempted in a single file, but I have been unable to find anything about it other than that single phrase.

Tom
0
 
BigRatCommented:
Is it actually implemented?
0
 
VBTomCommented:
Isn't there an option in some browsers that allow you to chose to print backgrounds?
0
 
nicosanAuthor Commented:
BigRat: Yes it is implemented in the CSS2 standard.

VBTom: There proberly is, but it does not help me as i do not know which browsers will hit my page.

TTom: I will try the thing with 2 seperate CSS files.
0
 
nettromCommented:
you'll either have to use 2 CSS-files as Tom suggests, or use the CSS lvl 2 '@media' to defined a separate background for printed media.

if you want to use two files and only want the background to be different, you should be able to assign both style sheets for printed media but get the background right by doing:

<link rel="stylesheet" type="text/css" media="screen,print" href="default.css">
<link rel="stylesheet" type="text/css" media="print" href="changeonlybackground.css">

the cascading rules should then make the background become the one from the last CSS document linked.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now