Text on front page

Post here questions and problems related to editing and publishing DITA content.
MWdal
Posts: 31
Joined: Thu Jun 09, 2022 2:49 pm

Text on front page

Post by 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
Posts: 575
Joined: Wed Oct 16, 2019 3:47 pm

Re: Text on front page

Post by 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
Posts: 31
Joined: Thu Jun 09, 2022 2:49 pm

Re: Text on front page

Post by 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
Posts: 575
Joined: Wed Oct 16, 2019 3:47 pm

Re: Text on front page

Post by 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
Posts: 31
Joined: Thu Jun 09, 2022 2:49 pm

Re: Text on front page

Post by 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
Posts: 575
Joined: Wed Oct 16, 2019 3:47 pm

Re: Text on front page

Post by 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
Posts: 31
Joined: Thu Jun 09, 2022 2:49 pm

Re: Text on front page

Post by 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
Posts: 575
Joined: Wed Oct 16, 2019 3:47 pm

Re: Text on front page

Post by 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
Posts: 31
Joined: Thu Jun 09, 2022 2:49 pm

Re: Text on front page

Post by 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
Post Reply