Text on front page

[MWdal]

Hello,
I would like to insert a text block on the front page, efter the title and above the footer. Is there a way to do that in the css files?
We use v24.1, transformation scenarios: both pdf based on html & css, and Webhelp.

regards, Mikael

[julien_lacour]

Hello Mikael,

For PDF you can follow the "How to Add Text to the Cover Page" topic from our user-guide.
You can then adapt your code to do the same thing in WebHelp Responsive output:

Code: Select all

@media screen {
  .wh_content_area::after {
    display: block;
    content: "DRAFT VERSION";
    font-size: large;
    color: red;
    text-align: center;
    margin-top: 1in;
  }
}

Regards,
Julien

[MWdal]

Thanks Julien, that works fine with the pdf transformation.
For html I can't get it to like I want. The method to use (1), (2) etc (....:after(1) ) to get several sections with text does not work. So

Code: Select all

@media screen {
  .wh_content_area::after[b](1)[/b] {
    display: block;
    content: "Text..";
    font-size: large;
    text-align: center;
    margin-top: 1in;
  }

doesn't work, no text is added in that case.
Also, I want the text to show ONLY on the fist web page, the one that opens with index.html. I tried with

Code: Select all

@media screen {
[b].wh_first_page, [/b]  .wh_content_area::after {
    display: block;
    content: "Text..";
    font-size: large;
    text-align: center;
    margin-top: 1in;
  }

but that didn't have any impact.

[julien_lacour]

Hello,

You can't use :before(n) and :after(n) pseudo-elements in the WebHelp Responsive transformation, those elements aren't standard and browsers will not display them. You can check our user guide for more information, but basically these elements are only working in Oxygen or when using Oxygen PDF Chemistry.

If you want to display multiple lines, you need to do something like this (using \A and white-space: pre):

Code: Select all

@media screen {
  .wh_content_area::after {
    display: block;
    content: "© 2017 - My Company Ltd \A All rights reserved";
    font-size: large;
    color: red;
    text-align: center;
    margin-top: 1in;
    white-space: pre;
  }
}

Regards,
Julien

[MWdal]

Ok I see, that would work.
How about the second question, showing the text only on the first page? Is that possible?

regards, Mikael

[julien_lacour]

Hello Mikael,

You can move the element after the tiles, by using the following rule instead of the one from the previous post:

Code: Select all

@media screen {
  .wh_tiles::after {
    display: flex;
    content: "© 2017 - My Company Ltd \A All rights reserved";
    font-size: large;
    color: red;
    text-align: center;
    margin-top: 1in;
    white-space: pre;
    flex-basis: 100%;
    justify-content: center;
  }
}

Regards,
Julien

[MWdal]

Hi Julien,
unfortunately I can't get this to work. With the suggested code the text doesn't show at all. I tried moving the code to different places in the file. And tried with

Code: Select all

 .wh_tile

instead of

Code: Select all

.wh_tiles

. And tried with

Code: Select all

white-space: pre-line 

instead of

Code: Select all

white-space: pre

. But no success. Do you have any other tips?
thanks, Mikael

[julien_lacour]

Hi Mikael,

Maybe you are using the tree display (webhelp.show.main.page.toc="yes" / webhelp.show.main.page.tiles="no").
In this case you can create a selector to match both situations:

Code: Select all

@media screen {
  .wh_tiles::after,
  .wh_main_page_toc::after {
    display: flex;
    content: "© 2017 - My Company Ltd \A All rights reserved";
    font-size: large;
    color: red;
    text-align: center;
    margin-top: 1in;
    white-space: pre;
    flex-basis: 100%;
    justify-content: center;
  }
}

Regards,
Julien

[MWdal]

That worked fine! I have quite a long text so I had to change white-space: pre into pre-line, to stop the text from spilling over the edge.
Many thanks Julien!
regards, Mikael