switching style sheets

[cajchris]

I am implementing a web site where there are 'print this page' links on each page, and when clicked it will show the same page again only with certain things removed, ie images, styles etc. there will be another CSS file that will be used for this print view, but I am wanting to know how would you switch between CSS files for this to work.

regards
cajchris

 

[BabyJeffy]

You can change the media that the style sheet applies to. So you can have a normal stylesheet, and then (afterward in source order) a print stylesheet that makes some things invisible etc. Both can be on the same page at the same time... if you view the site in a regular browser you still see all the normal things, if you print the page, then the print stylesheet comes into effect.

This means you can get rid of the whole "pop up the print page in a new window" idea!

Some further explainations:

http://www.w3.org/TR/REC-CSS2/media.html

http://www.alistapart.com/articles/goingtoprint/

http://www.meyerweb.com/eric/articles/webrev/200001.html

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

 

[cajchris]

hmm i was just thinking. the default style sheet doesnt have references to the links of background images and list style images, as these images are bound when the editor is making a page.

i am using an application called infoglue which allows pages to be developed based on components. so the developer of a web site can make a web page and bind images from external locations to the page. so essentially switching style sheets wouldnt make the images disappear.

any ideas how i would get round this?

regards,
cajchris

 

[BabyJeffy]

Just give all the links (that you don't want to print) the same class and then set up a style in your print stylesheet that doesn't print this class. Easy

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

 

[cajchris]

here is a snippet from my home page:

<span id="HyperLink" title="nominet Home Page" style="background-image: url('/infoglueDeliverWorking/digitalAssets/51_Logo_New_Nominet_Main.gif')">

now when the printable page is being viewed i wouldnt want the background image to be there. however this has been coded like this using infoglue:

<span id="HyperLink" title="nominet Home Page" style="background-image: url('$logoImage')">

where $logoImage is a velocity variable that has been set by the web developer when creating this home page.

so simply having an empty class in the print CSS called HyperLink wont remove the image as it is not coming from the original CSS

 

[BabyJeffy]

This will solve that problem...

span#HyperLink {
  background-image:none;
}

And if you used a class for all such links (instead of unique IDs), then you would be able to have one such style (rather than many that match each ID) in your CSS.

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

 

[cajchris]

this doesnt seem to work as the background image in question now appears but with no style reference as i removed all properties from the HyperLink entry and put in none for the background image but the image still appeared.

 

[cLFlaVA]

i just wrote an FAQ on this topic: faq216-6093

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
beware of active imagination: [URL unfurl="true"]http://www.coryarthus.com/[/url]

BillyRayPreachersSonIsTheLeetestHax0rDude

 

[BabyJeffy]

Make sure you have the print style sheet after and other stylesheets (or styles) on the page... and to avoid specificity issues, you can use !important in your css to ensure the item doesn't display.

Looking again at the replies, I reckon the following is what you want...

span#HyperLink {
  display:none !important;
}

Same as before, it'd be better if you used a class to reduce the amount of declarations you'd have to do. Still, if it's dynamic then it's not a worry

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

 

[cajchris]

i now have a new problem. while

span#HyperLink {
display:none !important;
}

does ensure the background image doesnt appear, it also now results in the text that is on top of the area covered by the background image also doesnt appear. which is not the result i am after, as everything else should still remain there

regards
cajchris

 

[Vragabond]

Then don't hide it, but just remove the background:

span#HyperLink {
  background: transparent !important;
}

 

[cajchris]

cheers Vragabond much appreciated

regards
cajchris