Gastrosystem CSS Optik und Style | YePix * Gastrosysteme - Bamberg

CSS Optik und Style

Um die Darstellung Ihrer visuellen Inhalte etwas zu verschönern, habe ich für Sie ein Tutorial bereitgestellt um Ihnen die Arbeit mit PL-System zu erleichtern.

Im nachfolgendem sehen Sie wie Sie Ihre Texte formatieren, damit diese Ihren Wünschen entsprechen und genau so angezeigt werden, wie Sie es sich vorstellen und möchten.

Shauen Sie hier öffters mal vorbei. Diese Seite wird kontinuerlich mit neuen Erweiterungen aktualisiert.

Sie können Ihre Texte zwischen dem Inline-Element <span> und </span> platzieren. Hierbei werden Texte auch nebeneinander angezeigt, da dieser nur innerhalb eines Bereiches angewendet wird.

Zwischen dem Block-Element <div> und </div> dagegen, werden Inhalte grundsätzlich untereinander geschoben da dieser den gesamten Platz einnimmt solange nichts anderes definiert wurde..

<span class="pls_caveat40"> Textform </span>
<div class="pls_caveat40"> Textform </div>

<span class="pls_caveat40B"> Textform </span>
<div class="pls_caveat40B"> Textform </div>

Textformat


Bei der Schrift "Caveat" stehen Ihnen 22 Parameter zu Auswahl. Die Angabe immer um 2 höher. Diese Schriftart unterstützt auch die Schriftform "Fett". Dazu setzen Sie einfach am Ende ein "B" ein.

pls_caveat20B bis pls_caveat40B
pls_caveat20 bis pls_caveat40

Textform

Bei der Schrift "Tangerine" stehen Ihnen 20 Parameter zu Auswahl. Die Angabe wird immer um 2 höher gesetzt. Diese Schriftart unterstützt auch die Schriftform "Fett". Dazu setzen Sie einfach am Ende ein "B" ein.

pls_Tangerine20B bis pls_Tangerine40B
pls_Tangerine20 bis pls_Tangerine40

Textform

Bei der Schrift "Marck Script" stehen Ihnen 10 Parameter zu Auswahl. Die Angabe wird immer um 2 höher gesetzt. Diese Schriftart unterstützt leider nicht die Schriftform "Fett".



pls_MarckScript20 bis pls_MarckScript40

Textform

Bei der Schrift "Neucha" stehen Ihnen 12 Parameter zu Auswahl. Die Angabe wird immer um 2 höher gesetzt. Diese Schriftart unterstützt leider nicht die Schriftform "Fett".


pls_Neucha18 bis pls_Neucha40

Textform

Bei der Schrift "Lusitana" stehen Ihnen 12 Parameter zu Auswahl. Die Angabe wird immer um 2 höher gesetzt. Diese Schriftart unterstützt leider nicht die Schriftform "Fett".


pls_Lusitana18 bis pls_Lusitana40

Textform

Bei der Schrift "Jura" stehen Ihnen 20 Parameter zu Auswahl. Die Angabe wird immer um 2 höher gesetzt. Diese Schriftart unterstützt auch die Schriftform "Fett". Dazu setzen Sie einfach am Ende ein "B" ein.

pls_Jura20B bis pls_Jura40B
pls_Jura20 bis pls_Jura40
Textform

Bei der Schrift "Courgette" stehen Ihnen 20 Parameter zu Auswahl. Die Angabe wird immer um 2 höher gesetzt. Diese Schriftart unterstützt auch die Schriftform "Fett". Dazu setzen Sie einfach am Ende ein "B" ein.

pls_Courgette20 bis pls_Courgette40
pls_Courgette20B bis pls_Courgette40B

Textform

Bei der Schrift "Merienda" stehen Ihnen 20 Parameter zu Auswahl. Die Angabe wird immer um 2 höher gesetzt. Diese Schriftart unterstützt auch die Schriftform "Fett". Dazu setzen Sie einfach am Ende ein "B" ein.

pls_Merienda20 bis pls_Merienda40
pls_Merienda20B bis pls_Merienda40B

Textform

Bei der Schrift "Lovers Quarrel" stehen Ihnen 15 Parameter zu Auswahl. Die Angabe wird immer um 2 höher gesetzt. Diese Schriftart unterstützt leider nicht die Schriftform "Fett".


pls_LoversQuarrel30 bis pls_LoversQuarrel58

Textform


Schattierung

Als Highlight, können Texte zusätzlich mit unterschiedlichen Schattierungen versehen werden. Dazu kombinieren Sie die Parameter für Textform und Schattierung.

