Front page setup

[Timber]

Hi all!

Really seems that my knowledge of CSS is far from adequate for Chemistry.

I need to create a front page with the company logo on top left (too big for top left margin box), left aligned product name under that, left-aligned words "Installation instructions" under that, a reasonably big image of the product at the center and "ENG" for "English" in the bottom-right margin box.

After fighting with line breaks and other problems I decided to make an image of the whole thing and import it as a background image. But I don't seem to be able to do even that!

In order to bring the image to the front page I added the following to my project css:

Code: Select all

 /* cover page */
 
@page cover-page{
   background-image:url('O_etusivu.png'); 
   background-repeat:no-repeat;

   @bottom-center {
      content:none;
   }   
}
html:before{
     content:" ";
     page:cover-page;
     }


O-etusivu.png is in the same folder as my project css. (I would prefer svg but I thought that it is safer to try with a png first.) In the result the first page of the pDF is the front page based on p-front-page.css. There is no cover page!

Maybe I don't just have the brains for this...

Best Regards...Timo

[Radu]

Hi Timo,

Here's a sample customization which is similar to what you want to obtain:

https://github.com/radu-pisoi/com.oxygenxml.pdf.css.customization.sample

The main problem with your CSS is that you are matching "html:before" but the XML which gets published to PDF using the CSS does not contain the "html" element anywhere.
If you publish once and look in the transformation output folder next to the PDF is a file called something like "ditaMapFileName.in.xml". If you open it, that is the XML structure over which the CSS is applied to construct the PDF so your CSS selectors need to match that particular XML structure.

Regards,
Radu

[Timber]

Yes Radu I noticed that example and tried it.

But for background-size the validation says: Property background-size does not exist. So the background image is not visible.

Cheers,

Timo

[Timber]

And now if I use the customized css, the transformation is successful, but there is no PDF output.

Best Regards,

Timo

[Timber]

Hi again and sorry about the shattered output on my behalf. I assumed that the background-size malfunction was caused by too old software version, updated from 19 to 19.1 and now if I try to publish WYSIWYG PDF, it is successful but nothing comes out.

Timo

[Radu]

Hi Timo,

In the Oxygen Preferences->DITA / Logging page you can choose to "Show Console Output->Always".
After you publish the DITA OT console view at the bottom of Oxygen should contain near its end something like:

Code: Select all

INFO [ main ] com.oxygenxml.chemistry.OxygenPDFChemistry - Finished formatting: 'D:\projects\eXml\samples\dita\flowers\out\pdf-css\flowers.pdf'

which may be enough for you to know where the PDF was saved. If such information is lacking from the console view, maybe you can copy its contents, save it to a file and then send it directly to us (support@oxygenxml.com) along with a precise set of steps to try on our side to achieve a similar customization (attach your custom.css).

Regards,
Radu

[Timber]

Hi again,

I think the problem was caused by one of the modified css files. PDF output is working again.

Would be really nice if you could still walk me 'til the finishing line.

Current output:

The company logo comes out well.

The title is on the left side of the logo when it should be under it. I am not sure where it is coming from. (The title text is not defined in front-page.css.)
The background picture does not appear at all.

The bottom-right corner contains a logo and a page number that shouldn't be on the front page.

Here is the front-page.css with very little modifications:

Code: Select all

/*
 * A4 page size.
 */
@page {
    size: A4;
}

/*
 * Front page title
 */
front-page-title{
    color:white;         
    font-size: 3em;   
    width: 80%;
    margin-left:auto;
    margin-right:auto;
}

/*
 * Logo image in the left part of the title.
 */
front-page-title {
    background-image: url("images/company_logo_2017.svg");
    background-repeat:no-repeat;
    background-position: 0 center;
    padding-left: 110px;   
    padding-top: 20px;
}

/*
 * Background image for the cover page.
 */
@page front-page{
    background-image: url("images/O_cover.svg");

    background-position: right bottom;
}

@page front-page{
        @bottom-right {
       
        content: " ";
       
       
        }}

[Radu]

Hi Timo,

So:

The company logo comes out well.

Ok.

The title is on the left side of the logo when it should be under it. I am not sure where it is coming from. (The title text is not defined in front-page.css.)

The title text is inside that XML document on which the CSS is applied to publish to PDF (I gave you some details about how you can find it after the transformation).
Maybe you could replace this:

Code: Select all

front-page-title {
    background-image: url("images/company_logo_2017.svg");
    background-repeat: no-repeat;
    background-position: 0 center;
    padding-left: 110px;
    padding-top: 20px;
}

with this:

Code: Select all

front-page-title:before {
    content: url("images/company_logo_2017.svg");
    display:block;
    padding-left: 110px;
    padding-top: 20px;
}

