I've seen a lot of references to referencing CSS files, and using CSS inline to style content in the view, but I can't see where I do this in the UI.

Most of the issues i've read are for version 6.x - has the same been implemented in 7.x ?

Thanks so much for the module - I have a complicated Use case, and yet it has done everything I need - apart from the styling!

Thanks for any advice given.

Comments

gillarf’s picture

Status: Active » Closed (works as designed)

I'll answer my own question - use the dev version...

gillarf’s picture

Status: Closed (works as designed) » Active

Reopening this - i have found how to link to the CSS file, but no styles get applied.

I am assuming the HTML rendered on a page display for the the view is the same that is rendered on the PDF, is that right?

Are there any tricks I am missing?

gillarf’s picture

Status: Active » Closed (works as designed)

I'll answer this question as well if anyone else has the same problem

Do not use a forward slash when you reference your CSS file. So reference your css with 'sites/all/themes..' etc.

And yes, inspect the HTML output with a page display, the same elements can be referenced with CSS in the PDF as far as I can tell.

Not all CSS works though.

...how come as soon as I post a question I find the answer.

nandwabee’s picture

Needing your help on this one.

Could you provide a slightly detailed procedure of how you got this to work.Am stuck.

Thank you.

gillarf’s picture

Funny enough i've returned to my view again today.

