Mainmenu: Helper Klassen

float_left Menüpunkt links darstellen (Theme Designer: Header Modern v1)
float_right Menüpunkt rechts darstellen (Theme Designer: Header Modern v1)
menuheader Deaktiviert den Link und hebt den Punkt hervor
nav-only-desktop Menüpunkte nur in der Desktop/Tablet-Version anzeigen
nav-only-mobile Menüpunkte nur in der Mobile-Version anzeigen
avoid-click Deaktiviert den Link
open-left Öffnet das Untermenü nach links
click_open Öffnet das Untermenü per Klick, anstatt hover
click-default Mobilemenu: interne Weiterleitungen bleiben damit gezielt klickbar

* Die only_mobile Klasse ist nützlich, wenn Sie Navigationspunkte nur in der mobilen Version darstellen möchten. Zum Beipspiel bei den Navigationsmodulen 1 Themesetting: Top: Meta-Navi oder 1 Themesetting: Header: Meta-Navi. Diese sollen nicht in der Desktop Ansicht im Hauptnavigation erscheinen, jedoch in der mobilen Navigation. Vergeben Sie die CSS-Klasse only_mobile in den jeweiligen Seiteneinstellungen im Feld CSS-Klasse.

Mainmenu: Highlight Klassen (Accent-Color)

highlight oder highlight-square-color-accent Hintergrund: Akzentfarbe - eckige Darstellung
highlight-rounded-color-accent Hintergrund: Akzentfarbe - abgerundete Darstellung
highlight-outline-square-color-accent Outline: Akzentfarbe - eckige Darstellung
highlight-outline-rounded-color-accent Outline: Akzentfarbe - abgerundete Darstellung

Mainmenu: Highlight Klassen (Second-Color)

highlight-square-color-second Hintergrund: Second-Color - eckige Darstellung
highlight-rounded-color-second Hintergrund: Second-Color - abgerundete Darstellung
highlight-outline-square-color-second Outline: Second-Color - eckige Darstellung
highlight-outline-rounded-color-second Outline: Second-Color - abgerundete Darstellung

Revolution Slider: Hyperlink

color-second Hintergrundfarbe: Second-Color aus dem ThemeDesigner
light heller Hintergrund
dark dunkler Hintergrund
outline heller Rahmen
outline-dark dunkler Rahmen
text-link einfacher Textlink
border-radius-3 Border Radius 3px
border-radius-5 Border Radius 5px
border-radius-10 Border Radius 10px
border-radius-50 Border Radius 50px
border-radius-100 Border Radius 100px

Revolution Slider: Text Element

bg-accent Hintergrundfarbe: Akenztfarbe
bg-white Hintergrundfarbe: Weiß
color-accent Textfarbe: Akenztfarbe
font-serif-2 Serif-Font: "Playfair Display" [in styles.css definiert]
text-shadow-10 Text-Schatten | rgba(0,0,0, 0.1)
text-shadow-20 Text-Schatten | rgba(0,0,0, 0.2)
text-shadow-30 Text-Schatten | rgba(0,0,0, 0.3)
text-shadow-40 Text-Schatten | rgba(0,0,0, 0.4)
text-shadow-50 Text-Schatten | rgba(0,0,0, 0.5)
text-shadow-60 Text-Schatten | rgba(0,0,0, 0.6)
text-shadow-70 Text-Schatten | rgba(0,0,0, 0.7)
text-shadow-80 Text-Schatten | rgba(0,0,0, 0.8)
text-shadow-90 Text-Schatten | rgba(0,0,0, 0.9)
text-shadow-100 Text-Schatten | rgba(0,0,0,1)

Border

bt-dark border-top | dunkel | solid
bb-dark border-bottom | dunkel | solid
bt-light border-top | hell | solid
bb-light border-bottom | hell | solid
bt-dark-dashed border-top | dunkel | strichliert
bb-dark-dashed border-bottom | dunkel | strichliert
bt-light-dashed border-top | hell | strichliert
bb-light-dashed border-bottom | hell | strichliert
bt-dark-dotted border-top | dunkel | gepunktet)
bb-dark-dotted border-bottom | dunkel | gepunktet
bt-light-dotted border-top | hell | gepunktet
bb-light-dotted border-bottom | hell | gepunktet

Div. Helper Klassen

