Add image (company logo) in header section, while creating custom.css

dpksaini
Posts: 1
Joined: Tue Nov 28, 2017 8:30 pm

Add image (company logo) in header section, while creating custom.css

Post by dpksaini » Tue Nov 28, 2017 8:42 pm

Hi
I am trying creating a custom.css file for custom pdf output. I need my company logo to be on the header. Have written:

Code: Select all


@page :right {
@top-left {
content: string(maptitle) string(chaptertitle);
font-size:8pt;
}
@top-right {
content:url("logo-5.png");
width: 300px;
height: 100px;
image-resolution: 300dpi;
}
But the image is not coming on the generated pdf.
The image is placed in the "C:\Program Files\Oxygen XML Editor 19\frameworks\dita\DITA-OT2.x\plugins\com.oxygenxml.pdf.css\css\img" folder.
Please suggest the resolution to my issue.

radu_pisoi
Posts: 376
Joined: Thu Aug 21, 2003 11:36 am
Location: Craiova
Contact:

Re: Add image (company logo) in header section, while creating custom.css

Post by radu_pisoi » Wed Nov 29, 2017 4:03 pm

Hi,

The image should be stored relative to your custom CSS. In you case, it should be in the same folder with your custom CSS.

Please note it is not recommended to modify the files from the installation folder because this will make difficult to upgrade to a newer oXygen version (to migrate your customizations).
Radu Pisoi
<oXygen/> XML Editor, Schema Editor and XSLT Editor/Debugger
http://www.oxygenxml.com

satyamkatiyar
Posts: 2
Joined: Wed Feb 12, 2020 8:55 am

Re: Add image (company logo) in header section, while creating custom.css

Post by satyamkatiyar » Thu Aug 27, 2020 9:26 am

Hi
I am trying to align my company logo to the top (without giving any margin) creating a custom.css file for custom pdf output.

Using the below code:

Code: Select all

	@top-right {
        content: url("logo.png");
        width: 49.634px;
        height: 49.449px;
        image-resolution: 480dpi;
        padding-top: 0in;
    }
But still, I can see some minor margin between the top and the logo. Please help.

julien_lacour
Posts: 120
Joined: Wed Oct 16, 2019 3:47 pm

Re: Add image (company logo) in header section, while creating custom.css

Post by julien_lacour » Thu Aug 27, 2020 12:39 pm

Hello,

Could you indicate which default size is logo.png? It is available in its properties.
You can also check in the documentation how to set a background image.

We will try to reproduce it on our side.

Regards,
Julien

satyamkatiyar
Posts: 2
Joined: Wed Feb 12, 2020 8:55 am

Re: Add image (company logo) in header section, while creating custom.css

Post by satyamkatiyar » Thu Aug 27, 2020 6:41 pm

Image
image.png
image.png (8.96 KiB) Viewed 236 times
Attachments
image.png
image.png (18.63 KiB) Viewed 236 times

Dan
Posts: 465
Joined: Mon Feb 03, 2003 10:56 am

Re: Add image (company logo) in header section, while creating custom.css

Post by Dan » Fri Aug 28, 2020 9:53 am

I see from the image properties screenshot that the image is a perfect square, while in the CSS you are using slightly different values for the width and for the height.
To get perfect alignment of graphical elements in the page, we recommend using a single background image for the entire page, as in the link posted by Julien, instead of separate images assembled using page margin box selectors, like top-left, top-right, etc..
Many regards,
Dan

Post Reply