Arbeiten mit SOLO
Eigene Anpassungen
KEIN TINYMCE-Editor:
/assets/tinymce4/js/tinymce.gzip.js - fehlt in einer neuen Contao 4.6-Installation
Link im grünen Teil von tinymce.gzip.js auf tinymce.min.js geändert
Welche Schrift wird wo definiert?
HTML
- Hintergrund:
background-color: $color-page-background;=>_variables.scss - Schriftfarbe:
color: $color-text;=>_variables.scss
[id="header”] - _layout.scss
Farbdefinitionen gelten für Menüpunkte - die Farbe der aktiven Menüpunkte wird in der _navs.scss definiert.
// VARIABLES
$header-color-background: transparent;
$header-color-background--inverted: $color-band-dark-background !default;
$header-color-background--inverted-gradient: $color-band-dark-background-gradient !default;
$header-color-text--invert: #fff;
$header-height: 6rem;
// USED FROM _layout.scss (nutshell)
// * $header-color-text [$color-text]
[id="header"] {
background: $header-color-background;
color: $header-color-text;
}
.header--invert & {
color: $header-color-text--invert;
}
.header--background & {
background: $header-color-background--inverted;
background: $header-color-background--inverted-gradient;
}
}
1. Seitenlayout Hero: Startseite - body-Klasse: header–invert
SOLO: Dunkles Hintergrundfoto und transparenter Header, weiße Menüpunkte, aktive Menüpunkte türkis
2. Seitenlayout default: Unterseiten - body-Klassen: header–relative header–invert header–background
SOLO: Dunkler Header, weiße Menüpunkte, aktive Menüpunkte türkis
3. h1 - h6
- h1, h2, h3, h4, h5, h6:
font-family, font-weight: _variables.scss - h1, h2, h3, h4, h5, h6:
margin-top: nutshell/_shared.scss .heading--1.ce_headline,.heading--1: font-size mit Media queries in der _type.scss- Klasse
.heading--1,.heading--2, … vergibt Schriftgröße von h1, h2, … - egal für welche Überschrift
4. Navigation _navs.scss
- aktiver Menüpunkt:
$color-navigation-main--active: $color-brand; a { color: inherit; &:hover { color: $color-brand; } }- Schriftart:
$nav--main-font: $base-font-family-sans-serif; - Schriftstärke:
$nav--main-font-weight: 700;
5. zu den Media-Queries:
html {
@include media-query(screen-lg, screen-lg-max) {
font-size: $base-font-size--lg;
}
}
Breakpoints überschreiben:
$additional_breakpoints: {
offcanvas: {
min: 48em, // 768px
max: (48em - 0,0625em) // 767px
}
}
Neues Projekt in SOLO auf Laragon anlegen
Diese Anleitung ist veraltet - es geht darum, in der SOLO-Installation ein weiteres Projekt anzulegen (neben ArteLaVista, Notizenausderprovinz, Kiddydoc, Connect)