Hi all,
Does anyone know how to do the following:
1. We create web-based output (HTML5)
2. Marketing wants to be able to include a company logo (or even a watermark in the middle of the page, light enough that it can be seen under the text) at the top of the printed output as well as a copyright disclaimer or something else at the bottom along with page numbers.
I called support and they said the tool doesn't support this, he did mention that there might be some custom javascript I could include in my skin or my master page. Does anyone know how to do this or have any sample code they could share?
Thanks in advance.
Branding print output from an HTML5 help system
Re: Branding print output from an HTML5 help system
Flare can absolutely do this.
First off, you will have to make or get your image. For a watermark, you'll want an image in some format which supports an alpha channel, so you can make it have a transparent background and partially transparent foreground. Since marketing will probably want to control the content of this image, get it from them and explain that you want it already set to the opacity they want. (You can probably adjust the opacity with some CSS trickery if necessary, but I have not tried this.)
Print output depends on print layouts to add the headers, footers, etc. Each one of these, as well as the body, which receives the content from the topics, is a frame. You can make the frames overlap, and the content will overlap. The overlapping frames and the partially transparent image are all you need to create your watermark. If they just want a logo in the corner of the page, you can put it in the margin/header/footer. You will also have a print target (I'm assuming a PDF target; this probably mostly works in Word output except for whatever weird Word bugs prevent it from printing the way it's intended.) Print targets generate their content from a TOC - the topics in the TOC get included in the order they appear. Your title page, table of contents, index, etc. are special topics; these may contain proxies for the actual table of contents or index, so those topics will probably be just a header and the proxy. In the General tab for the PDF target you can specify the TOC and page layout you will use. You can also set a different stylesheet if you like.
So in the page layout editor, set up the frames for your body content, headers, footers, etc. (if you are already generating print output from Flare, then you should already have this much set up), and also add a frame where you want the watermark to appear. Click this frame in the page layout editor and press F2 (as the label in the frame instructs) to edit it. When you do so, Flare will ask if you want to pick a content template (click No if you just want to add content). You want to do the latter, so click No. The frame editor will open up. Insert the watermark image there the way you would in any topic, and save. You can precisely position and size the frames by right-clicking them in the editor and clicking Properties. The Frame tab has all the dimensions on it.
Note that a page layout can have multiple page types defined. You can select them in the pane on the right side of the page layout editor: left, right, first, empty (inserted when you have sections forced to start on a right (or left) page and the preceding content ends on the wrong page), etc. Each one has its own set of frames, although you can copy and paste them from one page to another. If you want this image to appear on all pages, you need to put its frame in all the page types.
First off, you will have to make or get your image. For a watermark, you'll want an image in some format which supports an alpha channel, so you can make it have a transparent background and partially transparent foreground. Since marketing will probably want to control the content of this image, get it from them and explain that you want it already set to the opacity they want. (You can probably adjust the opacity with some CSS trickery if necessary, but I have not tried this.)
Print output depends on print layouts to add the headers, footers, etc. Each one of these, as well as the body, which receives the content from the topics, is a frame. You can make the frames overlap, and the content will overlap. The overlapping frames and the partially transparent image are all you need to create your watermark. If they just want a logo in the corner of the page, you can put it in the margin/header/footer. You will also have a print target (I'm assuming a PDF target; this probably mostly works in Word output except for whatever weird Word bugs prevent it from printing the way it's intended.) Print targets generate their content from a TOC - the topics in the TOC get included in the order they appear. Your title page, table of contents, index, etc. are special topics; these may contain proxies for the actual table of contents or index, so those topics will probably be just a header and the proxy. In the General tab for the PDF target you can specify the TOC and page layout you will use. You can also set a different stylesheet if you like.
So in the page layout editor, set up the frames for your body content, headers, footers, etc. (if you are already generating print output from Flare, then you should already have this much set up), and also add a frame where you want the watermark to appear. Click this frame in the page layout editor and press F2 (as the label in the frame instructs) to edit it. When you do so, Flare will ask if you want to pick a content template (click No if you just want to add content). You want to do the latter, so click No. The frame editor will open up. Insert the watermark image there the way you would in any topic, and save. You can precisely position and size the frames by right-clicking them in the editor and clicking Properties. The Frame tab has all the dimensions on it.
Note that a page layout can have multiple page types defined. You can select them in the pane on the right side of the page layout editor: left, right, first, empty (inserted when you have sections forced to start on a right (or left) page and the preceding content ends on the wrong page), etc. Each one has its own set of frames, although you can copy and paste them from one page to another. If you want this image to appear on all pages, you need to put its frame in all the page types.
Re: Branding print output from an HTML5 help system
I just realized maybe you meant you wanted this in the output when users print your HTML5 help, not in a separate print version of the help.
I have a partial solution for this.
Create a master page. Delete all the proxies except the body.
Insert a div after body proxy, and insert your watermark image into it. Also assign the div a unique class name, like watermark.
In your CSS, in the default medium define the style as:
div.watermark
{
display: none;
}
So it won't show on screen when users are reading the help.
Style it differently in the print medium. Browsers use this when printing the page.
@media print
{
div.watermark
{
position: absolute;
display: initial;
top: 2in;
left: 2in;
z-index: 1000;
}
}
Adjust the position as needed for wherever you want it to go. z-index puts it on top, display: initial undoes the display: none from the default medium, and the other stuff sets it to appear in a fixed position.
What this solution lacks is a way to make it appear on every page. This only puts it on the first page.
I have a partial solution for this.
Create a master page. Delete all the proxies except the body.
Insert a div after body proxy, and insert your watermark image into it. Also assign the div a unique class name, like watermark.
In your CSS, in the default medium define the style as:
div.watermark
{
display: none;
}
So it won't show on screen when users are reading the help.
Style it differently in the print medium. Browsers use this when printing the page.
@media print
{
div.watermark
{
position: absolute;
display: initial;
top: 2in;
left: 2in;
z-index: 1000;
}
}
Adjust the position as needed for wherever you want it to go. z-index puts it on top, display: initial undoes the display: none from the default medium, and the other stuff sets it to appear in a fixed position.
What this solution lacks is a way to make it appear on every page. This only puts it on the first page.