Page Comparison

Table of Contents

Quote items by object type

The following quote items can be addressed via CSS:

Type	Quote item
type1	Header
type2	Footer
type3	Text Area
type4	Product
type5	Spacer
type6	Horizontal Line
type7	Subtotal
type8	Total Net
type9	Toal Gross
type10	VAT
type11	Group Total Net
type12	Group Total Gross
type13	Page Break
type14	Product Details
type15	Product Overview
type16	Sum Discount
type17	Signature
type18	Image
type19	Column Heading
type20	Price Rebate
type21	Heading 1
type22	Heading 2
type23	Heading 3

CSS classes

Note
Please note that all CSS needs to be CSS 2.1 compatible.

For example, the following classes are included in the CSS stylesheet of the client:

Header - old

Code Block

language	css

td.headline1 td.textpos { /* Position numbers for headlines with class headline1 | Positionsnummern für Überschriften mit Klasse headline1 */
font-family: Helvetica, Arial, sans-serif !important;
font-size: 24px !important;font-weight: lighter !important;
line-height: 24px !important;
color: #666666 !important;padding: 0px 0px 0px 0px !important;
margin: 0px 0px 20px 0px !important;
display: block;min-height: 36px;}

td.headline1 span, td.headline1 p, td.headline1 td.col1 span, td.headline1 div span, td.headline1 div p {  /* Headlines with class headline1 / Überschriften mit Klasse headline1 */
font-family: Helvetica, Arial, sans-serif !important;
font-size: 24px !important;
font-weight: lighter !important;
line-height: 24px !important;
color: #666666 !important;
padding: 0px 0px 0px 0px !important;
margin: 0px 0px 20px 0px !important;
display: block;min-height: 36px;}

td.headline2 td.textpos { /* Position numbers for headlines with class headline2 | Positionsnummern für Überschriften mit Klasse headline2 */
font-family: Helvetica, Arial, sans-serif !important;
font-size: 20px !important;
font-weight: lighter !important;
line-height: 24px !important;
color: #666666 !important;
padding: 5px 0px 5px 0px !important;
margin: 0px 0px 30px 0px !important;}

td.headline2 span, td.headline2 p, td.headline2 td.col1 span, td.headline2 div span, td.headline2 div p { /* Headlines with class headline2 / Überschriften mit Klasse headline2 */
font-family: Helvetica, Arial, sans-serif !important;
font-size: 20px !important;
font-weight: lighter !important;
line-height: 24px !important;
color: #666666 !important;
padding: 5px 0px 5px 0px !important;
margin: 0px 0px 15px 0px !important;
display: block;min-height: 24px;}

Heading new - Type 21-23

Code Block

language	css

.type21 {
  color: #154c79 ;
  font-size: 16px;
  font-weight: bold;
  padding-bottom: 16px;
}

.type21 .textpos {
  color: #666666;
  padding-top: 0px !Important;
}

Dynamic Header

Code Block

language	css

@media print {
  
  .dynamicHeader {
    font-family: Helvetica, Arial, sans-serif !important;
    color: #ffffff;
    font-size: 10px;
    font-weight: normal;
    position: absolute;
    left: 55px !important;
    top: 8px !important;
  }
  
}

Page width and margins

Code Block

language	css

td.maintd_page {
  max-width: 640px !important; /* Summe der Spaltenbreite */
  overflow: hidden;
  margin: 0px !important;
  padding: 0px !important;
}

table.innerpage {
  margin-left: 0px !important;
}

.bdpdf {
  padding-left: 70px !important;
}

Cover sheet

Code Block

language	css

@page:first {
  margin: 0px !important;
  margin-top: 100px !important;
  padding: 0px !important;
}

Following pages with page number

Code Block

language	css

@page {
  counter-increment: page;
  margin-top: 150px !important;
  margin-bottom: 225px !important;

  @bottom-center {
    font-family: Helvetica, Arial, sans-serif !important;
    font-size: 10px !important;
    font-weight: lighter;
    color: #666666 !important;
    text-align: left !important;
    content: "Seite " counter(page) " von " counter(pages) element(footercenter) !important;
    text-indent: 675px;
  }
}

Text

Code Block

language	css

