Projekt umsetzen Anleitung

Fragen bzgl. dem Layout auf dem Google Drive Kundenblatt notieren
Framelayout farbiger Hintergrund - frame-layout-140, frame-layout-150 und frame-layout-160 verwenden da diese bereits vordefiniert sind.
neue Domain erstellen
befor man eine Sitemap erstellt & neu strukturiert sollte man sich bei anderen ähnlichen Websiten inspirieren.
Die Sitemap wird dann in ein seperates Exel dokument kopiert um sie dem Kunden zu zeigen

im Ordner EXT:ig_layout/Resources/Public/Images die Bilder welche zum Gerüst gehören einfügen
im Ordner EXT:ig_layout/Resources/Public/" einen neuen Ordner "Fonts" erstellen und WOFF/WOFF2 Dateien dorthin ablegen
im Ordner EXT:ig_layout/Configuration/TsConfig/Page/default.tsconfigdefault.tsconfig - benötigte frame-layouts umbenennen. Die nicht verwendeten ausblenden mit #
im EXT: ig_layout/Configuration/RTE/rte.yaml können Teaser & spezielle Texte bestimmt werden.
EXT:ig_layout/Resources/Private/Partials -> Files welche bearbeitet werden wie Template.html oder Box.html zur absicherung dublizieren
EXT: ig_layout/Resources/Private/Partials/Header/Box.html - aufräumen & unnötiges löschen
EXT:ig_layout/Resources/Private/Partials/Menu/Skiplinks.html (falls Website nicht geladen werden kann im Seitenquelltext zu finden) - nicht benötigte löschen
EXT:ig_layout/Resources/Private/Templates/Template.html reinigen und nicht benötigtes löschen
EXT:ig_layout/Resources/Private/Partials/FlexHeader.html - falls der Header 100% bis zum Rand haben soll kann man dies dort einstellen (ym-wrapper entfernen)

Bei der Variable $content_max-width sollte man die Paddings im Wert der $base_seitenabstnde(2mal da links und rechts) dazurechnen
config - Burger auch auf Desktop
mehr zum config.scss

Schrift einbinden - EXT:ig_layout/Resources/Public/Css/30_typografie.scss ganz unten
EXT: ig_layout/Resources/Public/Css/10_rte.css - Fallbackschriften wie bspw. Arial, Helvetica hinter der gewünschten Schrift mit Komma trennen
EXT:ig_layout/Resources/Public/Css/30_typografie.scss - Überschriften Schriftgrösse mit scale vorgegeben. Es wird mit der $base_font-size gerechnet.
Um andere Schriftgrössen zu definieren rechnet man mit der Variable- $basefontsize * gewünschte Zahl
Um ungerade Schriftgrössen zu runden benutzt man floor - Bspw. floor($basefontsize * 0.5849340)
EXT:ig_layout/Resources/Public/Css/20_layout.scss - Hintergrundfarben für Body & Header definieren
EXT:ig_layout/Resources/Public/Css/Contentelements/contentelements.scss - Framelayout definieren
- .frame-layout-140 existiert bereits - suchen & anpassen
- .frame-layout-150 & .frame-layout-160 muss erstellt werden. Dazu kopiert man das .frame-layout-140 und es kann angepasst werden.
Standart transiton für den Link hover - transition: color 0.3s ease
Bei einem Button auf einem farbigen Hintergrund kann man beim hover rgba(#ffffff, 80%) nutzen. Dies funktioniert nur im scss
EXT:ig_layout/Resources/Public/Css/Contentelements/contentelements.scss - Accordeontrennlinie Farbe anpassen
Eine neue Link Art definieren
Neue Variable

Scrollheader
- EXT:ig_layout/Resources/Public/Css/20_layout.scss - .templateHeader - position: fixed
- TYPO3 Backend - TypoScript - Konstanteneditor - ig.config.template.responsive (6) - autohide Hacken setzen
- EXT:ig_layout/Resources/Public/JavaScript/main.js - JavaScript code von wiki einfügen
TYPO3 Backend - TypoScript - Websites - Konstanten-Editor - ig.config.template.logo (12)
- Logo Pfad einfügen
- Printlogo ebenfalls einfügen
- Bei den nicht genutzten Sprachen entfernen
- alt Text einfügen
TYPO3 Backend - Sites - Sprachen - bearbeiten - nicht verwendete Sprachen - sichtbar im Frontend ausschalten
Wenn man einem Element die $content_max-width ohne den $base_seitenabstand geben will macht man dies so - max-width: calc(#{$content_max-width} - #{$base_seitenabstand * 2});
Man kann klassen wie ig-padding-top-k (kleiner Abstand) im html einfügen oder entfernen wenn man es benötigt
Die Burgergrösse kann man im config.scss bestimmen und mit den Klassen .burgerHolder und .burger im scss ansprechen
Sucher icon
- EXT:ig_layout/Resources/Private/Partials/Header/BoxResponsive.html - search container div erstellen und das Bild einfügen (<f:image src="EXT:ig_layout/Resources/Public/Images/iconset/base/loupe_header.svg"/>)
- EXT:ig_layout/Resources/Public/Css/Extensions/search.scss - ganz oben search definieren und direkt bei Variabeln ab 600px und ab 400px ebenfalls definieren ($base_seitenabstand_400)

EXT:ig_layout/Resources/Public/Css/config.scss Farben von Schrift & Burger definieren
mehrere Spalten
- Möglichkeit 1: TYPO3 Backend - Seite bearbeiten - Menu - Menu Layout - gewünschte Spalten anwählen. Die Spalten verlaufen von oben nach unten.
- Möglichkeit 2: #menu_main>ul>li bspw. 25% geben - #menu_main ul display: flex: & flex-wrap: wrap; geben. Hierbei verlaufen die Spalten von links nach rechts.
Die verschiedenen Levels definieren.
Mit Media Queries direkt responsive definieren
Übergang - öffnung Burgermenu

Im TYPO3 kann man in der Seite FooterData den Inhalt des Footers definieren.
- Vordefiniertes Spaltenelement mit Id welche mit Footer verbunden ist

fullscreensucher
immer direkt das responsive bei 600 & 400 machen - padding-right: $base_seitenabstand_400/2

TYPO3 - Backend-Benutzer - Redaktor bearbeiten - neu
Kundenbenutzer entsprechend benennen & Passwort generieren lassen
Zugansdatenblatt: KEA: internetgalerie\040_schulung\Zugangsdaten
- neuer Ordner erstellen bei neuem Projekt
- Bereits existierendes Zugansdatenblatt kopieren & anpassen/ergänzen
Man kann verschieden Gruppen zuweisen, diese bestimmen die Berechtigung & Zugriff (bspw. News)
Sprache: Deutsch
Kunden Name & Email angeben falls vorhanden
Im Kundenbenutzer neues Dashboard erstellen & altes löschen