Versions Compared

Version Old Version 5 New Version Current
Changes made by

ls

ls

Saved on

Key

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




Die farbig markierten Bereiche können für farbliche Anpassungen verändert werden:








Auswirkung /
* Layout A
Änderung


Standart ohne HintergrundbildHintergrundbild wurde geladen laden
Standart ohne LogoLogo wurde als png Datei geladen

Farbeinstellungen deckende Farben als Hexadezimalwert:

z.B. #454545

Farbeinstellung Farbe mit tranzparenzen als rgba Wert:

z.B: rgba(78, 78, 78, 0.75)

(RGB Wert plus Deckkraft)

/* Layout B */

/* Logo + Hintergrundfarbe */

.kiosk-layout-B .main-brand .main-logo {

    background-image: url([{img_logo}]);

    background-color:

#FFF

transparent;

}

Hintergrundfarbe Logo

/*

Hintergrundfarbe Menueblock

Hintergrund Anwendung */

.

masonry

kiosk-

stamp-navi {

    background-color: #3b529c !important;

}

/* Text erste Ebene */

layout-B .main-

navi a

page {

  

 font

 background-

size: 22px

image: url([{img_main}]);

  

 font

 background-

family: "Open Sans", Arial, Helvetica, sans-serif;

    color: #FFF;

    border-bottom: 1px solid #9ca0ca;

}

/* Hintergrundfarbe 1. Ebene */

.    border-bottom: 1px solid

color: transparent;

}

Die Hintergrundfarbe der gesammte Kiosk Darstellung wenn kein Hintergrundbild geladen ist.

/* Menuelement */

.kiosk-layout-B .main-navi li a {

    background-color:

transparent;.

transparent;

}

/* Text erste Ebene, aktiv */

.main-navi a.current {

    font-size: 22px;

    font-family: "Open Sans", Arial, Helvetica, sans-serif;

    color: #3b529c;

}

/* Hintergrundfarbe 1. Ebene, aktiv */

Hintergrundfarbe oberer Menupunktreihe (gefüllte Fläche mit Farbwert zb: Hexadezimalfarbwert #454545 füllen.

.kiosk-layout-B .main-navi li.current a {

  

 background-color: #FFF.

 outline: 4px solid #4e4e4e;

}

/* Text weitere Ebenen */

Rahmenfarbe für aktives Menu in der oberen Menüreihe

.kiosk-layout-B .main-navi

li

li a span.description {

  

 font

 text-

size

align:

18px

left;

  

 font

 background-

family: "Open Sans", Arial, Helvetica, sans-serif

color: rgba(78, 78, 78, 0.75);

    color:

#eee    background-

#FFF;

}

/* Hintergrundfarbe weitere Ebenen */

.main-navi li li {

    background-color: #9ca0ca;

}

/* Text weitere Ebenen, aktiv */

.main-navi li li a.current {

    font-size: 18px;

    font-family: "Open Sans", Arial, Helvetica, sans-serif;

    color: #d7000d;

}

/* Hintergrundfarbe weitere Ebenen, aktiv */

.main-navi li li.current {

    background-color: #FFF;

}

/* Hintergrund Anwendung */

.main-page {

    background-image: url([{img_main}]);

    background-color: transparent;

}

/* Hintergrund zwischenraum */

.masonry-gutter-top, .masonry-gutter-right, .masonry-gutter-bottom,

.masonry-gutter-left {

    background-image: none;

Ausrichtung Text obere Menureihe

Hintergrundfarbe Balken der Inhalte obere Menüreihe

(Hexadezimalwert oder wie im Beispiel rgba Wert wegen möglicher transparenzen)

Schriftfarbe im Balken der Inhalte



/* Breadcrumb */

.kiosk-layout-B .breadcrumb {

    border-bottom: 1px solid #c9c9c9;

}

Linie unter der Breadcrumb

.kiosk-layout-B .breadcrumb a {

    color: #595959;

}

Schriftfarbe Text in der Breadcrumb

.kiosk-layout-B .breadcrumb a.active {

    color: #E30614;

}

Schriftfarbe Text in der Breadcrumb aktiver Menüpunkt

/* Objektbox */

.kiosk-layout-B .masonry-item-inner .item-content, .kiosk-layout-B .masonry-stamp-inner .item-content {

    background-color: transparent;

}

/* Hintergrundfarbe + Textformatierung Headlinebalken Elemente */

Hintergrundfarbe Hauptmenupunkte Startseite



.kiosk-layout-B .masonry-item-inner .main-headline {

    background-color:

#3b529c

#E30614;

  

 font-size

 color:

20px

#FFF;

  

 font

 text-

family: "Open Sans", Arial, Helvetica, sans-serif;

    color: #fFFF;

}

/* Textformatierung main-teaser */

.item-expanded .main-teaser {

    font-

align: left;

    font-size: 16px;

  

 font

padding-

family: "Open Sans", Arial, Helvetica, sans-serif

top: 8px;

  

 color

height:

#000

40px;

}

.masonry-stamp-brand.masonry-stamp {

    background-color: transparent;

}

.masonry-stamp-brand .masonry-gutter-top, .masonry-stamp-brand .masonry-gutter-bottom,

.masonry-stamp-brand .masonry-gutter-left, .masonry-stamp-brand .masonry-gutter-right

{

    background-color: transparent;

}

.masonry-stamp-brand .masonry-stamp-inner {

    border-color: transparent;

    background-color: transparent;

}

.masonry-stamp-brand .main-brand {

    background-color: transparent !important;

}

.masonry-stamp-brand .main-brand .main-logo {

    background-color: transparent;

}

.main-navi a.current, .main-navi a.active {

    text-transform: none !important;

}

Hintergrundfarbe Balken der Inhalte

Schriftfarbe im Balken der Inhalte

Ausrichtung Text


Schriftgröße: optional hinzufügbar (Kiosk)

Ausrichtung der Schrift anpassen (Kiosk)

Höhe der Box anpassen (kiosk)

}

/* Unterkategorie */

.kiosk-layout-B .masonry-item.category-item, .kiosk-layout-B .masonry-item.category-item .masonry-item-inner {

                border: 6px solid #E30614;

}


Stärke und Rahmenfarbe der Untermenupunkte

.mysignage-webtool-kiosk.kiosk-layout-B .open-iframe-link {

        color: #2f52a0;

        margin: 10px 0;

        display: block;

}

optional hinzufügbar (Abstand Seitlich für Webtool herausnehmen)

.mysignage-webtool-kiosk.kiosk-layout-B .masonry-item-inner .main-headline {

        font-size: 16px;        

        padding-top: 8px;

        height: 40px;

}

optional hinzufügbar

Schriftgröße: optional hinzufügbar (Webtool)

Ausrichtung der Schrift anpassen (Webtool)

Höhe der Box anpassen (Webtool)