I have a panels 3 display that I'm using printer friendly link with.

When the view is displayed to the user, they will see the delete node link and the edit node link on each line of the table.
(The nodes are displayed as rows in a table).

When I print the page, I don't want the edit link and the delete link to be on the printable page.

I tried overriding the print.css file (successfully) through the print UI.
I can change the background colors of the body, headers, etc.

However, when I reference the field I can't seem to hide it. No doubt ignorance on my part.
td.view-fields view-fields-node-edit { display: none; visibility: hidden; }

So, I'm beginning to think I should create one view with the links and one view without the links. Then I'd need to pass the 'no-links' views name to the print module.

I'm floundering.. could you point me in a direction which might be more fruitful?

Comments

jcnventura’s picture

jcnventura
Primary language English
commented
Status: Active » Postponed (maintainer needs more info)

In which CSS file are you placing that style? Note that the module forcefully removes from use any theme-related CSS (to prevent the theme from messing up the simpler display). There's a print.css file provided with the module which is the one used by default unless you specify another CSS file in the settings.

João

bekasu’s picture

bekasu commented

i copied the print.css file that came with the module into the theme directory & made the changes.
Used the module admin UI and pointed it to the file so it wouldn't take the default print file.

I putzed with the file (changed the background color of the td entry in the print.css file to be red and that worked).
I did have to start clearing the browser cache to see the changes.

Thought maybe i needed to reference the TR class or the TABLE class or the Content DIV in addition to the TD but basically I can't seem to get the module to recognize that I don't want to include certain table columns (or cell contents) on the print page.

I'll keep trying.

bekasu’s picture

bekasu commented

here is what works...

td {
background-color: red;
}
---- turns it red

td.views-field {
background-color: blue;
}
--- turns it blue

td.views-field views-field-edit-node {
background-color: green;
}
--- does nothing

td.'views-field views-field-edit-node' {
background-color: green;
}
--- does nothing

I was expecting the td.views-field views-field-edit-node entry to turn the background green.

Not sure what to try now.

bekasu

newtonpage’s picture

newtonpage commented

I think that the syntax of the CSS is malformed. Please note that you must specify each term in the selector.

Thus, td.views-field views-field-edit-node will not work in any case (and nor the command that follows -- a 'feature' of CSS). Note that the first selector (td.views-field) points to all table data with the class - - whereas, the additional selector (separated by a 'space'), 'views-field' has no element type reference - - it must refer to an ID or a class. Thus, css does not know how to find 'views-field-edit-node'. You must prepend either class notator (.) or an id (#).

Thus, this must read either td.views-field .views-field-edit-node or td.views-field #views-field-edit-node - - and I suspect that it is the former.

It is usually best to run your css through the W3 css validator (jigsaw.w3.org/css-validator) - - there you can simply copy and paste you code and it will flag these sorts of errors.

cheers

bekasu’s picture

bekasu commented
Status: Postponed (maintainer needs more info) » Closed (fixed)

You were correct...

Although the page source displays this: <td class="views-field views-field-edit-node">

which contains a blank in the middle of the td class name

- I had to change the blank to a dot to get it to work.

td.views-field.views-field-edit-node {} works whereas td.views-field views-field-edit-node does not.

I'm marking this closed.

jcnventura’s picture

jcnventura
Primary language English
commented

@bekasu: you should really try to learn about CSS selectors before trying to edit CSS files. It's quite simple to understand, but not intuitive and until you learn it, you'll be changing stuff to make things work without a clue why you're making it work.

Take this case, the definiton for that TD tag contains two classes, so you may apply styles to it using any one of those classes. Taking your example in #3:

td: applies to all TD elements regardless of class
td.views-field: applies to that TD since it correctly specifies the tag and one of its classes
td.views-field views-field-edit-node: doesn't apply to that TD since it would apply to a <views-field-edit-node> tag that is a child of that TD. Note that there's no such tag in any variant of HTML, so in practice, it applies to nothing.
td.'views-field views-field-edit-node': applies to nothing and is most likely a CSS specification error

It is now working for you because in practice, you're specifying one class with a large name, containing a dot in it which is probably invalid CSS, but the browsers you tested don't seem to have a problem with that, although that may change in the future.

I suspect that the class you really wanted to use was td.views-field-edit-node. You'll have to revert your changes to the page source/template, though.

bekasu’s picture

bekasu commented

Thanks very much for the caution that browsers degrade gracefully - sometimes!

I took your advice and bought myself an o'reilly book on css.

A Class identifier applies to many, an ID identifier applies to one.
visibility: hidden - leaves the spacing as if the element were there, but does not show it
display: none - removes the element & tightens up the spacing

This is way kewl. Simple, small amounts of code make huge UI improvements without mucking around with the .tpl files

Again, I appreciate your time and explanations and will pay it forward soon.

bekasu