.type3 span, .type3 p { /* Rich Text | Textbereich */
font-family: Helvetica, Arial, sans-serif !important;
font-size: 12px !important;
line-height: 14px;color: #999999 !important;}

.type3.terms_specific 
{padding-top: 50px !important;
border-top: 1px solid #b2b2b2 !important;}

.type3.terms_general {padding-top: 20px !important;}

.type3.terms_specific span, .type3.terms_general span 
{font-size: 12px !important;color: #999999 !important;}

Addresses

Code Block

language	css

.compname { /* Absender (horizonale Zeile links) */
  display: none;
}

td.address { /* Empfänger (Textbereich links) */
}

td.sender { /* Absender (Textbereich rechts) */
 display: none;
}

Introductory items

Code Block

language	css

.type1.item1 { /* Intro Cover Sheet / Einleitung Deckblatt */
  padding-top: 150px;
}

.type1.item1 div {
  width: auto !important;
  max-width: 450px;
}

.type1.item2 { /* Intro Cover Sheet / Einleitung Deckblatt */
}

.type1.item2 div {
  width: auto !important;
  max-width: 450px;
}

.type1.item2 span {
  color: #ffffff !important;
}

Listen

Code Block

language	css

ul { /* Listen */
  padding-left: 0px !important;
  margin-left: 55px !important;
}

ul li { /* Aufzählungspunkte */
  color: #444444;
  margin-bottom: 10px;
}

Product columns

Code Block

language	css

.type19 { /* Spaltenkopf */
}

.productfirst2 { /* Spaltenbezeichnung */
  font-size: 12px !important;
  color: #444444 !important;
  background-color: #ffffff;  
  border-top: double #b2b2b2 !important;
  border-top-width: 1px;
  border-left: none;
  border-right: none;
  border-bottom: solid 1px #b2b2b2 !important;
  height: 20px;
  margin: 0px;
  padding-top: 10px;
  padding-left: 1px;
}

.productfirst2 > span { /* Innerer Abstand der Spaltenbezeichnung */
  display: block;
  padding-right: 3px;
  font-size: 12px !important;
  color: #444444 !important;
}

.productfirst2:nth-last-child(1) { /* Letzte Spalte */
 border-right: none;
}

Item numbers

Code Block

language	css

td.textpos {
  font-family: Helvetica, Arial, sans-serif !important;
  font-size: 24px;
  font-weight: lighter;
  line-height: 24px;
  color: #666666;
  margin: 0px !important;
  padding: 2px 0px 10px 0px !important;
}

div.listing {
  margin: 0px !important;
  padding: 0px !important;
  display: block !important;
  float: left !important;
  height: 25px !important;
}

Products

Code Block

language	css

.type4 { /* Produkt */
  font-size: 12px !important;
  color: #444444 !important;
  background-color: #FFFFFF;
  padding: 0px !important;
  margin-top: 10px;
  display: block;
}

div.producttitle2 span { /* Produktbezeichnung */
  font-weight: normal;
}

.producttext2, .producttext2 span { /* Produktbeschreibung */
  font-size: 11px !important;
  color: #444444 !important;
}

.type4 div.line { /* Trennlinie zwischen Produkten */
  border-top: solid 0px #b2b2b2 !important;
  margin-top: 5px;
}

.typeheader {
  display: none !important;
}

Product Page Break

Code Block

language	css

@media print {

  .type4 { /* Seitenumbruch erst nach Produktposition */
    page-break-after: avoid !important;
  }
  
}

Sums

Code Block

language	css

.zwsumtitle, .mwstsumtitle, .bruttosumtitle, .nettosumtitle { /* Bezeichnung der Summenelemente */
  color: #444444 !important;
  padding-top: 0px !important;
  padding-right: 0px !important;
}

.zwsumsum, .mwstsumsum, .bruttosumsum, .nettosumsum { /* Summenelemente */
  color: #444444 !important;
  padding-top: 0px !important;
  padding-right: 0px !important;
}

.type7, .type8, .type9, .type11, .type12, .type16 { /* Summenelemente */
  color: #444444 !important;
  background-color: #FFFFFF;
}

.type7 div, .type8 div, .type9 div, .type10 div, .type11 div, .type12 div, .type15 div, .type16 div { /* Summenelemente */
  font-size: 12px !important;
  font-weight: normal !important;
  margin: 0px 0px 0px 0px !important;
  border-style: none !important;
  height: 25px;
  border-bottom: solid 1px #b2b2b2 !important;
  padding-top: 10px !important;
}

.type7 div, .type8 div { /* Summenelemente */
  background-color: #efeeee;
}

.type9, .type9 div, .type11 div { /* Summenelemente */
  background-color: #999999 !important;
}

.type4 span, .type7 span, .type8 span, .type9 span, .type10 span, .type11 span, .type12 span, .type15 span, .type16 span { /* Werte der Summenelemente */
  padding-right: 3px;
  padding-left: 1px;
  font-size: 12px !important;
  color: #444444 !important;
}

Discounts

Code Block

language	css

.type16 { /* Summenrabatt */
  font-size: 12px !important;
  background-color: #9b9b9b;
  color: #ffffff !important;
}

Dynamic product information

Code Block

language	css

.type14 { /* Produktdetails */
}

td.type15 { /* Produktübersicht */
  background-color: #efeeee;
  height: auto !important;
  border-bottom: solid 0px #ffffff;
}

td.type15 div { /* Produktübersicht */
  color: #444444 !important;
}

Splitter

Code Block

language	css

.type5 { /* Leerzeile */
}

.type6 { /* Horizontale Linie */
}

.type13 { /* Seitenumbruch */
}

Images

Code Block

language	css

.type17 { /* Signatur */
        padding-left: 503px !important;
        padding-top: 55px !important;
        background-color: none !important;
}

.type18 img { /* Grafik */
        max-width: 100% !important;
        height: auto !important;
}

Restrictions for the quote layout

Changing background graphics on the following pages (cover page + following page only)
Different logo sizes on the following pages
Background colors (beyond stationery graphics)
Flush alignment of graphics at top/bottom of pages
Changing background color of Quote Line Items
Custom fonts beyond the default (limited by Salesforce's PDF engine)
Advanced formatting of product descriptions
Page numbers alternating left/right
Images and text next to each other

Version	Old Version 4	New Version Current
Changes made by	Phu Nguyen (Unlicensed)	Anne Krieg
Saved on	Dec 20, 2021	Feb 04, 2022

Versions Compared

Key

Quote items by object type

CSS classes

Header - old

Heading new - Type 21-23

Dynamic Header

Page width and margins

Cover sheet

Following pages with page number

Text

Addresses

Introductory items

Listen

Product columns

Item numbers

Products

Product Page Break

Sums

Discounts

Dynamic product information

Splitter

Images

Restrictions for the quote layout