Skip to main content

View sample PDF styles (MT4)

This page applies to:MindTouch 4 and MindTouch TCS


This shows sample CSS overrides that you can add to the MindTouch Control Panel so that you can customize the look and feel of your PDF.
 

Details

The below examples can be copied and added to your PDF customization in the Control Panel which is covered in our Control Panel documentation. For reference, the default PDF stylesheet can be found at the following URL:

http://{your MindTouch hostname}/skins/common/prince.css

Examples

How to max images in a PDF

If you want to max an image on a PDF, input this CSS code in the 'Custom PDF CSS' in the Control Panel:

img[style], img {max-width: 100%;}

Add a custom footer to the PDF

If you want to add a footer to the bottom of every PDF page that includes details about your company including copyright or address, add the following:

@page {
@bottom-left {
  content: "\A9 2016 Copyright Company. All rights reserved.";
  font-family:Arial, Helvetica, sans-serif;
  font-size: 8pt;
  color: #666666;
  width: 6in;
 }
}

.pdf-footer {
   display:none;
}

Note that displaying none on the .pdf-footer will hide the default footer that MindTouch ships with.  The content parameter within the @bottom-left section only support plain text and won't support html.  

Breaking up the footer into separate elements

If you want to add more elements within the footer of every PDF page to have more control over the sections, use the following:

@page {
@bottom-left {
   content: "\A9 2016 Copyright Company. All rights reserved.";
   font-family:Arial, Helvetica, sans-serif;
   border-top: 1px solid #ccc;
   font-size: 8pt;
   color: #666666;
   width: 3in;
  }
@bottom-center{
content: counter(page);
   font-family:Arial, Helvetica, sans-serif;
   border-top: 1px solid #ccc;
   font-size: 8pt;
   color: #666666;
    }
@bottom-right{
   content: "more information";
   font-family:Arial, Helvetica, sans-serif;
   border-top: 1px solid #ccc;
   font-size: 8pt;
   color: #666666;
   }
}

Note: There are elements of the out of box pdf generation that can't be merged back into the PDF if you override it.  This includes:

  • QR code
  • Time/Date PDF was generated
  • Url for page
  • Powered by MindTouch wording

Custom Header

You can add the same customizations to the header that you can to the footer by changing the CSS a bit:

@page {
@top-left {
   content: "\A9 2016 Copyright Company. All rights reserved.";
   font-family:Arial, Helvetica, sans-serif;
   border-bottom: 1px solid #ccc;
   font-size: 8pt;
   color: #666666;
   width: 3in;
  }
@top-center{
content: counter(page);
   font-family:Arial, Helvetica, sans-serif;
   border-bottom: 1px solid #ccc;
   font-size: 8pt;
   color: #666666;
    }
@top-right{
   content: "more information";
   font-family:Arial, Helvetica, sans-serif;
   border-bottom: 1px solid #ccc;
   font-size: 8pt;
   color: #666666;
   }
}

Note that if you want to add the custom header elements in with your custom footer elements then you would only have one @page {  }  section with both of the contents in it.  

Change Header styling

If you want to change the header styling for the h1 header as an example, you'd add the following:

h2 { 
font-size: 24px;
display: block;
margin: 20px 0 10px 0; 
color: #FF0000;
font-weight: bold;
}

Note that this is the default h2 styling, which will affect the h1s of the page as the h1 in WYSIWYG are h2s in the source as we shift down all headers because the page title is actually an h1h1. The color has been modified in this example, but you have control to change any of these elements.

Considerations

As you are customizing the PDF, always check the output by going to a page and selecting More -> Save as PDF to ensure that it is formatted the way you want it to look.  

Additional information

A PDF book can contain up to 50 MindTouch articles. If more than 50 articles are added to a book, only the first 50 will be rendered within the PDF book. 

 

  • Was this article helpful?