Angebotslayout (CSS)

Angebotselemente nach Objekt-Typ

Folgende Angebotselemente können per CSS angesprochen werden:

TypAngebotselement
type1

Einleitung

type2

Abschluss

type3

Textbereich

type4

Produkt

type5

Leerzeile

type6

Trennlinie

type7Zwischensumme
type8Gesamtsumme netto
type9Gesamtsumme brutto
type10Mehrwertsteuer
type11Gruppensumme netto
type12Gruppensumme brutto
type13

Seitenumbruch

type14

Produkt-Details

type15

Produkt-Übersicht

type16

Summenrabatt

type17

Unterschrift

type18

Grafik

type19

Spaltenbezeichnungen

type20Preisnachlass
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