Add a complete look for your customized PDF template

Last modified by Andreea Chirica on 2026/08/05 17:14

cogThis snippet adds CSS styling for multiple page elements using a custom PDF template
Type
Category
Developed by

Andreea Chirica

Rating
0 Votes
LicenseGNU Lesser General Public License 2.1

Table of contents

Description

The following CSS rules need to be added inside the style element of a custom PDF Template ( see article with exact usage steps and the result or the more advanced documentation for customizing the look and feel of the PDF export).

/* PDF text style */
body {
  font-size: 12px;
}
.mytitle {
 color:#d44b21;
}

.mysubtitle {
 color:#e28743;
}


/* Distance from Header Logo */

#xwikicontent {
  padding-top: 30px;
}

#HErrorMacro {
  padding-top: 30px;
}

#HDiagram {
  padding-top: 30px;
}

#HChartMacro {
  padding-top: 30px;
}

#HTablewithheadersinthetoprowandleftcolumn {
  padding-top: 30px;
}

/* Distance from Header Logo for the example with a French table*/
#HTableaudontl27en-tEAteestsurlapremiE8religneetlapremiE8recolonne {
  padding-top: 30px;
}

/* Cover */
.covertitle {
  font-size: 40px;
  color:#154c79;
  font-weight: bold;
}

/* Header */
.page-title {
  margin-bottom: 30px;
  color:#154c79;
  font-weight: bold;
}


/* Boxes */

.box, .plainmessage, fieldset.xwikimessage {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #fafafa;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);
    overflow-x: auto;
}

.myinfomacro {
    color: #31708f;
    background-color: #e0fbfc;
    border-color: #00b4d8;
}

.mywarningmacro {
    color: #8a6d3b;
    background-color: #ffd60a;
    border-color: #ffc300;
}

.mysuccessmacro {
    color: #3c763d;
    background-color: #b5e48c;
    border-color: #76c893;
}

.myerrormacro {
    color: #ffffff;
    background-color: #f85e00;
    border-color: #d00000;
}

.myboxmacro {
  padding-top: 5px;
  padding-bottom: 5px;
  margin-bottom: 30px;
  color: #333333;
  background-color: #eeeeee;
}

.mycodemacro {
  background-color: #e9edc9;
  border-color: ccd5ae;
}

/* Images from Diagram and Gallery */
.diagram-container>.thumbnail {
    display: block;
    padding: 10px;
    margin-bottom: 20px;
    line-height: 1.428571429;
    background-color: #fafafa;
    border: 1px solid #ddd;
    border-radius: 4px; 
}

.thumbnail img {
   padding-right: 60px;
   padding-left: 70px;
}

.thumbnail .caption {
   text-align: center;
}

.mygallery {
  text-align: center;
}

.mygallery img {
 height: 300px;
 border: 10px solid #eeeeee;
}

/* Chart image */
a.wikimodel-freestanding {
 padding-left: 30px;
}


/* Quote */

blockquote {
    padding: 10px 0px;
    margin: 0 0 20px;
    font-size: 12px;
    border-left: 5px;
    border-top: 0px;
    border-bottom: 0px;
    border-right: 0px;
    border-style: solid;
    border-color: #eeeeee;
}


/* Links */

a.diagram-title {
 text-decoration:none;
 align: middle;
}

a {
 color: #34eb4c;
 text-decoration:none;
}

/* Table */

table.mytable {
   width: 300px;
}

.mytable th {
  font-size: 16px;
  color: #ffffff;
  border-width: 1px;
  border-color: #5e61ff;
  padding-bottom: 10px;
  padding-top: 10px;
  padding-left: 10px;
  background-color: #5e61ff;
  vertical-align: middle;
}

.mytable td {
  border-width: 1px;
  border-color: #5e61ff;
  background-color: #E7F4FB;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  color: #000000;
  font-size: 13px;
  vertical-align: middle;
}

Get Connected