Ticketsystem
Möchtest du einen Bug melden oder eine Individualisierung anfragen? Nutze dafür einfach mein Ticketsystem.
Anpassungen über die Variablen
Die wichtigste Anlaufstelle für Individualisierungen ist die variable.css (/files/themeless/custom/variables.css).
Vor themore 2.0 noch: variable.scss (/files/themore/assets/scss/custom/variables.scss).
Variablen Anpassen
Möchtest du zum Beispiel Farben oder Schriften anpassen, öffne am besten die variables.css.
Du findest sie im Backend unter Favoriten » variables.css oder unter Inhalte » Dateien » themeless » custom » variables.css.
Dort sind alle vorhandenen Variablen definiert. Die meisten sind sprechend benannt und weitgehend selbsterklärend. Im Akkordeon „Ausführliche Erklärung Variablen“ unterhalb dieses Textes findest du zusätzliche Informationen.
Diese Variablen sind Teilweise in themore 2.0 nicht mehr vorhanden.
Nach Änderungen an einer SCSS-Datei muss der Script-Cache (Systemwartung) geleert oder das Frontend mit Shift + cmd / Strg + R neugeladen werden.
// BASIC SETTINGS
$grid-gap: 30px;
$container-size: 1200px;
$width-tablet: 1000px;
$width-smartphone: 800px;
$transition-duration: .3s;Mit dem grid-gap wird die Grundbreite des Grid-Systems definiert. Diese kann durch den Gap-Factor individuell überschrieben werden. Mit der container-size wird die Breite der Box-Größe von Articeln definiert. Über die CSS-Klasse fullWidth kann ein Artikel auf 100% breite gestreckt weden. width-tablet und width-smartphone definieren die Breakpoints, die z.B. im Grid berücksichtigt werden. Mit der transition-duration wird die Animationsdauer zahlreicher Effekte definiert.
// COLOR
$main-color: #A167FF;
$second-color: black;
$lightgray-color: #f4f4f4;
$gray-color: #ccc;
$darkergray-color: #999;
$font-color: #111;Die Farben, die im Theme an verschiedenen Stellen verwendet werden.
// COLOR » HEADER
$menu-color: #333;
$menu-color-active: $main-color;
$menu-bordercolor: #0003;
$menu-shadow: #0000;
$menu-font-weight: 400;
$mobile-bottom-background: #f4f4f4;
$mobile-menu-color: $menu-color;
$mobile-menu-color-selected: $main-color;
$mobile-menu-background-color: #f4f4f4;
$header-background: #fff;Hauptmenü
Die Schriftfarbe (menu-color) im Menü und Hover- / Aktive-Farbe (menu-color-active). Wenn aktiv kann der Header eine Border (menu-bordercolor) und einen Schatte (menu-shadow) besitzen. Die Schriftdicke wird über menu-font-weight definiert.
Mobile Zeile unten
Hintergrund-Farbe für die Mobile Zeile unten: mobile-bottom-background.
Smartmenü
Die Schriftfarbe (mobile-menu-color) im Menü und Hover- / Aktive-Farbe (mobile-menu-color-active). Die Hintergrundfarbe des ausgeklappten mobilen Menüs ist: mobile-menu-background-color.
// BORDER RADIUS
$border-radius-xs: 5px;
$border-radius-s: 10px;
$border-radius-m: 20px;
$border-radius-l: 30px;
$border-radius-xl: 100%;Die Einstellungen für die Border-Radius-Klassen. border-radius-xl ist für quadratische Bilder gedacht.
// FLOATING BUTTONS
$FB-border-radius: $border-radius-m;
$FB-bg: #000a;
$FB-color:white;
$FB-bg-hover: $main-color;
$FB-color-hover: white;Floating Buttons sind die Kontaktbutton, die sich am rechten Bildschirmrand befinden.
// FONT
$body-font-family: 'Outfit', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';
$body-font-size: 18px;
$body-hyphens: auto;
$h1-size: 3em;
$h1-color: $main-color;
$h2-size: 1.75em;
$h2-color: $font-color;
$h3-size: 1.5em;
$h3-color: $font-color;
$h4-size: 1.25em;
$h4-color: $font-color;
$h5-size: 1.1em;
$h5-color: $font-color;
$h6-size: 1em;
$h6-color: $font-color;
$hl-hyphens: none;Diese Einstellungen sind sowohl für die Überschriften HTML-Tags, als auch für die Klassen .h1, .h2 relevant, die Schriften wie die entsprechenden Überschriften aussehen lassen.
// HEADER
$header-overlapping: false; // true
$header-fixed-top: true; // true
$header-fixed-bottom: false; // false | overwrites $header-fixed-topMöchtets du einen transparten Header einstellen, der auf dem Hintergrund liegt, aktive (true) header-overlapping.
Mit der Einstellung header-fixed-top, kannst du das Menü am oberen Rand fixieren, es folgt beim Scrollen. Ist header-fixed-top aktiv, header-overlapping jedoch nicht, wird ein Pseude-Element erstellt im #wrapper erstellt, damit der Header nicht aufliegt. Dieser wird nachgeladen und sorgt daher für einen "Ruckler".
Der Header kann alternativ mit header-fixed-bottom auch am unteren Bildschrimrand fixiert werden.
// HEADER » LOGO
$logo-width: 150px;
$logo-padding: 20px 0px;
$logo-nav-inline: true; // trueDefiniere die Breite (logo-width) und den Abstand (logo-padding) des Logos.
Deaktivierst du logo-nav-inline, wird das Logo zentriert über dem Menü dargestellt.
// HEADER » NAVIGATION
$nav-last-element-button: true; // true
$nav-centered: false; // false
$nav-max-width: false; // false
$nav-separator: false; // false -> none
$nav-font-size: calc(#{$body-font-size} * .9);Du kannst mittels nav-last-element-button das letzte Element im Menü als Button darstellen lassen.
Über nav-centered wir das Menü zentriert. nav-max-width kann dir helfen das Menü besser darzustellen, wenn es zentriert ist.
Über den nav-separator kannst du Elemente mit einem Zeichen trennen. Trage dazu z.B. $nav-separator: "|" ein.
Die Schriftgröße des Menüs: nav-font-size.
// IMAGES
$image-link-effect: true; // true
$gallery-link-effect: true; // trueDeaktiviere die Hover-Animationen von Bildern, wenn sie einen Link besitzen.
// Vars to use in CSS
:root {
--container-size: #{$container-size};
}Wird benötigt, um SCSS Variablen, in einer CSS-Umgebung verfügbar zu machen.