Umsetzung Basics

Basics

erstes Element Abstand entfernen

Beim ersten Element wird das margin-top entfernt um den Abstand zu entfernen. Die responsiven Einstellungen können ebenfalls innerhalb des selben Codes definiert werden.

.mainColumn {
> *:first-child {

&.frame-layout-150,
&.frame-layout-140,
&.frame-layout-160,
&.frame-layout-120 {

&.frame-3 {
margin-top: -$base_verticalelementabstand;

@media screen and (max-width: 600px) {
margin-top: -$base_verticalelementabstand_600;
}

@media screen and (max-width: 480px) {
margin-top: -$base_verticalelementabstand_400;
}
}
}
}
}

News

Eigener News Ordner einbinden:

  1. Im VSC im Ordner neuste_vorlage/typo3/ext/igconfig/Resources/Private/Extensions/news/ - den News-Ordner kopieren
  2. Im EXT:ig_layout/Resources/Private/Extensions - einen Ordner "News" einfügen.
  3. Im Backend - TypoScript - Websites - Konstanten Editor - plugin.tx_news den Pfad anpassen (EXT: ig_layout/Resources/Private/Extensions/news/Partials)

Es wird im EXT:ig_layout/Resources/Private/Extensions/news/Partials/List/Item-.html oder im /Detail/Item.html gearbeitet - Kopien zur Absicherung erstellen.
Man kann Klassen wie "link-button" anfügen oder klassen wie has-image entfernen (dazukann man anstat löschen einfach bswp. has-imagge schreiben)

Im Backend:

  1. In den Vorlagedaten gibt es vorbereitete Seiten (siehe Bild)
  2. Liste - Daten/News Ordner - News erstellen etc.
  3. Liste - Daten/Kategorien - Kategorien erstellen

Auf der Newsseite kann man bei Plug-In die Kategorien anwählen / bestimmen wann welche Kategorie erscheinen soll und wann nicht. Bei den erweiterten Einstellungen kann man auch die Anzahl der anzuzeigenen Datenstäzten bestimmen.

Newsseiten im Backend
Kategorien anwählen

Bildmarke im Scrollheader

Um beim Scrollheader vom Logo zu Bildmarke zu wechseln muss man im Logo.html die Bildmarke hinzufügen mit der Klasse "ScrollLogo". Beim standart Logo wird die Klasse "noScrollLogo" angefügt. Danach muss man den wechsel im css gestalten.

Logo.html:
<div class="logo ym-gl">

    <f:link.page pageUid="{rootPageId}">

        <img src="{f:uri.image(src: logoSrc)}"class="ig-noPrint noScrollLogo"alt="{logoAltText}"title="{logoAltText}"/>

        <img src="{f:uri.image(src: logoPrintSrc)}"class="print"alt="{logoAltText}"title="{logoAltText}"/>

        <img src="{f:uri.image(src: 'EXT:ig_layout/Resources/Public/Images/scrollheader.svg')}"class="ig-noPrint ScrollLogo"alt="{logoAltText}"title="{logoAltText}"/>

    </f:link.page>

</div>

20_layout.scss:

.templateHeader {
background-color: #fff;

&.scrollHeader {
&:after {
content: "";
}

header {
box-shadow: 0 16px 20px 0 rgba(17, 17, 17, 0.04);

.header-box {
padding-top: $base_seitenabstand/2;
padding-bottom: $base_seitenabstand/2;
}
}

.header-box .logo,
.header-box-responsive .logo {
position: relative;

 .noScrollLogo {
opacity: 0;
width: 0%;
}

.ScrollLogo {
opacity: 1;
max-width: 100px;
width: 100%;
top: 50%;
transform: translateY(-50%);
}

}

}

}

 

letztes Element Abstand entfernen

Um den Abstand des letzten Elementes einer Seite zu entfernen kann man dem gewünschten Element im TYPO3  "abstand danach: keiner" anwählen. Danach kann man im css diese klasse ansprechen und den Abstand entfernen.

#contentColumns .mainColumn {
> * {

&:last-child {


&.frame-space-after-none {
margin-bottom: -$base_verticalelementabstand * 3;

&.frame-layout-150,
&.frame-layout-140,
&.frame-layout-120,
&.frame-layout-160,
&.frame-layout-0 {
padding-bottom: $base_verticalelementabstand * 3.5;
}

}

}

}

}

Link-Pfeil

anstelle eines background-images für den Link-Pfeil kann man ein after mit → in der Schriftart "Urbanist" erstellen, somit kann man einfach die Farben und Grössen fürs hover definieren.