1. Make sure you have the dev version of views pdf
2. Create your view with a page display.
3. Create new pdf.css file in your theme and add it in your info file. Use your CSS to get the view content in your page siaply roughly the way you want (using theme CSS file for example). NB you can only really style simple CSS like colors, padding, margin, borders, etc. The reason for doing this is that you can inspect the CSS with firebug (you can't on the PDF)
4. Create your PDF display in views. For position of fields use the views UI (under PDF fields).
5. Add the path to your CSS file in your view under PDF Settings - do not have a slash at the beginning.
6. Don't forget to remove the pdf.css file from your theme info file.

That's it - should work. If you miss out some settings under PDF fields, the field will NOT appear.

I would suggest doing a really simple view at first to get a feel for it.

nandwabee’s picture

@gillarf Thanks a bunch. It's working pretty well.

nandwabee’s picture

Oops! Celebrated before hand.Its possible to attach a css file but now i get this error TCPDF ERROR: Some data has already been output, can't send PDF file

gillarf’s picture

nandwabee’s picture

Interestingly I had applied the same patch to rc1 and it worked and It's what I've been using until I hit the rocks lately.Now am unable to apply the patch.All I get are errors.Lemme keep trying though.

gillarf’s picture

The patch only adds a single line so you can check easily.

In views_pdf_plugin_display.inc, at around line 106, make sure this line:
ob_clean();

Appears before this:
if ($destination == 'I') {
echo $this->view->pdf->Output($path_to_store_pdf, $destination);
exit();

You might need to clear all caches.

nandwabee’s picture

Thak you so much.Its worked. Now to wrestle with TCPDF :)

gillarf’s picture

No worries - all the best.

s.Daniel’s picture

Version: 7.x-1.0-rc1 » 7.x-1.x-dev
Component: User interface » Documentation
Category: support » feature
Status: Closed (works as designed) » Postponed

Reopening since documentation needs this information as soon as this feature hits the next release.

hockey2112’s picture

This is giving me a lot of trouble. I added a CSS file with a few very basic CSS selectors, but the PDF seems to be completely ignoring it.

I tried with both the "sites/" path and the full url.

I also grouped a few fields via rewriting another field (as outlined here: http://www.arsnova.cc/web-development-articles/2012-07-27/grouping-field...) and added a DIV with a class to that rewritten field... but the CSS is still not taking effect on the PDF.

Any ideas of other things I can try? I have my PDF Page view set to "PDF Unformatted" and "PDF Fields"... does that cause it to ignore the CSS file?

gillarf’s picture

what styles are you trying to apply?

It will only accept certain, fairly basic styles - size, color etc.

Positioning you should do with the settings in the view (i think PDF field settings)

hockey2112’s picture

Here is a sampling of the items from the CSS file:

.views-field-field-registration {
	background-color: #ffff00;
}

body {
	font-weight: normal;
}

.specs {
	color: #ffff00 !important;
	background:#ffff00;
}

(specs is the class I applied to a div in the rewrite of a field)

gillarf’s picture

Have you tried testing a really simple CSS rule? e.g.

h1 {
color: red;
}

if that works, its your CSS.

Because you can't interrogate the markup in your PDF with firebug, you could create a normal page display in the view, and apply the style to that, to make sure your CSS is right.

It definitely works - are you using the dev version of the module?

goofr’s picture

hockey2112,

Did you find any solution yet?
Css styles are getting applied on p and img tags, but all the rest (what you define in the Views UI) is ignored.
If I try to change the output in PHP Code Before Output: $content = "
". $content . "

"; fe, still no result.

Any ideas?

Thank you

Frank

hockey2112’s picture

Frank,

I had given up on this module, opting for the Print module instead, but even that module has difficulty taking my CSS into account. So, unfortunately, I do not have any solutions for Views PDF. I am, however, re-investigating it to see if I can help to figure out how to theme the PDF.

One strange thing I have come across in my generated PDFs is that some of the text is duplicated on top of itself... in other words, there are 4 or 5 copies of each piece of the text in question, stacked one on top of the other. I wonder what is causing that...

Have you made any more headway?

jaysonjaynes’s picture

Category: feature » support
Status: Postponed » Active

I'm having some issues with implementing CSS as well. I'm using the dev version, and have applied this fatal error patch.

I've gone through and did what you suggested, step-by-step, and it looks like the CSS is loading, it's just very, very limited from what I can tell. I can only do font color on an element, like

or
, no classes or ids. I can't seem to get padding or margin. I'm attempting to use all sorts of measurements, from ems to percentage, to millimeters, to inches.

When I try to position them with the interface, the all are stacked on top of one another. Am I doing something wrong? Seems like you should be able to do a few more things, like padding or margin, but I can't get it to work.

Any advice would be so helpful! Thanks.

gillarf’s picture

When I try to position them with the interface, the all are stacked on top of one another.

You probably need to set the position of the field in the pdf fields settings. e.g. If you want to follow on from the last item, choose that option.

Without doing that, I think the fields will just stack on top of one another.

I didn't have much luck with padding or margins either. However I did find that padding (or margin) was being added automatically to the markup surrounding the fields, so you might want to edit the field settings, and experiment with the markup around the field, the field label, and the whole field-label item (sorry I forget the terminology, but its in the individual field settings, possibly in style settings.

If you really need to, you can rewrite the output of the field exactly as you want to.

killua99’s picture

Status: Active » Postponed (maintainer needs more info)
Issue tags: +Needs steps to reproduce

Dear fellow Drupal enthusiasts,

I have set this issue to "Postponed (Maintainer needs more information)".

If not already done please add an issue summary and steps how to reproduce the problem.
And please read again, "Making an issue report".

Help about how to do this can be found on IRC and in the user groups.

After there is new information, please re-open the issue by changing the status to active.

--
This issue was edited with the help of Issue Helper

nhck’s picture

Status: Postponed (maintainer needs more info) » Active

I basically had code like this:

 <div class="views-field views-field-rendered-entity">        <span class="field-content"><div class="field field-name-field-organization field-type-text field-label-hidden"><div class="field-items"><div class="field-item even">Hochschule</div></div></div><div class="field field-name-field-department field-type-text field-label-hidden"><div class="field-items"><div class="field-item even">School</div></div></div><div class="field field-name-field-name field-type-text field-label-hidden"><div class="field-items"><div class="field-item even">Mr. Q</div></div></div><div class="field field-name-commerce-customer-address field-type-addressfield field-label-hidden"><div class="field-items"><div class="field-item even"><div class="street-block"><div class="thoroughfare">Str. 1</div></div><div class="addressfield-container-inline locality-block country-DE"><span class="postal-code">01279</span> <span class="locality">Dresden</span></div><span class="country">Germany</span></div></div></div></span>  </div>  </div>

and a css like this:

html, body, div{
margin-top: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-bottom: 0px;
border-top-width: 0px;
border-bottom-width: 0px;
border-top-style: none;
border-bottom-style: none;
}

This produced a nice html which in html looks like this:

Hochschule
School
Mr. Q
Str. 1
01279 Dresden
Germany

In the pdf there is a grey border floating around and it looks like this:

---- //random grey line
Hochschule



---- //random grey line
---- //random grey line

School


---- //random grey line
---- //random grey line

Mr. Q
---- //random grey line
---- //random grey line



Str. 1

---- //random grey line
---- //random grey line
01279 Dresden


Germany

There is no respect of margin alignment what so ever. Maybe it would be useful to be able to switch to dompdf?

killua99’s picture

Issue summary: View changes
Status: Active » Postponed (maintainer needs more info)

I'm reading all the issue list.

Sorry but, this CSS issue. Have you try with a file or anything?

nhck’s picture

With a file? I am sorry - I don't understand the question.

This was merely an issue of trying to show a separation of two rows. I ended up not solving it :-)

Uspower’s picture

Hi all,

My problem with that module is the view where appears to put path css file i put the absolute path and don´t work, any ideias??
I have path like this sites/all/themes/MYWEBSITE/css/pdf.css

I already write in info file the place where css File stays and test the css works fine, but for pdf when generated don´t work.
I don´t find the answer.

misthero’s picture

this is what worked for me:
edited views_pdf_template.php around line 515

global $base_url;
    // Add css if there is a css file set and stripHTML is not active.
    if (!empty($css_file) && is_string($css_file) && !$stripHTML && $ishtml && !empty($content)) {
      $content = '<link type="text/css" rel="stylesheet" media="all" href="' .$base_url.'/'. $css_file . '" />' . PHP_EOL . $content;
    }

I was using unformatted output, style settings for fields are not applied, so I had to rewrite each field output checking "rewrite this field output"
and than in the rewrite text area:

<h1 class="pdfTitle">[title]</h1>

in my css I have :

h1.pdfTitle {
    color:#ff0000;
    font-size:16pt;
}

this works for me...

Uspower’s picture

Done, i can affect css with rewrite output, thank you.

One question. This pdf viewer assumes floats and displays at css????

Fernly’s picture

Is there a way to style the table in the table output? Like borders, cell paddings, style odd and even rows and so on? Perhaps I'm just missing it..

Thanks in advance!

vegansupreme’s picture

PDF Table does not output a HTML table. Therefore you have to get creative if you want to style it.
I've submitted a patch here that might help:
#1355440: Display borders on PDF table

killua99’s picture

So what about this issue. The main issue is solved?

gillarf’s picture

Status: Postponed (maintainer needs more info) » Closed (works as designed)

It's been working fine for me for a long time now. Reopen if the issue still exists for someone.

rbrownell’s picture

Status: Closed (works as designed) » Active

I am having the problem that nhck #23 is having. The system that generates the PDF appears to not work with basic CSS formatting functions such as margin and border. To over come (somewhat) these problems I've had to include abnormal css workarounds like line-height:0;... The library that generates the PDFs doesn't seem to understand basic CSS... Perhaps use of a new library is in order?

Collins405’s picture

@rbrownell I agree, use and availability of more common CSS attributes could make this module amazing.

vegansupreme’s picture

Status: Active » Closed (won't fix)

You can apply only limited CSS. I found a great explanation on stack overflow:

In the first place, you should note that PDF and HTML and different formats that hardly have anything in common. If TCPDF allows you to provide input data using HTML and CSS it's because it implements a simple parser for these two languages and tries to figure out how to translate that into PDF. So it's logical that TCPDF only supports a little subset of the HTML and CSS specification and, even in supported stuff, it's probably not as perfect as in first class web browsers.

http://stackoverflow.com/questions/3404095/tcpdf-not-render-all-css-prop...
CSS files do in fact work, as described in previous comments. However, many styles are just not supported in TCPDF.
Table borders seems to be a highly requested feature. I've figured out a workaround. You need to go old school HTML. TCPDF doesn't understand the CSS border property, but it does understand the HTML Table border property. So you can create a custom template file for a view that includes <TABLE BORDER="1"> and all the necessary HTML for your table. Note, this should be a regular page view, not a PDF view. Then create a PDF view and include the view you just created. You can use Views PDF's Include view or, the better supported Views Field View module and its 'Global: View' field.
If you want more information about using theme files with views you can post here—I only just learned myself—just keep this issue closed.

There are other PDF libraries that may be able to handle more advanced CSS, but I'm not able to rewrite this module to include them. That's just way more than I can handle on my own. It would be a great if Views PDF could support multiple libraries, or even all PDF libraries. If someone else wants to take on that issue and add support for other libraries, you're welcome to do so, and you'll have my full support.

shevgeny’s picture

Padding and margin do not work. Color, background, font size are redefined via CSS, but padding and margin are not.