Bitte achten Sie auf den Abstand zwischen den beiden Parametern:
pls_caveat40 pls_TwhiteSblack

<span class="pls_caveat40  pls_TwhiteSblack"> Textform </span>
<div class="pls_caveat40  pls_TwhiteSblack"> Textform </div>

Es stehen Ihnen 5 Parameter für Schriftfarben mt Schattierung....
Mit pls_TwhiteSblack wird der Text in weiss mit schwarzem Schatten erzeugt.
Mit pls_TblackSgray wird der Text in schwarz mit grauen Schatten erzeugt.
Mit pls_TblackSdark wird der Text in schwarz mit dunkelgrauen Schatten erzeugt.
Mit pls_TblueSdark wird der Text in blau mit dunkelgrauen Schatten erzeugt.
Mit pls_TredSdark wird der Text in rot mit dunkelgrauen Schatten erzeugt.


... und 6 Parameter für reine Textschattierung.
Mit font-effect-shadow-multiple wird doppelter 3D schwarzer Schatten erzeugt.
Mit pls_Sblack wird schwarzer Schatten erzeugt.
Mit pls_Sgray wird grauer Schatten erzeugt.
Mit pls_Sdark wird dunkelgrauer Schatten erzeugt.
Mit pls_blue wird blauer Schatten erzeugt.
Mit pls_Sred wird roter Schatten erzeugt.


Textform
Textform
Textform
Textform
Textform
Textform
Textform
Textform
Textform


Tabellen und Boxen

Boxen mit umrandung.
Mit dem Block-Element <div></div> und dem Parameter pls_PB10GRA, erzeugen Sie eine Tabelle mit kolorisierter Umrandung. <div class="pls_PB10GRA"></div>

Wenn Sie zwischen <div> und </div> Ihren Text einsetzen, wird dieser innerhalb der Box angezeigt.
<div class="pls_PB10GRA"><span class="pls_caveat40"> Textform </span></div>

Es stehen Ihnen 10 Parameter für Boxen mit kolorisierter Unrandung und 2 ohne Rand zu Auswahl. Dabei wird der Inhalt entweder um 10px oder um 5px vom Rand der Box innen platziert.

Mit pls_PB5 erzeugen Sie eine Tabelle ohne Umrandung + Randabstand von 5px
Mit pls_PB10 erzeugen Sie eine Tabelle ohne Umrandung + Randabstand von 10px
Mit pls_PB5GRA erzeugen Sie eine Tabelle mit grauer Umrandung + Randabstand von 5px
Mit pls_PB10GRA erzeugen Sie eine Tabelle mit grauer Umrandung + Randabstand von 10px
Mit pls_PB5DRK erzeugen Sie eine Tabelle mit dunkelgrauer Umrandung + Randabstand von 5px
Mit pls_PB10DRK erzeugen Sie eine Tabelle mit dunkelgrauer Umrandung + Randabstand von 10px
Mit pls_PB5BCK erzeugen Sie eine Tabelle mit schwarzer Umrandung + Randabstand von 5px
Mit pls_PB10BCK erzeugen Sie eine Tabelle mit schwarzer Umrandung + Randabstand von 10px
Mit pls_PB5RED erzeugen Sie eine Tabelle mit roter Umrandung + Randabstand von 5px
Mit pls_PB10RED erzeugen Sie eine Tabelle mit roter Umrandung + Randabstand von 10px
Mit pls_PB5BLU erzeugen Sie eine Tabelle mit blauer Umrandung + Randabstand von 5px
Mit pls_PB10BLU erzeugen Sie eine Tabelle mit blauer Umrandung + Randabstand von 10px

Es stehen Ihnen 8 Parameter für Boxen mit kolorisierter Unrandung und abgerundetem Rand zu Auswahl. Dabei wird der Inhalt entweder um 10px oder um 5px vom Rand der Box innen platziert.

