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 |
Nachrichten Klassen (Nachrichteneinträge)
| big |
Nachricht wird in großer Schriftgröße dargestellt (nur für News v6) |
| tall |
Doppelte Höhe des Nachrichteneintrags |
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 |
