Quote Layout (CSS)
- Anne Krieg
- Phu Nguyen (Unlicensed)
- 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
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
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