Use CSS to prevent selected styles from going to Print?

[parsonsv]

CSS gurus - please help. I'd like to print topics to PDF, but globally I'd like toggles and H3 styles to NEVER appear in the print. I know I can individually apply conditional text to these items, but I'd rather set one time in the CSS to exclude those items from print and save the hassle of applying all those tags.

Is that possible?

Thanks

[doc_guy]

Do you just want the H3's to never appear? Or do you want all <p> tags AFTER the h3's to never appear in print as well?

If you can narrow it down to the specific tags that you NEVER want to show in print, then you can go to the print-section of your style sheet (say in Notepad or another text editor), and you can add the following declaration:

Code: Select all

display: none;

So, for example you can set the following:

Code: Select all

@media print{
  h3 {
     display: none;
  }
}

How this actually displays depends on whether you are setting it on an in-line or a block-level element, so you'll have to experiment and see what happens.

[parsonsv]

Alright - fantastic. So far, I only want three things hidden, so I'll give your suggestion a try and see if they disappear in the print (thanks):


MadCap|toggler
{
mc-disable-glossary-terms: true;
}

h3.MiniTOCHeading
{
mc-next-class: LinktoInTopicText;
mc-next-tag: p;
font-size: 13pt;
border-bottom-style: Solid;
line-height: 200%;
color: #989898;
border-bottom-width: 1px;
border-bottom-color: #c0c0c0;
}

li.WhatDoYouWantToDo
{
font-size: 12pt;
x-on-hover: fontchange(Underline=on);
color: #427ccb;
list-style: url(TopOfPage.png);
margin-top: 9pt;
}

[LTinker68]

You might want to go up one level on that list item. That is, hide the ol or ul tag containing list items of that class. The reason is, depending on what you have set on the ol/ul tags, you could end up with empty space where the list would be, but the spacing, for instance, may be coming from the ol/ul tag, not the li tag. Likewise, if you set a border on the list but not the list item, the border would appear because the ol/ul tags are still present, even if there isn't any text that appears inside the ol/ul tag.

That will probably require you to create classes for the ol and ul tags so that you can have those classes hidden in the output.

[parsonsv]

Ok, that works perfect for my H3 style and for my link style. However, I'm still having problems keeping toggles (and toggle text) from appearing in the print. Do you have any idea how I might solve that?

[LTinker68]

Hmmm. I wonder if what you specified for expanding text in the Target Editor > Printed Output has an affect on that? If you have it set to convert it to inline then it may no longer use the MadCap|toggler style so setting display:none; on the MadCap|toggler style may not work. If you have that option chosen, then try selecting the option to remove the "body" and see if it honors the style then (or vice versa).

If that doesn't work, then you might have to put the togglers in a DIV. You wouldn't have to specify any settings on the DIV (except perhaps to override any styles it might inherit); its purpose would just be to allow you to hide the contents of that div by its class name.

Wait, are you trying to get rid of the entire toggle (clickable text and text to be revealed), or do you just want to get rid of the clickable text (the text that has the hyperlink used to reveal the other text)?

[parsonsv]

The entire toggle

[LTinker68]

Yeah, I can't figure it out either. Submit a bug report or a trouble ticket, if you have a maintenance plan. In the meantime, use conditional tags.

[parsonsv]

My Expanding Text Effects was originally set to Convert to Footnotes. I tried your suggestion to change it to Remove the "body". What happens in both instances is that the text of the toggle still appears in the output, but the toggle itself disappears. What I'm trying to do is make the toggle and the text disappear. I can accomplish this by applying conditional text to the toggles for ONLINE ONLY, but I'm trying to avoid having to manually do that for all the toggles in the help.

Below is what I put into the style sheet to try to make the toggle disappear (this did not work):

Code: Select all

MadCap|toggler
	{
		display: none;
	}

And, the following is the code in the topic for a toggle:

Code: Select all

<p>
     <MadCap:toggler targets="test">Test Toggle</MadCap:toggler>
</p>

Because the toggler is actually within a P tag, am I stuck having to manually apply conditional text to it in order to make it disappear in the output?

[parsonsv]

Ok Tinker, thanks

[parsonsv]

I just chatted with support. They say this cannot be done. Full stop. I have to apply conditional text to togglers.

[LTinker68]

If Support didn't already do it when you were talking to them, make sure you submit a feature request asking for additional options in the target regarding how to handle togglers, specifically. I'm thinking two new options, one to hide the toggler hotspot link text but retain the items that were toggled, and another option to hide both the hotspot text and the items it was set to toggle. I would definitely use the first option because I have "View the screenshot" and "View all screenshots" toggle hotspots that I'm currently conditioning out, but having it automatically remove those hotspots for print output would be great.

I'll submit a feature request, too.

[parsonsv]

Agreed! I put in a feature request too, and I copied the link to this thread for additional information. Thanks for your help - once again!

[doc_guy]

Sorry it wasn't more productive!

[parsonsv]

hey doc_guy - I used your suggestion for the paragraph styles. That worked fantastically. So, besides the toggle issue, you solved most of my problem. Thank you.

[doc_guy]

no-problem!