Mit pls_PB5RDGRA erzeugen Sie eine Tabelle mit grauer Umrandung, abgerundetem Rand + Randabstand von 5px
Mit pls_PB10RDGRA erzeugen Sie eine Tabelle mit grauer Umrandung, abgerundetem Rand + Randabstand von 10px
Mit pls_PB5RDDRK erzeugen Sie eine Tabelle mit dunkelgrauer Umrandung, abgerundetem Rand + Randabstand von 5px
Mit pls_PB10RDDRK erzeugen Sie eine Tabelle mit dunkelgrauer Umrandung, abgerundetem Rand + Randabstand von 10px
Mit pls_PB5RDBCK erzeugen Sie eine Tabelle mit schwarzer Umrandung, abgerundetem Rand + Randabstand von 5px
Mit pls_PB10RDBCK erzeugen Sie eine Tabelle mit schwarzer Umrandung, abgerundetem Rand + Randabstand von 10px
Mit pls_PB5RDRED erzeugen Sie eine Tabelle mit roter Umrandung, abgerundetem Rand + Randabstand von 5px
Mit pls_PB10RDRED erzeugen Sie eine Tabelle mit roter Umrandung, abgerundetem Rand + Randabstand von 10px
Mit pls_PB5RDBLU erzeugen Sie eine Tabelle mit blauer Umrandung, abgerundetem Rand + Randabstand von 5px
Mit pls_PB10RDBLU erzeugen Sie eine Tabelle mit blauer Umrandung, abgerundetem Rand + Randabstand von 10px

Textform

Textform

Textform

Textform

Textform

Textform

Textform



Boxen mit umrandung und Hintergrund.
Wie schon oben beschrieben. Mit dem Block-Element <div></div> und dem Parameter pls_PB10GRA, erzeugen Sie eine Tabelle mit kolorisierter Umrandung. Jetzt fügen wir einen farbigen Hintergrung hinzu um der Tabelle etwas hervor zu heben. <div class="pls_BgrRed  pls_PB10GRA"></div>

Wenn Sie zwischen <div> und </div> Ihren Text einsetzen, wird dieser innerhalb der Box angezeigt.
<div class="pls_BgrRed  pls_PB10GRA"><span class="pls_caveat40"> Textform </span></div>

Bitte achten Sie auf den Abstand zwischen den beiden Parametern:
pls_BgrRed pls_PB10GRA

Es stehen Ihnen 8 Parameter für Boxen mit farbigen Hintergrund zu Auswahl.

Mit pls_BgrRed wird ein roter Hintergrund erzeugt.
Mit pls_BgrBlu wird ein blauer Hintergrund erzeugt.
Mit pls_BgrGra wird ein grauer Hintergrund erzeugt.
Mit pls_BgrYel wird ein gelber Hintergrund erzeugt.
Mit pls_BgrOrg wird ein oranger Hintergrund erzeugt.
Mit pls_BgrGrn wird ein grüner Hintergrund erzeugt.
Mit pls_BgrDrkBlu wird ein dunkelblauer Hintergrund erzeugt.
Mit pls_BgrDrkRed wird ein dunkelroter Hintergrund erzeugt.

Textform

Textform

Textform



Boxenbreite beeinflussen.
Sie können die Breite der Boxen, sowie die Anordnung mit dem Block-Element <div> und </div>jederzeit beeinflussen.

In der Bootstrap Responsive Version stehen Ihnen 12 Parameter zu Verfügung.
Ich empfehle jedoch die Boxenanordnung chöchstens in jeweils 3 zu ordnen, deswegen die Parameter erst ab der Breite 4 "col-sm-4".
Bedenken Sie, dass der Boxeninhalt noch etwas Platz benötigt um ordentlich angezeigt zu werden und um optisch gut aussieht.

Der Platz auf Ihrer Seite berechnet sich aus 12 Reihen.
Wenn Sie jetzt drei gleich grosse Boxen nebeneinander platzieren möchten, so rechnen sich diese mit jeweils 4 Reihen.
Zwei Boxen mit gleicher Grösse, rechnen sich mit jeweils 6 Reihen.
Zwei Boxen mit unterschiedlicher Grösse, rechnen sich mit, z. B. 7 und 5 Reihen.


Ich empfehle Ihnen nur diese 6 Parameter für Boxenbreite zu nutzen, die auch miteinander kombiniert werden können, um bestmögliche Ergebnisse zu erzielen.

<div class="col-sm-4"> Boxeninhalt </div>
<div class="col-sm-5"> Boxeninhalt </div>
<div class="col-sm-6"> Boxeninhalt </div>
<div class="col-sm-7"> Boxeninhalt </div>
<div class="col-sm-8"> Boxeninhalt </div>
<div class="col-sm-12"> Boxeninhalt </div>



Boxeninhalt = Boxenbreite mit 4 Reihen col-sm-4
<div class="col-sm-4"> Boxeninhalt </div>

Boxeninhalt = Boxenbreite mit 4 Reihen col-sm-4
<div class="col-sm-4"> Boxeninhalt </div>

Boxeninhalt = Boxenbreite mit 4 Reihen col-sm-4
<div class="col-sm-4"> Boxeninhalt </div>


