Clarify 2 ManualClarify DesktopCustomizing PDF OutputRecipes for customizing PDF templates using the Custom CSS tab

Recipes for customizing PDF templates using the Custom CSS tab

PDF templates in Clarify are written in HTML and CSS. Custom templates allow you to customize the template using CSS. Doing so allows you to customize properties in the PDF output that aren't directly accessible through the custom template editor.

If you would like to see examples of the HTML files that Clarify generates when exporting to PDF, please refer to this article.

Select (or create) a custom template

Select (or create) a custom template

Customize the CSS

  1. Click on the Custom CSS tab.
  2. Add the appropriate CSS to the field. For example:
.step-container {
  page-break-after: always;
}

This CSS tells the PDF generator to always add a page break after a step.

Customize the CSS

Recipes

Here are  a couple of recipes that change how PDF output looks.

Modify the style of the text in the document

You can add specific font styling to our PDF document by targeting specific CSS classes in the document. For example, to make step titles italic and bold you can do the following:

.step-title {
   font-style: italic;
   font-weight: lighter;
}

Here are some of the classes you can use to target content:

.article-description
.step-title
.sub-step
.step-instructions

If you wanted to target all of the document text try this:

body, h1, h2, h3 {
   font-style: italic:
   font-weight: lighter;
}

Show the article title in the body of the document

By default the article title is hidden in the main body of the document as it is shown in the header. To show the article title use the following CSS:

#content .article-title {
    display: inline;
}

Remove the header after page 1

Adjust the margin-top values to meet your needs.

@page content {
  @top-left {
    content: "";
  }
  margin-top: 40pt;
}

@page content:first {
  @top-left {
    content: flow(header);
  }
  margin-top: 95pt;
}

Right-justify  the header text

First set the Align Logo setting to Left.

.header-text {
   text-align: right;
}
Right-justify  the header text

Set the maximum height for the logo in the header

#header .logo {
  max-height: 25pt;
}

Remove spacing between paragraphs

div > p:not(:last-child){
    margin-bottom: 0px;
    margin-top: 0px;
}

div > p:last-child {
    margin-top: 0px;
}

Change spacing between list items

This CSS will change the spacing between all list items. It will not affect the spacing between the first list item and the preceding paragraph.

li:nth-child(n+2) {
  margin-top: 2em;
}

Float images to the right of text

This CSS assumes a Letter page size with Landscape orientation. You would just need to adjust the max-width properties for other pages sizes/orientations. If you want to float the images to the left of the text just swap the "left" and "right" values in the CSS.

.step-instructions {
  float: left;
  width: 473pt;
}
.step-image-container {
  width: 250pt;
  float: right;
}
.step-container {
  clear: both;
} 

Add a page break after every top-level step

If you want to break up each top-level step and it's substeps then use this CSS. This CSS will add page breaks before each top-level step. Use this CSS in combination with the Try to keep step content together content flow.

div.step-container:not(:first-child):not(.sub-step) {
  page-break-before: always;
}

Set a custom page size

This example sets the width of 21cm and height of 30cm with a landscape orientation.

@page {
  size: 21cm 30cm landscape;
}

Changing properties of paragraphs formatted as code

Code paragraphs are wrapped in <pre><code> tags.

pre code {
   ...
}

Code runs are wrapped in <code> tags.

code {
   ...
}

 

Targeting the footer

The footer has a footer class applied to it.

.footer {
   ...
}

You can target the footer text as well as the footer page number as well.

.footer .page-number {
   ...
}
.footer-text { 
   ...
}
#content a {
   color: red;
}

60 Comments

Gabriel

Being able to create custom templates with CSS is a great idea !

I'm using Clarify beta 2.0 build 14 on Mac OS 10.9.

I'm trying to create a pdf template that floats images to the right using the CSS code you give but it doesn't work.

I looked at the examples of code that you give here : http://bmls.screenstepslive.com/s/clarify-2/m/11437/l/123184?data-resolve-url=true&data-manual-id=11437

And the classe name for text instructions and step images is different than the one you give here, I see in the html output of the code :

step-element step-instructions

and

step-element step-image-container

instead of

step-instructions

and

step-image-container

I tried to use these classes names in my CSS template, but doesn't work either...

