Quote Layout (CSS)

1 Quote items by object type
2 CSS classes
- 2.1 Header - old
- 2.2 Heading new - Type 21-23
- 2.3 Dynamic Header
- 2.4 Page width and margins
- 2.5 Cover sheet
- 2.6 Following pages with page number
- 2.7 Text
- 2.8 Addresses
- 2.9 Introductory items
- 2.10 Listen
- 2.11 Product columns
- 2.12 Item numbers
- 2.13 Products
- 2.14 Product Page Break
- 2.15 Sums
- 2.16 Discounts
- 2.17 Dynamic product information
- 2.18 Splitter
- 2.19 Images
3 Restrictions for the quote layout

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

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

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

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

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

Dynamic Header

@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

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

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

Following pages with page number

@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

.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

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

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

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

Introductory items

.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

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

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

Product columns

.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

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

.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

@media print {

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

Sums

.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

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

Dynamic product information

.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

.type5 { /* Leerzeile */
}

.type6 { /* Horizontale Linie */
}

.type13 { /* Seitenumbruch */
}

Images

.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

appero quote Documentation

Quote Layout (CSS)

Analytics

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

Related content