TOPIC:

Does anyone know how to set up an image to ***not*** print on a page?

I would like to put an image of a button with the caption PRINTING TIPS in my Agenda Header.
I would like to link this button image to an uploaded file containing printing tips for my club's members.
The file would contain suggestions for using page scaling for controlling font size, for example.

The catch is, of course, that I really do not want the "button" to print with each agenda.

Is their some way to set a Span or Div style (or other method) on the image so that it does not print?

there is a css to affect printing, google is your friend

The FTH print CSS has a class called 'no print' you can call.

Hey Brian,
I just noticed -webkit-print-color-adjust: exact is on the print CSS. Has this been there all along or recently added?

Ok, I just tested the .noprint class out for a button image and it works *great* for what I am trying to do.

Now I can put whatever custom "buttons" or links I want in my Agenda Header, link them to whatever I want, and the buttons or links do not print.

Perfect!!!

Very handy! I shall add this to my box of tricks.

I am moving this to the Tips and Tricks section...

Upon further investigation, it turns out that there is a small caveat with this approach.

Once you enter the link target for the button image, the image takes on a border that does not go away with .noprint.

The workaround that I came up with is to explicitly set the image border to be 1 pixel with a white color.
Then everything works as intended regardless of whether the link has been set or not.

As an example of what I am talking about, see the attachment which show the image settings I came up with for my button image.

Also, I have attached a screen shot of my resulting button. I will probably refine it a bit, but it works fine for now. Right now, I am just linking to the FTH2 FAQs, but I will probably come up with a Printing Tips document to link to.

BTW, for some reason using a link with a bookmark to the Agenda FAQs does not seem to land on the right spot on the FAQs page. I ended up ditching the bookmark part of the link.

Brad,

I have gone further with this, but the.noprint approach still is not quite working as expected....

Please take a look at the two attachements... "Agenda Buttons" is excerpted from a screen shot of my agenda screen with the "buttons" added to the agenda header. I have added the .noprint class specification to each button image--I also added it to the links that were applied to the button images. "Agenda Buttons Print" is what I get when I actually send the Agenda printout report tab to the printer (or print preview). Previously, I had not actually done a print preview--just looked at the printout tab.

The white border takes care of the link display issue as previously noted, but as you can see, for some reason, parts of the "buttons" still show on the actual printout even though they do not show on the agenda printout tab.

Any thoughts on how to correct this? I want the buttons on the agenda screen, but I don't want buttons on my printouts.

BTW, the Printing Tips button goes here and actually references one of your past message threads.

Ok, never mind. I have figured out my own issue.

When you use the .noprint class for this type of approach, you have to create a <div> container around all of the page elements that you do not want to print and apply the .noprint class to the <div> container. If you apply the .noprint class to the individual images/page elements, you still get parts of them showing up on the end output.

I have not used <div> containers for much other then inserting background shading on pages... This is obviously a new use I will have to keep in mind.

Using inline media CSS works outside FTH. See if this works inside using this code:

Here is a basic button.


This button has a bit of styling to it using red/gold TM colors.