to add the image as content before the title and to set display:block to it so that the title is placed on a row after the image.

The background picture does not appear at all.

This seems to work in my tests using your CSS sample. Are you sure the "images/O_cover.svg" exists on disk relative to the CSS?
Maybe you can try to point to another SVG (we have one in our samples folder "OXYGEN_INSTALL_DIR/samples/svg/batik3D.svg") just to see if it's a problem with the SVG not being found or a problem with this specific "O_cover.svg" which cannot be rendered in the PDF.

The bottom-right corner contains a logo and a page number that shouldn't be on the front page.

I also cannot reproduce this problem. You are now running Oxygen 19.1, right?
Maybe if you send us (support@oxygenxml.com) some specific SVG files + the custom CSS and tell us the steps you use on your side to configure the CSS to be used in the transformation I could try to test this on my side.

Regards,
Radu

[Timber]

Bit by bit:

What if the title after the logo is also on two lines (Title + subtitle) with different font size and weight? Can I use 'before' twice?

Like this:
COMPANY LOGO
Product name
Installation Instructions

The background image is in the same folder as the logo so it should be working. If I change "@page front-page" to "front-page-title" I can get a tiny background image on top of the tile text. Also background-size is not accepted with @page front-page.

I am running 19.1.

I will try with another svg image.

Thanks,

Timo

[Timber]

Current front-page.css, with comments. sorry about 'SHOUTING' in caps. :
/*
* A4 page size.
*/
@page {
size: A4;
}

/*
* Front page title
*/
front-page-title{
color:black;
font-size: 2em;
width: 80%;
font-weight:bold;
margin-left:auto;
margin-right:auto;
content: "Product O";
}


/*
* Logo image in the left part of the title.
*/
front-page-title:before {
content: url("images/company_logo_2017.svg");
width:20cm;
display:block;
padding-left: 0px;
padding-top: 20px;

WIDTH ABOVE DOES NOT AFFECT THE SIZE. THE LOGO SHOULD BE AT LEAST 100% BIGGER THAN NOW.

}
front-page-title:after {
color:black;
font-size: 1em;
font-weight:100;
width: 80%;
margin-left:auto;
margin-right:auto;
content:"Installation Instructions";
}
TRIED 'AFTER' TO PUT THE TITLE ON TWO LINES. ONLY SHOWS THE FIRST ONE, NOT THE "AFTER" ONE.


/*
* Background image for the cover page.
*/
@page front-page{
background-image: url("images/O_kansi.svg");

background-repeat:no-repeat;
background-position: center;
}

NOT VISIBLE. I HAVEN'T TESTED A DIFFERENT FILE YET.

@page front-page{
@bottom-right {

content: " ";


}}

[Radu]

Hi Timo,

Thanks for the samples, please see some comments below:

WIDTH ABOVE DOES NOT AFFECT THE SIZE. THE LOGO SHOULD BE AT LEAST 100% BIGGER THAN NOW.

I can reproduce the problem and we'll look into this, for now you can set an explicit width and height on the SVG using an editing tool like Inkscape.

TRIED 'AFTER' TO PUT THE TITLE ON TWO LINES. ONLY SHOWS THE FIRST ONE, NOT THE "AFTER" ONE.

We seem to have some problems with before and after content in this situation, we'll look into this.
This workaround seems to work:

Code: Select all

front-page-title{
    color:transparent;         
    font-size: 2em;   
    width: 80%;
    font-weight:bold;
    margin-left:auto;
    margin-right:auto;
    content:none;
}
front-page-title:before(3) {
    content: url("images/framery_logo_2017.svg");
    width:20cm;
    display:block;
    padding-left: 0px;
    padding-top: 20px;
    color:black;
}
front-page-title:before(2){
    content: "Framery O";
    display:block;
    color:black;
}
front-page-title:before(1){
     content:"Installation Instructions";
     display:block;
     color:black;
}

NOT VISIBLE. I HAVEN'T TESTED A DIFFERENT FILE YET.

The original "dita\css\print\p-front-page.css" contained this selector which you seemed to have removed:

Code: Select all

    front-page {
        page: front-page;
    }

so you should add that back, it basically says that the <front-page> element which contains the <front-page-title> should have the layout defined by the "front-page" page (which has the bg image).

Regards,
Radu

[Timber]

Yess!!

You helped me just enough.

Problems solved.

Thank you very much!


Timo

[Radu]

Hi,

Just to update this thread, with Oxygen XML Editor, setting an image width on a :before selector like:

Code: Select all

front-page-title:before {
    content: url("images/framery_logo_2017.jpg");
    width:20cm;
    display:block;
    padding-left: 0px;
    padding-top: 20px;
}

should be taken into account.

Regards,
Radu