Do I make something wrong ?

Thanks a lot for helping !

Gabriel

Trevor DeVore

@Gabriel - The example code you referenced is for HTML output. The HTML output for the HTML exporter is slightly different than the HTML that is generated for the PDF output.

The CSS in the recipe is actually correct. The issue is that beta 14 isn't handling some of the spaces properly when you copy and paste the recipe from this web page into the custom CSS field. This leads to the CSS not being processed correctly. Try deleting the spaces before each CSS property (e.g. the spaces before "float: right;"). Then the CSS should work.

Gabriel

@Trevor : great !

Issue solved : I removed the spaces in the CSS and everything's working fine now with the code you give on this page !

That's very cool ! Thanks a lot for your help !

Shlley Turk

Please can someone help me. I need to be able to put a graphic on the left hand side of the page. In order to do this I have to change the margins to '0' and subsequently the steps all align with the edge of the document. Help please :)

Trevor DeVore

@Shelly Are you trying to be the logo graphic on the left or the step images? If the logo graphic then you can use this CSS:

#header-wrapper {
padding-left: 0px;
}

Peter Gilvarry

Is it possible, or are there plans to have images on the right.
I am looking to build a landscape view with text down the left and the images on the right to match a monitor layout as we use most of our exports as PDF viewed on a monitor to save paper.
This is a wonderful tool to produce short technical bulletins or guides quickly with high quality.

Trevor DeVore

@Peter - See the recipe titled "Float images to the right of text" on this page. The CSS provided in that recipe will float the images to the right of the text.

Andreas S.

Hi.
I have three further questions therefore.

1. Font and font size of a code text area.
With in the step editor I can enter Text "format as code". This special text area is nice for e.g. adding a comment…
But in relation to the other step text this text is to big. Can I change this?

2. With the ".footer-text" class it is possible to made some changes for the footer text. But this have no effects to the footer numbering. Does a separate class exists for the numbering of pages?

3. Is it possible to change the global line spacing or even better, different values for new paragraphs and only line breaks?

Thanks for your support.

Kind regards,
Andreas S.

Gabriel

Following the question of Andrea, I'm looking for a way to add a text box to a step which would work like a comment area about the step.

When you want to add extra information about a step that is not absolutely fundamental for the tutorial, for example you add the keyboard shortcut that acts the same as the action you explain in the texte, you don't want to interrupt the user who is reading the tutorial, so you want this extra comment to go on the side.

I thought it was not possible with Clarify, but the question of @Andrea about the code tags makes me think that it would be possible with CSS to do it.

Here is an example of what I would like to to (don't know if embed of images is possible or not here, I try) :

Can you help me doing this ?

Thanks a lot !

Gabriel

Trevor DeVore

@Andrea -

1) I've added a recipe for code. Code paragraphs are wrapped in pre and code tags.

2) I added a recipe for the footer. You can target .footer or .footer .page-number.

3) You can fiddle with the line-height and margin-top/margin-bottom CSS properties for the p tag.

Trevor DeVore

@Gabriel - I'm not sure how you would do this. You may be able to use the CSS float property to get pre blocks to float to the left of p blocks. Perhaps you could write a rule that floated paragraphs followed by a pre block to float left and then set pre blocks to float left.

Gabriel Parriaux

Thank you Trevor.

Before doing more testing, I would like to understand better what to try.

What is the difference between pre code blocks and code blocks ?

When in Clarify I use the wysiwyg editor button to "format as code", does it insert pre code block or code block ?

Thank you for helping !

Gabriel

Trevor DeVore

The code tag is used for code formatting that is inline (e.g. part of a sentence). pre tags are used for paragraphs of preformatted text. The text is then wrapped with the code tag so that you know it is preformatted code.

If you use the format as code feature on an entire paragraph then the output will be wrapped in pre and code tags. If you use the format as code feature on a single word (or sequence of words) in a larger paragraph then the text will only be wrapped in code tags.

Gabriel Parriaux

Thank you Trevor for your explanations !

I tried to create a CSS rule to do what I want.

Here it is :

.step-instructions {
float: left;
max-width: 273pt;
}

pre {
max-width: 200 pt;
float: right;
}