Boxeninhalt = Boxenbreite mit 7 Reihen col-sm-7
<div class="col-sm-7"> Boxeninhalt </div>

Boxeninhalt = Boxenbreite mit 5 Reihen col-sm-5
<div class="col-sm-5"> Boxeninhalt </div>


Boxeninhalt = Boxenbreite mit 12 Reihen col-sm-12
<div class="col-sm-12"> Boxeninhalt </div>

Boxeninhalt = Boxenbreite mit 4 Reihen col-sm-4, mit Umrandung pls_PB10DRK und farbigen Hintergrund pls_BgrYel

Bitte achten Sie auf den Abstabd zwischen pls_PB10DRK und pls_BgrYel

<div class="col-sm-4">
<div class="pls_PB10DRK pls_BgrYel"> Boxeninhalt </div>
</div>
Boxeninhalt = Boxenbreite mit 4 Reihen col-sm-4, mit Umrandung pls_PB10DRK und farbigen Hintergrund pls_BgrYel

Bitte achten Sie auf den Abstabd zwischen pls_PB10DRK und pls_BgrYel

<div class="col-sm-4">
<div class="pls_PB10DRK pls_BgrYel"> Boxeninhalt </div>
</div>
Boxeninhalt = Boxenbreite mit 4 Reihen col-sm-4, mit Umrandung pls_PB10DRK und farbigen Hintergrund pls_BgrYel

Bitte achten Sie auf den Abstabd zwischen pls_PB10DRK und pls_BgrYel

<div class="col-sm-4">
<div class="pls_PB10DRK pls_BgrYel"> Boxeninhalt </div>
</div>

Boxeninhalt = Boxenbreite mit 7 Reihen col-sm-7, mit Umrandung pls_PB10DRK und farbigen Hintergrund pls_BgrYel

Bitte achten Sie auf den Abstabd zwischen pls_PB10DRK und pls_BgrYel

<div class="col-sm-7">
<div class="pls_PB10DRK pls_BgrYel"> Boxeninhalt </div>
</div>
Boxeninhalt = Boxenbreite mit 5 Reihen col-sm-5, mit Umrandung pls_PB10DRK und farbigen Hintergrund pls_BgrYel

Bitte achten Sie auf den Abstabd zwischen pls_PB10DRK und pls_BgrYel

<div class="col-sm-5">
<div class="pls_PB10DRK pls_BgrYel"> Boxeninhalt </div>
</div>

Boxeninhalt = Boxenbreite mit 12 Reihen col-sm-12, mit Umrandung pls_PB10DRK und farbigen Hintergrund pls_BgrYel

Bitte achten Sie auf den Abstabd zwischen pls_PB10DRK und pls_BgrYel

<div class="col-sm-12">
<div class="pls_PB10DRK pls_BgrYel"> Boxeninhalt </div>
</div>


Um den Boxeninhalt zu formatieren, nutzen Sie wie oben beschrieben dem Inline-Element <span> und </span>
Anstatt nur den reinen Text zu schreibeb " Boxeninhalt " platzieren Sie an der stelle folgenden code: <span class="pls_caveat40 "> Boxeninhalt</span>. Diesen können Sie wiederrum mit anderen Formatierungen kombinieren.



Icons & Symbole

Das PL-System unterstützt die neuste Icongeneration. Icons sind Vektorgrafiken, die sich automatisch dem vorgegebenem Text anpassen und dabei nicht an Qualität verlieren.

Als Beispiel nehmen wir folgendem Code:
<i class="fas fa-chalkboard-teacher"></i> Icon vor dem Text

So sieht das Ergebnis aus: Icon vor dem Text



Fontawesome Icons finden Sie [ hier ]
W3Schools Icons finden Sie [ hier ]


Buttons und Hintergrundstyle

Beim Layout 2 der Startseite können Sie z. B. den Button für die Zwischenrechnung optisch ganz einfach verändern. Im Administrationsbereich finden Sie unter dem Menüpinkt "Layoutmenü" die Konfiguration "Startseite (Layout 2) Zwischenrechnung- Headerfarbe". Hier geben Sie einfach einen der folgenden css-code ein um ein Button für das Dropdownmenü zu aktivieren.

Fahren Sie mit der Maus über einen der Buttons um das Effekt sehen zu können.

Sie können folgende css-code anwenden:

pls_xl_button
pls_Button_BlWh
pls_Button_GrWh
pls_xl_button
Button Orange-Weiss

pls_Button_BlWh
Button Blau-Weiss

pls_Button_GrWh
Button Grün-Weiss