Versions Compared

Old Version 18

changes.mady.by.user Benedikt Kastl

Saved on

compared with

New Version Current

changes.mady.by.user Anne Krieg

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents

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

Note

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:

Code Block
languagecss
themeRDark
titleÜberschriften - alt
linenumberstrue
collapsetrue

...

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


Code Block
languagecss
themeRDark
title

...

Überschriften neu - Type 21-23
linenumberstrue
collapsetrue

...

.type21

...

{
  color: #154c79 ;

...

...

 font-size: 16px;
  font-

...

weight: bold;

...

...

...

padding-

...

bottom:

...

16px;
}

.type21 .textpos {
  color:

...

#666666;

...

padding-

...

top: 0px

...

!Important;

...

}


Code Block
languagecss
themeRDark
titleDynamischer Header
linenumberstrue
collapsetrue
@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;
  }
  
}


Code Block
languagecss
themeRDark
titleSeitenbreite und -ränder
linenumberstrue
collapsetrue
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;
}


Code Block
languagecss
themeRDark
titleDeckblatt
linenumberstrue
collapsetrue
@page:first {
  margin: 0px !important;
  margin-top: 100px !important;
  padding: 0px !important;
}


Code Block
languagecss
themeRDark
titleFolgeseiten mit Seitenzahl
linenumberstrue
collapsetrue
@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;
  }
}


Code Block
languagecss
themeRDark
titleText
linenumberstrue
collapsetrue

...

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

...

}

...


Code Block
languagecss
themeRDark
titleAdressen
linenumberstrue
collapsetrue
.compname { /* Absender (horizonale Zeile links) */
  display: none;
}

...

td.address { /*

...

Empfänger (Textbereich links) */
}

...

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


Code Block
languagecss
themeRDark
title

...

Einleitende Elemente
linenumberstrue
collapsetrue
.type1.

...

item1 { /* Intro Cover

...

Sheet

...

/

...

Einleitung

...

Deckblatt */

...

padding-top:

...

150px;
}

...

.type1.item1 div {

...

...

...

languagecss
themeRDark
titleEinleitende Elemente
linenumberstrue
collapsetrue

...

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
languagecss
themeRDark
titleListen
linenumberstrue
collapsetrue
ul { /* Listen */
  padding-left: 0px !important;

...

margin-

...

left: 55px

...

!important;
}

...

ul li { /* Aufzählungspunkte */
  color:

...

 #444444;
  margin-bottom: 10px;
}


Code Block
languagecss
themeRDark
title

...

Produktspalten
linenumberstrue
collapsetrue

...

.type19 { /*

...

Spaltenkopf */
}

.productfirst2 { /* Spaltenbezeichnung */

...

 font-

...

size:

...

12px !important;

...

color:

...

#444444 !important;

...

...

background-color: #ffffff;  
  border-top: double #b2b2b2 !important;

...

border-top-

...

width:

...

1px;

...

languagecss
themeRDark
titleProduktspalten
linenumberstrue
collapsetrue

...

...

 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
languagecss
themeRDark
titlePositionsnummern
linenumberstrue
collapsetrue
td.textpos {

...

font-

...

family:

...

Helvetica, Arial,

...

sans-

...

serif

...

!important;

...

languagecss
themeRDark
titlePositionsnummern
linenumberstrue
collapsetrue

...

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
languagecss
themeRDark
titleProdukte
linenumberstrue
collapsetrue
.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
languagecss
themeRDark
titleUmbruch von Produkten
linenumberstrue
collapsetrue
@media print {

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


Code Block
languagecss
themeRDark
titleSummen
linenumberstrue
collapsetrue
.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
languagecss
themeRDark
titleRabatte
linenumberstrue
collapsetrue
.type16 { /* Summenrabatt */
  font-size: 12px !important;
  background-color: #9b9b9b;
  color: #ffffff !important;
}


Code Block
languagecss
themeRDark
titleDynamische Produktinformationen
linenumberstrue
collapsetrue
.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
languagecss
themeRDark
titleTrenner
linenumberstrue
collapsetrue
.type5 { /* Leerzeile */
}

.type6 { /* Horizontale Linie */
}

.type13 { /* Seitenumbruch */
}


Code Block
languagecss
themeRDark
titleGrafiken
linenumberstrue
collapsetrue
.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