Angebotslayout (CSS)

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
type20	Preisnachlass
type21	Überschrift 1
type22	Überschrift 2
type23	Überschrift 3

CSS-Klassen

Bitte beachten Sie, dass der dem Angebotsdokument zugrunde liegende Style kompatibel sein muß mit CSS 2.1

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

Überschriften - alt

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

Überschriften neu - Type 21-23

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

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

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

Seitenbreite und -ränder

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

Deckblatt

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

Folgeseiten mit Seitenzahl

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

Adressen

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

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

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

Einleitende Elemente

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

Produktspalten

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

Positionsnummern

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

Produkte

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

Umbruch von Produkten

@media print {

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

Summen

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

Rabatte

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

Dynamische Produktinformationen

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

Trenner

.type5 { /* Leerzeile */
}

.type6 { /* Horizontale Linie */
}

.type13 { /* Seitenumbruch */
}

Grafiken

.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