.step-container {
clear: both;
}

I have two problems :

- the code block doesn't float to right. It floats to left as a normal paragraph. Did I do something wrong ?

- all the steps texts reduces it's size to 273pts width... As you said earlier, only the steps where there is a code tag should reduce to 273pts, the others remaining 100% width...

Is it possible to write such a rule in Clarify ?!?

Thank you for your support !

Gabriel

Trevor DeVore

@Gabriel You could try the following. You have to have the code paragraph first, followed by the non-code paragraph. This will place the code paragraph on the right and regular paragraph on the left. After the paragraph text goes past the bottom of the code it fills up the whole page. I wouldn't add an image to the step unless it comes above the step text.

.step-instructions pre + .step-instructions p {
float: left;
}

.step-instructions pre {
max-width: 200 pt;
display: inline;
float: right;
}

Gabriel Parriaux

Hi Trevor,
Thanks a lot for helping !

I followed your instructions but in the .pdf output, the code paragraph doesn't go on the right. It fills up the whole page, as a standard text paragraph.

Did I make something wrong ?

Michelle Johnson

Is it possible to put the instructions before the image? I was able to do this in ScreenSteps, but I don't see that option in Clarify. Thanks!

Trevor DeVore

@Gabriel - Hmm, not sure what could be different. Here is what I did:

1) I created a new template
2) Added the 9 lines of CSS I included in the previous comment.
3) Create a new document and a new step.
4) Create one code paragraph with the text "Some code".
5) Created another paragraph with plain text that says "Not code".
6) Exported a PDF using the custom template I created. The code is on the right, the regular paragraph on the left.

Trevor DeVore

@Michelle - You can set the media position to above or below the text. See this article:

http://help.clarify-it.com/m/clarify/l/258816-changing-the-position-of-the-text-and-image-for-a-step

Michelle Johnson

Thanks a lot!

Gabriel Parriaux

@Trevor : Happy New Year !!! :-) Hope it will be a great year for you and the family !

I tried to follow exactly the six steps you told me and it works with as you say. But if I use a longer text in each paragraph, then the two paragraphs go one under the other and each one fits 100% of the width. I would like the two paragraphs to stay one beside the other.

Do you think it can work with a longer text ?

Thank you for helping !

Trevor DeVore

@Gabriel - Happy New Year to you as well.

Hmm, I'm not sure. Maybe try setting a max-width for the .step-instructions pre + .step-instructions p section?

Michael Miles

I really love the float example putting instructions on left and images on right.

But what if you have a step with instructions but without an image?

Is there a way for that step to have instructions go full page width?

Trevor DeVore

@Michael One thing you could try is removing the .step-instructions part. The text will always fill the width of the page this way.

Athena

I'd really like to have the document title on a new line below the logo, which is left aligned and takes up the majority of the first line. Is there custom css for this?

Trevor DeVore

@athena - This will display the title below the logo. You may need to adjust your page top margin.

#left-align-header .image-wrapper {
display: inline:
}
#left-align-header .header-text {
display: inline;
}

#left-align-header .logo {
/* modify logo margins/padding here */
}

If you just want to shrink the logo then you could modify the maximum height for it:

#header .logo {
max-height: 20px;
}

Adriana

How do I use {{t_of_c}}: to generate a Table of Content for my Document?

Trevor DeVore

@Adriana - You can download a template that uses the {{t_of_c}} variable here:

http://help.clarify-it.com/m/pdf-templates/l/242606-example-pdf-templates

Doug Rosen

Is there a way to have the Table of Contents only add entries for Top Level Steps and skip Nested Steps?

Thus far I have had no success in trying to accomplish this.

Also, is there a way to add a Cover Page and have it show up before the TOC and not be included in the TOC?

Trevor DeVore

@Doug - to hide substeps in the t of c use this Custom CSS:

#table-of-contents .sub-step-tofc {
display: none;
}

To add a cover page you just need to add a new div to the ./Content/article-layout.html file in the template folder. Here is a barebones example the adds a cover-page div around line 50 (the MyLogo.png file would go alongside the article-layout.html file):

<div id="wrapper">
<div id="cover-page">
My Cover Page!
<img src="MyLogo.png" />
</div>

