Add a complete look for your customized PDF template

Last modified by Andreea Chirica on 2021/11/12 12:51

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