overflow-hidden CSS Eigenschaft overflow: hidden
z_index10, z_index20 ... bis z_index100 CSS Eigenschaft z-index
shadow_style1 CSS Eigenschaft shadow - Stil1
(für Artikel nützlich)
shadow_style2 CSS Eigenschaft shadow - Stil2
(für Artikel nützlich)
has-parallax Aktiviert Parallax
parallax-speed-1 bis parallax-speed-10 Parallax Geschwindigkeit
to_top Onepage Seiten speichern die letzt genutzte Scrollposition. Man kann die Seite zwingen immer oben zu starten. In den Seiteneinstellungen die CSS-Klasse "to_top" vergeben.

Opt-In Klassen

hide_optin Opt-In Banner ausblenden. Nützlich für Datenschutzseite und Impressumsseite. (Kann auf body angewendet werden. Seiteneigenschaften: CSS-Klasse Feld)

Device Visibility Helper

hide-mobile auf Smartphone ausblenden
hide-desktop auf Desktop ausblenden
only-mobile nur auf dem Smartphone anzeigen
only-desktop nur auf dem Desktop anzeigen

Ab Eclipse X4 stehen für die Sichtbarkeit je Endgerät eigene Select-Felder für alle Inhaltselemente und Module zur Verfügung.

Font Klassen: Ausrichtung

align-left linksbündig
align-center zentriert
align-right rechtsbündig

Font Klassen: Letter-Spacing

letter-spacing-xxl 10px
letter-spacing-xl 5px
letter-spacing-l 3px
letter-spacing-m 2px
letter-spacing-s 1px

Font Klassen: Helper

line-through Durchgestrichen
uppercase Großbuchstaben
lowercase Kleinbuchstaben

Font Klassen: Farben

color-accent Schriftfarbe: Akzentfarbe
color-white Schriftfarbe: Weiß
color-gray Schriftfarbe: Grau
color-lightgray Schriftfarbe: Hellgrau

Font Klassen: Font-Size

font-size-xxxxxl 6.667rem
font-size-xxxxl 5.667rem
font-size-xxxl 5rem
font-size-xxl 4.333rem
font-size-xl 3.667rem
font-size-l 3rem
font-size-m 2.333rem
font-size-s 1.667rem
font-size-xs 1.467rem
font-size-xxs 1.2rem
font-size-xxxs 0.9333rem
font-size-xxxxs 0.8rem
font-size-xxxxxs 0.6667rem

Bilder Klassen

fullwidth-image Streckt das Bild immer auf width: 100%
no-responsive Deaktiviert die responsive Darstellung

Portfolio Klassen (Nachrichteneinträge)

wide Doppelte Breite des Portfolioeintrags
tall Doppelte Höhe des Portfolioeintrags

Klassen nur für Portfolio Version 5 und 6

Portfolio (Modul Portfolioliste)

pagination-white Die Pagination wird weiß dargestellt
hide-subline Versteckt die Unterüberschrift
hide-linkbar
(für Modul Portfolioliste v1, v2, v8)
versteckt die Buttons Detailansicht und Lightbox
hide-zoom
(für Modul Portfolioliste v1, v2, v8)
versteckt den Button für die Lightbox
height-m
(für Modul Portfolioliste v5)
Definiert die Höhe der Portfolioeinträge auf Medium
height-l
(für Modul Portfolioliste v5)
Definiert die Höhe der Portfolioeinträge auf Large
margins Portfolioeinträge werden mit Abständen zueinander dargestellt

Formular Klassen

no-border Fieldset ohne Rahmen
style1 Stil 1
style2 Stil 2
style3 Stil 3
style4 Stil 4
style5 Stil 5
style6 Stil 6
style7 Stil 7
style8 Stil 8

Eine Vorschau der Darstellungen ist in der Default-Demo zu sehen.

CSS Animationen

bounce animate bounceInDown animate
bounceInLeft animate bounceInRight animate
bounceInUp animate bounceOut animate
bounceOutLeft animate bounceOutRight animate
fadeIn animate fadeInDown animate
fadeInDownBig animate fadeInLeft animate
fadeInLeftBig animate fadeInRight animate
fadeInRightBig animate fadeInUp animate
fadeInUpBig animate flip animate
flipInX animate flipInY animate

Vergeben Sie einem Inhaltselement eine der CSS-Klassen:
Artikel > Artikel bearbeiten > Inhaltselement bearbeiten > Experten-Einstellungen > bounce animate

Negativ Margin Klassen

mt-xxl-neg margin-top: -300px
mt-xl-neg margin-top: -140px
mt-l-neg margin-top: -110px
mt-s-neg margin-top: -50px