Page Comparison

Table of Contents

Angebotselemente nach Objekt-Typ

Folgende Angebotselemente können per CSS angesprochen werden:

Typ	Angebotselement
type1	Einleitung
type2	Abschluss
type3	Textbereich
type4	Produkt
type5	Leerzeile
type6	Trennlinie
type7	Zwischensumme
type8	Gesamtsumme netto
type9	Gesamtsumme brutto
type10	Mehrwertsteuer
type11	Gruppensumme netto
type12	Gruppensumme brutto
type13	Seitenumbruch
type14	Produkt-Details
type15	Produkt-Übersicht
type16	Summenrabatt
type17	Unterschrift
type18	Grafik
type19	Spaltenbezeichnungen

CSS-Klassen

Folgende Klassen sind z.B. im CSS-Stylesheet des Mandanten enthalten:

Code Block

language	css
theme	RDark
title	Überschriften
linenumbers	true
collapse	true

h1 {
  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 10px0px 0px !important;

 margin: 0px !important;0px }

h2 {
  font-family: Helvetica, Arial, sans-serif20px 0px !important;
  font-sizedisplay: 24px;
  font-weightblock;min-height: lighter36px;}

 line-height: 28px;
  color: #666666;
  padding: 5px 0px 5px 0px !important;
}

h3 {
  font-size: 16px;
  line-height: 16px;
  color: #666666;
}


@media print {

  h1 {
    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 10px0px 0px !important;
margin: 0px 0px  margin:20px 0px !important;
display: block;min-height: 36px;}

td.headline2 td.textpos h2{ {/* Position numbers for headlines font-family: Helvetica, Arial, sans-serif !important;
    font-size: 24px;
   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 28px!important;
    color: #ffffff;
   #666666 !important;
padding: 5px 0px 5px 0px !important;
margin: 0px }0px 30px 0px !important;}
h3
{td.headline2 span, td.headline2 p,  font-size: 16px;
    line-height: 16px;
    color: #666666;
  }
  
}

Code Block

language	css
theme	RDark
title	Dynamischer Header
linenumbers	true
collapse	true

@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;
  }
  
}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;}

Code Block

language	css
theme	RDark
title	Seitenbreite und -ränderDynamischer Header
linenumbers	true
collapse	true

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

table.innerpage {
  margin-left: 0px .dynamicHeader {
    font-family: Helvetica, Arial, sans-serif !important;
    color: #ffffff;
    font-size: 10px;
    font-weight: normal;
    position: absolute;
    left: 55px !important;
}  .bdpdf {   padding-lefttop: 70px8px !important;
  }
  
}

Folgeseiten mit Seitenzahl

Code Block

language	css
theme	RDark
title	DeckblattSeitenbreite und -ränder
linenumbers	true
collapse	true

@page:firsttd.maintd_page {
  marginmax-width: 0px640px !important; /* Summe der Spaltenbreite */
  overflow: hidden;
  margin-top: 100px0px !important;
  padding: 0px !important;
}

Code Block

language

css

theme

RDark

title



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

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

Code Block

language	css
theme	RDark
title	Deckblatt
linenumbers	true
collapse	true

@page:first {
  counter-incrementmargin: page0px !important;
  margin-top: 150px100px !important;
  margin-bottompadding: 225px0px !important;
}

Code Block

language	css
theme	RDark
title	Folgeseiten mit Seitenzahl
linenumbers	true
collapse	true

@page {
  @bottomcounter-centerincrement: {page;
    fontmargin-familytop: Helvetica, Arial, sans-serif 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;
  }
}

Code Block

language	css
theme	RDark
title	Text
linenumbers	true
collapse	true

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

.type3 span {
  font-size: 12px !important;
  line-height: 14px;
}

.type3.copy span {
 Rich Text | Textbereich */
font-family: Helvetica, Arial, sans-serif !important;
font-size: 12px !important;
  line-height: 14px !important;
  color: #444444#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;}
}

Code Block

language	css
theme	RDark
title	Adressen
linenumbers	true
collapse	true

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

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

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

Code Block

language	css
theme	RDark
title	Einleitende Elemente
linenumbers	true
collapse	true

.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;
}

Code Block

language	css
theme	RDark
title	Listen
linenumbers	true
collapse	true

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

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

Code Block

language	css
theme	RDark
title	Produktspalten
linenumbers	true
collapse	true

.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;
}

Code Block

language	css
theme	RDark
title	Positionsnummern
linenumbers	true
collapse	true

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;
}

Code Block

language	css
theme	RDark
title	Produkte
linenumbers	true
collapse	true

.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;
}

Code Block

language	css
theme	RDark
title	Umbruch von Produkten
linenumbers	true
collapse	true

@media print {

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

Code Block

language	css
theme	RDark
title	Summen
linenumbers	true
collapse	true

.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;
}

Code Block

language	css
theme	RDark
title	Rabatte
linenumbers	true
collapse	true

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

Code Block

language	css
theme	RDark
title	Dynamische Produktinformationen
linenumbers	true
collapse	true

.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;
}

Code Block

language	css
theme	RDark
title	Trenner
linenumbers	true
collapse	true

.type5 { /* Leerzeile */
}

.type6 { /* Horizontale Linie */
}

.type13 { /* Seitenumbruch */
}

Code Block

language	css
theme	RDark
title	Grafiken
linenumbers	true
collapse	true

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

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

Restriktionen für das Angebotslayout

Wechselnde Hintergrundgrafiken auf den Folgeseiten (nur Deckblatt + Folgeseite)
Unterschiedliche Logo-Größen auf den Folgeseiten
Hintergrundfarben (über die Briefpapier-Grafiken hinaus)
Bündige Ausrichtung von Grafiken am oberen / unteren Seitenrand
Wechselnde Hintergrundfarbe der Angebotspositionen
Individuelle Schriftarten über den Standard hinaus
(durch die PDF-Engine von Salesforce limitiert)
Weitergehende Formatierung von Produktbeschreibungen
Seitennummern alternierend links/rechts
Grafiken und Text nebeneinander

Versions Compared

Old Version 21

New Version 22

Key

Angebotselemente nach Objekt-Typ

CSS-Klassen

Restriktionen für das Angebotslayout