2

I have this webpage: enter image description here

It looks like this when I try to print it: enter image description here

It's missing the last item (user management) intentionally so that's not a problem. But I'd like to hide the "(/campaigns)" and "(/profanity)" from the print.

Is that possible using CSS?

--EDIT-- This is the HTML:

<div class="row">
    <div class="item col-xs-12 col-sm-6 col-md-4 text-center">
        <div class="lead">Campaigns</div>
        <a href="/campaigns" class="text-muted">
            <i class="fa fa-bullhorn"></i>
        </a>
        <table class="table table-striped table-condensed">
            <tbody><tr>
                <th>Campaigns active</th>
                <td>1/1</td>
            </tr>
            <tr>
                <th>Total posts</th>
                <td>149</td>
            </tr>
        </tbody></table>
    </div>
    <div class="item col-xs-12 col-sm-6 col-md-4 text-center">
        <div class="lead">Profanity</div>
        <a href="/profanity" class="text-muted">
            <i class="fa fa-filter"></i>
        </a>
        <table class="table table-striped table-condensed">
            <tbody><tr>
                <th>Created profanity filters</th>
                <td>0</td>
            </tr>
            <tr>
                <th>Total words filtered</th>
                <td>0</td>
            </tr>
        </tbody></table>
    </div>
        <div class="item col-xs-12 col-sm-6 col-md-4 text-center">
        <div class="lead">User management</div>
        <a href="/account" class="text-muted">
            <i class="fa fa-users"></i>
        </a>
    </div>
    </div>
Moak
  • 12,596
  • 27
  • 111
  • 166

3 Answers3

1

The @media tag supports print.

So if you want your blocks not to be displayed when in print, use the following code:

@media print {
.noprint {
    display: none !important;
} }

Just add "noprint" to any element you want.

Astinox
  • 154
  • 1
  • 10
  • Yes I know, I already have that (using bootstrap). Using that, the whole element is hidden on print, I want to hide jus the "(/campaigns)" and "(/profanity)". I've displayed the HTML code now. –  Jun 26 '15 at 11:52
0

add a class to your CSS called noprint for paper:

@media print {.noprint{display:none;}}

and then append that class to your code

eg:

<div class="comment noprint"> ... </div>
JoSSte
  • 2,953
  • 6
  • 34
  • 54
0

I recognize the classes, this is a bootstrap issue, as you will find in bootstrap.css this rule

@media print {
  ...
  a[href]:after {
    content: " (" attr(href) ")";
  }
  ...
}

overwrite this rule and you should be golden, eg content:none;

Moak
  • 12,596
  • 27
  • 111
  • 166