<div id="table-of-contents">
{{t_of_c}}
</div>
<div id="content">
{{content}}
</div>
</div>

Doug Rosen

Thanks Trevor!!

Works great. The TOC now only shows entries for Steps and not Sub-Steps and I now have a Cover Page that is not in the TOC. I still need to fine-tune the article-layout.html a bit, but my initial tests look great!

John

New to CSS and could use a bit of help. I'm trying to justify images to the left margin, then have my instructions but up against the image. I've tried playing around with the recipes but either the text ends up on the left of the image or the text is aligned right so my bullets done line up from step to step. Do I somehow need to use CSS to force the order of instructions and images?

Rey

Hi,

Is there a way to reduce the spacing in between the header (article title) and the article description on the first page?

Thanks!

Trevor DeVore

@Ray: Yes. Here is an example which puts a large amount of padding (50 pt) above the article description.

.article-description {
padding-top: 50pt;
}

Trevor DeVore

@John - The modified "float images right" example should work. You may just have to fiddle with the max-width values. If the following doesn't work email support with some samples of what you are seeing.

.step-instructions {
float: right;
max-width: 473pt;
}
.step-image-container {
max-width: 250pt;
float: left;
}
.step-container {
clear: both;
}

Rey

Hi Trevor,

Thanks for the response. Unfortunately, it didn't work. Happy to send you a PDF to "Clarify" what I mean. :)

How do I send it?

Trevor DeVore

@Ray - sorry, I misread. To reduce the distance between header and description use this:

#content {
padding-top: 0pt;
}

The default is 8pt.

Julian Prior

Hi all - with the included PDF templates I like the grey box that the article description is in - sets it off nicely.

I don't know CSS - does anyone have some custom CSS that will do this?

Cheers

Julian

Trevor DeVore

@Julian - Here is the CSS from the Basic template:

.article-description
{
width: 94%;
padding-left: 3%;
padding-right: 3%;
padding-bottom: 1%;
padding-top: 1%;
background-color:#CCC;
color:#666;
}

Julian Prior

That's brilliant, thanks Trevor!

JP

Ron Stinson II

I have two questions/requests.

1. I'm trying to add a watermark image over the PDF pages created. I have already placed the png file into the content folder. Do I need to create/edit the html file or use the custom css feature?

2. I need to add a third footer object in the center for a copyright. Again, is this capable through custom css?

REQUEST: Add the ability for copyright text in the document output, including file metadata.

Thank you for your time.

Trevor DeVore

@Ron

1) You would need to modify the HTML and add an img tag that displays the PNG file. You could then use CSS to position the watermark image. I would just add the CSS to the template files if the watermark is going to be a permanent part of the template.

2) You would need to modify the HTML to insert a 3rd area in the footer. You would look at modifying the div with the footer class in the article-layout.html file.

I would recommend adding any feature requests to the feature request forum. You can find it here:

https://bluemango.zendesk.com/forums/254475-Clarify-Feature-Requests

Rohan

I have got most of my needs cleared baring 2. They being
1. Title Page with 2 Images (One Big - centred and Other Relatively small and Left Aligned)
2. Header and Footer on T_O_C page

Would be great help if someone could guide me we CSS code

Trevor DeVore

@Rohan: For 2 images on the title page you would need to modify the HTML files for your PDF template by hand.

To add the header/footer to the TofC page you can change the page: property in the Custom CSS tab.

Change:

#table-of-contents {
/* Name the page with this div so we can target header/footer and other props with @page */
page: table-of-contents;

/* So we don't get too close to the header/footer */
padding-bottom: 8pt;
}

to:

#table-of-contents {
/* Name the page with this div so we can target header/footer and other props with @page */
page: content;

/* So we don't get too close to the header/footer */
padding-bottom: 8pt;
}

Doing so will cause the table of contents page to use the same header/footer behavior as all of the other pages.

Trevor DeVore

@Rohan: I left out one important part. You need to add a page break rule as well. Here is the modified custom CSS:

#table-of-contents {
/* Name the page with this div so we can target header/footer and other props with @page */
page: content;

/* So we don't get too close to the header/footer */
padding-bottom: 8pt;

page-break-after: always;
}

Maurice Florêncio Bonnet

