Add a complete look for your customized PDF template
Last modified by Andreea Chirica on 2021/11/12 12:51
This snippet adds CSS styling for multiple page elements using a custom PDF template |
Type | |
Category | |
Developed by | |
Rating | |
License | GNU 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;
}
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;
}