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

@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.

@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 !

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 :)

@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;
}

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.

@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.

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.

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

@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.

@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.

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

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.

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

@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;
}

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 ?

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!

@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.

@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

Thanks a lot!

@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 !

@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?

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?

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

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?

@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;
}

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

@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

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?

@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>

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!

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?

Hi,

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

Thanks!

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

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

@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;
}

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?

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

#content {
padding-top: 0pt;
}

The default is 8pt.

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

@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;
}

That's brilliant, thanks Trevor!

JP

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.

@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

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

@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.

@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;
}

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?

@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.

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.

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

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

Thanks Trevor,

centering UNDER the image is interesting for me.

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

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?

@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"));

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

@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.

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.

@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>

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!

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

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

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