.link-pfeil {
font-weight: 400;
background: none;

&:after {
content: "→";
font-family: "Urbanist", Arial, Helvetica, sans-serif;
font-weight: 300;
color: #a47cb4;
font-size: $base_font-size * 1.1;
padding-left: 6px;
display: inline-block;
position: absolute;
transform: translateY(2px);
transition: padding-left 0.3s ease, color 0.3s ease;
text-decoration: none;
}

Link underline Animation

Anstelle von text-decoration: underline; kann man eine viel schönere underline hover Animation erzeugen. Beim Redesign der LD habe ich es so umgesetzt:

/*Link-underline*/

a {
text-decoration: none;
background: linear-gradient(#a1af8f, #a1af8f) left bottom no-repeat; // selbe Farbe wie bei a:hover
background-size: 0 1px;
transition: background-size 0.3s ease-in-out;

&:hover {
background-size: 100% 1px;
}

&:focus {
background-size: 100% 1px;
outline: none;
}

&:not(:hover) {
background: linear-gradient(#a47cb4, #a47cb4) left bottom no-repeat; // selbe Farbe wie bei a
background-size: 0 1px;
}

}

RTE Editor erweitern

kea.internetgalerie.ch/dokuwiki

Cookie Banner

  • im print ausblenden
  • TYPO3 Backend - Konstanteneditor - 400ig.cookies - darke/ light mode
  • Variabeln für Farben anpassen

Titeltag

  • TYPO3 Backend
  • Sites bearbeiten
  • Titel der Website - Firma AG

favicon Web 12

VSC - Projekt öffnen - public Ordner - favicon.ico dort hinein
/var/www/beta-version/gymnasium/public/favicon.ico

Print

  • 50_print.scss - Dinge die ausgeblendet werden sollen anfügen
  • Print Logo im Backend einfügen (Farbe beachten)
  • grosse Abstände minimieren
  • Footer Links braucht es nicht - meist nur Kontaktspalte
  • unnötige Bilder entfernen
  • Schriftfarbe anpassen

Kontaktformular

  • TYPO3 Backend - Formulare - Basisformular duplizieren & neu benennen & dementsprechend anpassen
  • unnötige Gridcontainer entfernen
  • Betreff: Domain + Formularart
  • config.scss - $base_formfields_bg - Formularfelder Farbe anpassen
  • reCAPTCHA Key bei Myriam anfragen
  • Use invisible recaptcha anwählen!

Backend-Login

  1. TYPO3 Backend
  2. Einstellungen
  3. Configure extentions
  4. backend
  5. save
Neue Font Variable
  • Im  EXT:ig_layout/Resources/Public/Css/30_typography.scss bei @mixin font-sizes eine neue Variable schreiben
  • Beispiel: $scale_fullscreenSearch: 2.273
  • ein bereits erstelltes Paket kopieren und anpassen: 

        .fullscreenSearch h2 {

            font-size: floor(

                    ($base_font-size * $scale_fullscreenSearch * $scale_font-size) *

                        $precision

                ) / $precision;

        }

  • somit wird die Schriftgrösse skaliert

Link Pfeil

  • Im EXT:ig_layout/Configuration/TsConfig/Page/default.tsconfig ganz unten bei den buttons "link-pfeil" hinzugügen
  • .link-pfeil im 30_typografie definieren
    • Mit background-image oder after

Burger öffnen - Animation

//responsiveNavHolder animation
.responsiveNavHolder{
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.0s 0.3s ease;
    .responsiveNavOpen &{
        opacity: 1;
        transition: opacity 0.3s ease;
    }
}

Burger auf Desktop

  • config - $useResponsiveMenuOnDesktop: true;
  • TYPO3 - typoscript - websites - Konstanten Editor - Kategorie: ig.config.menuresponsive - burger anzeigen - both
  • layout.scss - headerboxresponsive - dispplay:none auskommentieren

Font einbinden

  1. font bei google fonts herunterladen
  2. extrahieren
  3. bei https://transfonter.org/ einfügen -> add fonts blauer Button
  4. WOFF & WOFF2 aktiviert
  5. convert klicken
  6. herunterladen
  7. extrahieren
  8. In fonts im VSC einfügen
  9. css öffnen & code kopieren
  10. In typography.scss ganz unten einfügen
  11. Pfad aus fonts Ordner kopieren und bei src: eifügen
  12. font-weight: normal mit 400 ersetzen
  13. auf anderem Gerät austesten

active js

css

.herz {

            background-image: url(EXT:ig_layout/Resources/Public/Images/iconset/special/herz.svg);

            background-repeat: no-repeat;

            background-position: center;

            width: 40px;

            height: 40px;

            display: inline-block;

            background-size: 30px;

            position: absolute;

            bottom: 30px;

            right: 30px;

            cursor: pointer;

            transform: scale(1);

            transition: background-image 0.3s ease-out;

            &:after {

                content: "";

                background-image: url(EXT:ig_layout/Resources/Public/Images/iconset/special/favoriten_rot.svg);

                background-repeat: no-repeat;

                background-size: 30px;

                background-position: center;

                position: absolute;

                height: 100%;

                width: 100%;

                left: 0;

                right: 0;

                bottom: -2px;

                top: 1px;

                opacity: 0;

                transform: scale(0.5);

                @include transition(transform 0.3s ease, opacity 0.3s ease);

            }

 

            &.active {

                background-image: none;

                &:after {

                    opacity: 1;

                    transform: scale(1);

                }

js

window.addEventListener("load", (event) => {

  // Alle Elemente mit der Klasse .ce-column auswählen

  const ceColumns = document.querySelectorAll(".ce-column");

 

  // Durch jede .ce-column-Schleife gehen

  ceColumns.forEach((ceColumn) => {

    // Ein neues <div>-Element erstellen

    const herzDiv = document.createElement("div");

 

    // Der neuen <div>-Element die Klasse .herz hinzufügen

    herzDiv.classList.add("herz");

 

    // Das neue <div>-Element der .ce-column-Schwester als nächsten Geschwisterknoten hinzufügen

    ceColumn.parentNode.insertBefore(herzDiv, ceColumn.nextSibling);

  });

});

 

// Deine Funktion, die um eine Sekunde verzögert werden soll

function meineVerzoegerteFunktion() {

  $(".herz").click(function () {

    $(this).toggleClass("active");

  });

}

 

// Verzögere die Ausführung der Funktion um eine Sekunde

setTimeout(meineVerzoegerteFunktion, 1000); // 1000 Millisekunden = 1 Sekunde

 

Full Screen Sucher & Suchericon

  • Aus EXT:ig_layout/Resources/Private/Partials/Header/Burger.html das div mit der Klasse ig-togglehandler etc. kopieren
  • In EXT:ig_layout/Resources/Private/Partials/Header/BoxResponsive.html oder im Box.html einfügen und passend benennen
  • Darum eine div "burger-search-container" erstellen
  • den bearbeiteten ig-togglehandler ins EXT:ig_layout/Resources/Private/Templates/Template.html einfügen
  • Darum ein div "fullscreenSearch" erstellen
  • Im TYPO3 im FooterData die ID suchen und einfügen: <ig:content uid="ID" />
  • Im EXT:ig_layout/Resources/Public/Css/Extensions/search.scss die Suche gestalten (siehe Code)

Code

Template.html:

    <!-- fullscreensearch -->

    <div class="fullscreenSearch fullscreenContainer">

        <ig:content uid="29" />

        <div

            class="closeFullscreenSearch ig-togglehandler"

            data-toggleclass="searchOpen"

            data-togglefalseclass="searchClose"

            data-toggleattribute=".closeFullscreenSearch|aria-expanded=true"

            data-togglefalseattribute=".closeFullscreenSearch|aria-expanded=false"

            aria-expanded="false"

        >

            <f:image

                src="EXT:ig_layout/Resources/Public/Images/iconset/controls/close_white.svg"

            />

        </div>

    </div>

BoxResponsive.html:

            <div class="burger-search-container">

                <div

                    class="searchCall ig-togglehandler"

                    data-toggleclass="searchOpen"

                    data-togglefalseclass="searchClose"

                    data-toggleattribute=".searchCall|aria-expanded=true"

                    data-togglefalseattribute=".searchCall|aria-expanded=false"

                    aria-expanded="false"

                >

                    <f:image

                        src="EXT:ig_layout/Resources/Public/Images/iconset/base/loupe_header.svg"

                    />

                </div>

 

search.scss{

/*Search Call*/

 

.fullscreenSearch {

    position: fixed;

    width: 100%;

    height: 100%;

    bottom: 0;

    top: 0;

    background-color: #222222;

    z-index: 102;

    left: 100%;

    display: flex;

    align-items: center;

    opacity: 0;

    transition: opacity 0.3s ease, left 0s 0.3s ease;

    .frame {

        width: 100%;

    }

 

    .csc-header-layout2 {

        display: block;

        padding-bottom: $base_verticalelementabstand/3 * 2;

    }

 

    .tx-indexedsearch-form input[type="submit"] {

        padding: 7px;

    }

}

.searchOpen .fullscreenSearch {

    left: 0;

    opacity: 1;

    transition: opacity 0.3s ease;

}

.csc-header-layout2 {

    display: none;

}

.closeFullscreenSearch {

    position: absolute;

    width: 22px;

    top: $base_seitenabstand;

    right: $base_seitenabstand;

    img {

        width: 100%;

        pointer-events: none;

    }

}

 

.searchCall {

    max-width: 30px;

    width: 100%;

    padding-right: $base_seitenabstand/2;

 

    img {

        display: block;

        width: 100%;

        pointer-events: none;

    }

}

Im responsive header etwas hinzufügen

  1. Im Box Teil kopieren der in responsive header sein soll (und nicht in der Nav Open)
  2. Im BoxResponsive.html einkopieren
  3. Speichern

Slider auf bestimmten Seiten entfernen

  1. Liste - Weltkugel - runter scrollen - Backend-Layout
  2. eines auswählen und bearbeiten
  3. mit den Backend-Layouts kann man vieles machen und bestimmen, für das Slider Problem jedoch muss man mit dem Minus oder Pfeil alles aussert eins entfernen
  4. Umbenennen -> Spaltenposition 0 (für andere Nutzungen andere Nummer)
  5. Speichern
  6. Im 20_layout.scss nach "pageLayout-3" suchen und die Weite auf 100% umstellen
  7. Im Template "<f:if condition="{pageLayout} != 3">" im pageImageSlider ganz oben einfügen
    Dies bedeutet: wenn es das pageLayout 3 ist solld er Slider angezeigt werden
  8. Backend - seite bearbeiten - Erscheinungsbild - Backendlayout -  erstelltes Layout anwählen

plugin.igconfig.debug = 1 auf 0 gesetzt

TypoScript - datensatz bearbeiten - Websites - Konstanten - auf 0 setzen

Menu horizontal ausrichten

  1. rechts Klick auf die Seite -> bearbeiten
  2. Auf Menu gehen
  3. bei Menu Layout auf die ensprechende Spaltenanzahl gehen
  4. Template - Konstanten Editor - IGCONFIG-RESPONSIVE - Desktop Menü Rendering - dnMaxLayer

zweites Logo wenn HeaderPlaceHolder schon besetzt ist

  1. <ig:content uid="{settings.footerInhaltUID}" /> im template unten im footer kopieren
  2. Im Backend im Header Data ein neues Text&Medien erstellen
  3. Logo einfügen
  4. id suchen
  5. {settings.footerInhaltUID} mit id ersetzen -> <ig:content uid="2010" />
  6. im box im Logo container einfügen

Seitenverhältniss hinzufügen

  1.  /typo3conf/ext/ig_layout/Configuration/TCA/Overrides/ öffnen
  2. neues file erstellen -> sys_file_reference.php
  3. Code einfügen
  4. Abschnitt kopieren und werte anpassen
Code

<?php
defined('TYPO3') or die();

$GLOBALS['TCA']['sys_file_reference']['columns']['crop']['config']['cropVariants']['default'] = [
        'title' => 'LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.crop_variant.default',
        'allowedAspectRatios' => [
            '16:9' => [
                'title' => 'LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.ratio.16_9',
                'value' => 16 / 9
            ],
            '3:2' => [
                'title' => 'LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.ratio.3_2',
                'value' => 3 / 2
            ],
            '4:3' => [
                'title' => 'LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.ratio.4_3',
                'value' => 4 / 3
            ],
            '3:4' => [
                'title' => '3:4',
                'value' => 3 / 4
            ],
            '1:1' => [
                'title' => 'LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.ratio.1_1',
                'value' => 1.0
            ],
            'NaN' => [
                'title' => 'LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.ratio.free',
                'value' => 0.0
            ],
        ],
        'selectedRatio' => 'NaN',
];
 

Kontaktbuttons - before

Ich musste bei einem meiner Aufträge Kontaktbuttons erstellen.

Zur Seite

Dafür habe ich den  HeaderPlaceholder genutzt und ein before erstellt. Wichtig dabei ist, dass ein before einen content hat. Dem before habe ich dann die richtige grösse und Farbe gegeben.

Dank JavaScript kann man die Buttens anklicken und es öffnet sich ein Textfeld.

Hier der code

Mehrsprachigkeit

  1.  Auf "Neue Übersetzung dieser Seite erstellen" klicken und die entsprechende Sprache wählen
  2. Einen neuen Titel wählen und speichern
  3. Alle Sprachen oben links anwählen
  4. Bei der neuen Sprache auf übersetzen klicken
  5. Inhalte anpassen
  6. auf "Verbundener Modus" achten

Wichtig: Logo für neue Sprache einfügen

 

Border

Für das Insel Gerüst musste ich oben an der Website einen dreifarbigen Border machen. Dazu muss man:

  1. Neue class erstellen im Template
  2. diese Class im css gestalten

Zur Seite

Neue Class im Template
Css gestaltung