Hello,

I copied the "Float images to the right of text" in the CSS-field (without spaces). When the step instruction has only 1 line, this line will be in the Export-PDF right floated in the "Textbox" of the instructions.
If the step-instruction has mor than 1 line in the output everything is fine.

What di I have to change?

Trevor DeVore

@Maurice - I just made a slight modification to the example. Try the new CSS and let me know if it works better for you. It did for me.

Maurice Florêncio Bonnet

Hello Trevor,

thanks, i had to change it a little bit for my needs. I need a fix height. Therefor I have (I change left ans right because I need the images left). The image-container I had to keep max-width, because not all my pictures had the same width and they were centered in the image-container and the left margin of the image was not aligned with the left margin of the step-title when I put "width" instead of "max-width".

With "max-width" at the image-container and "width" at the instruction-container it's perfect. Thanks.

With fixed height it looks like this (it is for video-storyboard-layout):

.step-instructions {
float: right;
width: 250pt;
height: 141pt;
}
.step-image-container {
max-width: 250pt;
height: 141pt;
float: left;
}
.step-container {
clear: both;
}

Perfect would be when the instruction-title could be centered under the image. But I couldn't get that. I changed the font attributes in the article.css but couldn't change the position.

Trevor DeVore

@Maurice Thanks for the update. If you want to center the step titles you can use this CSS:

.step-title { text-align: center; }

Maurice Florêncio Bonnet

Thanks Trevor,

centering UNDER the image is interesting for me.

Trevor DeVore

Ah, I didn't read that correctly. I don't have an answer for that one.

Christina Carrier

I am trying to add a cover page that first shows the logo in the center and then shows the document title (in large letters) below it. Additionally, I would like the documents description to appear on the bottom of the title page in a normal font instead of it appearing before the first step in the body of the document. I'm not really a coder but is this possible?

Trevor DeVore

@Christina - What you are looking to do is possible but it would require knowing HTML, CSS, and some Javascript. Here are some notes in case you know someone who might want to take a stab at this.

Here is the manual that shows how to make custom modifications:

http://help.clarify-it.com/m/pdf-templates

Someone would need to take an existing PDF template and add some HTML to the article-layout.html file that would be the cover page. Some CSS would also need to be added to style the Cover page. A good starting point might be the Table of Contents example in our manual. It adds a new page that shows a table of contents listing all of the steps:

http://help.clarify-it.com/m/pdf-templates/l/242606-example-pdf-templates

The reason JavaScript is required is that you would need to move the .article-description div to the new location you want it at. I've done some experiments with this before using jquery and the table of contents example template. Near the end of the article-layout.html file there is some javascript. After including query I did the following to add the article description after the .table-of-contents-title:

$(".table-of-contents-title").after($(".article-description"));

J

Hello,

I'm working on modifying a PDF Template so that logo sits and fills up the top of the header. and have the title directly below it. Can someone please assist?

Thank you

Trevor DeVore

@J - if you set the "Align Logo" option in "Header Settings" to "Center" then the logo will be centered with the title text directly below it.

Lauren

Is it possible to use a full width background image for the header? I'm not sure what to target to try and do that.

Trevor DeVore

@Lauren - you can set the background-image CSS property on the header-wrapper div. If you add the CSS to the Custom CSS tab then you would need to use the full URL to the image. Here is an example using a logo stored in a custom template on OS X:

#header-wrapper {
background-image: url("file:///Users/username/Library/Application%20Support/Clarify/2.0/Templates/PDF/7d748c09-10f2-4cbe-a82f-84885e3ca6cf/Content/logo.png");
}

If you add the CSS to a file in your custom PDF template then you can use a variable instead. For example, you could add the following to the end of the head section in the article-layout.html file for your template:

<style>
#header-wrapper {
background-image: url("{{logo_filename}}");
}
</style>

Alex Schenkman

Hi Trevor,

I would like to modify a PDF template to produce two steps per A4 page.

How can I achieve this?
Thanks in advance!

ScreenSteps Support

@Alex - Give this a try. Does it do what you want?

.article-steps div:nth-child(4n) {
page-break-after: always;
}

Alex Schenkman

Yes, thank you Trevor!
You are a CSS-ninja.

Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.