Display coloricon on the pdf invoice

-- url of the page with the problem -- : localhost
-- HikaShop version -- : 3.1.1
-- Joomla version -- : 3.7.2
-- PHP version -- : 7.0.13
-- Browser(s) name and version -- : firefox 53

Hi,
The coloricon is not displayed on the pdf invoice. I did tests with absolute path and url path, but it didn't work.

Hi,

What do you mean by "coloricon" ? Could you provide more context please ?

Hi,
I mean colored tiles from your tutorial "display by color"

Hi,

The CSS you added in your template for the color blocks is only available on the website when the template is displaying the page.
The PDF invoice plugin has an HTML to PDF library which it uses by feeding to it the HTML/CSS output of the invoice.php of the plugin. So the CSS you added in your template is not taken into account when generating the PDF.
So in that case, you need to add that CSS in the invoice.php file. Then, it will be taken into account.
You can see near the beginning of that file a bunch of CSS code where you can add yours.

Hi.
The only ccs that has been added regarding tiled display I have in ccs front-end file in the back-end of the hikashop component: Is this code I have to paste into the file invoice.php?

Hello,

As Nicolas wrote:

So in that case, you need to add that CSS in the invoice.php file. Then, it will be taken into account.
You can see near the beginning of that file a bunch of CSS code where you can add yours.

I don't know how you set-up HikaShop to display the "color icons" but you would need some customization of the PDF invoice to display such kind of content.
That customization can be regarding CSS as explained by Nicolas ; or PHP modifications.

Regards,

Hi.
I set the color icons by following the step by step tutorial Display by color
The only css code I used was inserted at the end of the file frontend_custom.css
So I really do just what I read on your site. I was hoping that you already have a ready-made solution that would be an extension of this tutorial, to use the effect "color icon" also for the pdf invoice.
If you gave some more detailed hint of what to do to modify php, because for now I do not know where to start.

Hi,

I suppose you're using the URLs of the images like:
<img src=" www.yoursite.com/medias/coloricon/black.png"/ >
in your characteristic values.
I suppose that the issue is that the HTML to PDF library the PDF invoice plugin is using is not able to download the images.
I would recommend instead to use instead relative image paths like that:
<img src="/medias/coloricon/black.png"/>

Hi.
With relative image paths (sample path: <img src="/images/sampledata/coloricon/black.png" /> the effect is the same. The image is displayed everywhere except the pdf invoice.

Then how about having a <span class="coloricon_black"></span>
and then some CSS to set the image in CSS:
.coloricon_black{
background:url(' www.yoursite.com/medias/coloricon/black.png ');
width:16px;
height:16px;
display: block;
}

Hi.
I did some tests but without the expected effect. I put this class in the css section of the invoice.php file and test the span element (<span class="coloricon_black">test</span>) somewhere between the tables, but only the text was displayed.

Hello,

It will be difficult for us to know what exactly is the issue ; the PDF invoice is using the lib HTML2PDF and sometimes it got really strict rules for CSS and accessing files/images.

Here a stackoverflow topic with talks about a similar issue :
stackoverflow.com/questions/33781821/dis...groud-image-html2pdf

And here a (French, sorry) subject where we can see that relative and absolute path might not be handle the same in HTML2PDF.
forum.alsacreations.com/topic-1-77518-1-...-charger-limage.html

Maybe more CSS rules are required to allow the lib to display what you want correctly ; I hope that you can find topics over the Internet which would help to understand how to handle that specific case.

Regards,