Page 1 of 1
Text on front page
Posted: Wed Aug 14, 2024 11:15 am
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
Re: Text on front page
Posted: Wed Aug 14, 2024 11:50 am
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
Re: Text on front page
Posted: Mon Sep 16, 2024 12:18 pm
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.
Re: Text on front page
Posted: Tue Sep 17, 2024 4:52 pm
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
Re: Text on front page
Posted: Wed Sep 18, 2024 3:44 pm
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
Re: Text on front page
Posted: Fri Sep 20, 2024 9:47 am
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
Re: Text on front page
Posted: Wed Sep 25, 2024 3:51 pm
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
instead of
. And tried with
instead of
. But no success. Do you have any other tips?
thanks, Mikael
Re: Text on front page
Posted: Thu Sep 26, 2024 4:09 pm
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
Re: Text on front page
Posted: Tue Oct 01, 2024 8:56 am
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