Ein responsives Webdesign mit Typo3 (Teil 4): CSS und TypoScript

Frontend

Das HTML Template ist soweit einsatzbereit. Verknüpfen wir jetzt das Typo3 System weiter mit dem Template. In diesem Tutorial kommen jetzt die Menüs und die dynamischen Inhalte hinzu.

Laut unserem Design befindet sich das Logo im linken Header Bereich.

As-Moll Dummy Seite
image-187

As-Moll Dummy Seite

Es gibt hier mehrere Varianten dieses Logo einzubinden:

  • direkt im HTML Template
  • per TypoScript
  • als Grafik
  • als HTML Schriftzug

Das Logo ist im strengen Sinn auch kein wirkliches Logo. Ich habe mich beschränkt auf einen Schriftzug, da ich hier eine kleine Technik mit eingebetteten Schriftarten demonstrieren will.

Google Fonts

Der hier eingesetzte Font wird von Google bereitgestellt und heißt „Merriweather“ (http://www.google.com/fonts/specimen/Merriweather). Eigentlich galt im Webdesign bisher immer die Regel keine Serifenschriften zu nutzen. Unter http://www.webdesignerdepot.com/2013/03/serif-vs-sans-the-final-battle/ gibt es eine nette Inforgrafik zum Thema. Mittlerweile bricht diese Regel auch auf und moderne (hippe) Seiten scheren sich mittlerweile nicht mehr um diese Konventionen.

Na ja … Google hat dazu freundlicherweise einige Fonts zur Verfügung gestellt, die für das Web optimiert wurden. Ich habe mich, wie bereits erwähnt, für den „Merriweather“ Font entschieden. Hier stellt Google auch eine kleine Grafik zur Verfügung, die zeigt wie schneller oder langsamer die Seite lädt, wenn mehrere Schriftschnitte zum Einsatz kommen.

Google Fonts
image-188

Google Fonts

Praktischerweise liefert Google auch gleich den nötigen Code zum Einbetten mit:

Google Fonts einbetten
image-189

Google Fonts einbetten

Im Tyopscript Template kann man das über folgenden Code einbetten:

Google Font TypoScript
image-190

Google Font TypoScript

Und im Quellcode:

Google Font Quellcode
image-191

Google Font Quellcode

Das heißt: über CSS lässt sich nun die Schriftart nutzen. Egal ob der Schriftfont auf dem System installiert wurde, oder nicht. Einziges Problem: wenn Google je die Pfade ändert bzw. diese Fonts entfernt, sind diese auch nicht mehr verfügbar. Alternativ kann man diese aber auch herunterladen und direkt auf dem eigenen Server referenzieren.

Das Logo

Das Logo schreiben wir nun ins TypoScript – es gibt wie gesagt auch andere Lösungen. Ich mache das halt so. Es gibt einige Diskussionen wie das Logo eingebettet werden sollte. Unter http://www.fastcolabs.com/3016894/should-your-tag-be-your-logo gibt es einen guten Überblick. Ins TypoScript Template schreibe ich daher:

page.10 {
  marks.LOGO = TEXT
  marks.LOGO.value = <h1 class="logo">As-Moll</h1>
}

Das sieht im Frontend so aus:

Logo
image-192

Logo

Der Rest ist jetzt wieder CSS.

h1.logo {
   font-family: 'Merriweather',serif;
   font-size: inherit;
   font-weight: 700;
   font-size: 3.0em;
   color: #fff;
}

Zusätzlich entferne ich in der „horizontal_middle“ Klasse das Top Padding von 20px;

.horizontal_middle {
   top: 10px;
   margin: 0 auto;
   width: 1000px;
}

Das resultiert in:

Logo mit CSS
image-193

Logo mit CSS

Mit:

   background-color: fff;
   text-shadow: 0px 0px 30px #FFFFFF, -1px -1px #007c9a;

in der „h1.logo“ Klasse lässt sich ein Schein um das Logo legen:

Logo mit Schein
image-194

Logo mit Schein

Die Seiten Struktur anlegen

Damit unsere Menüs auch dynamisch angelegt werden können, müssen im Seitenbaum entsprechend Seiten angelegt werden. Das erledige ich quick und dirty mit dem Funktionen Modul:

Seiten anlegen mit dem Typo3 Funktionen Modul
image-195

Seiten anlegen mit dem Typo3 Funktionen Modul

Das wäre unser Menü für den Header:

Seitenbaum Menü oben
image-196

Seitenbaum Menü oben

Optisch trenne ich das Footer Menü gern über einen Menütrenner:

Menü Trenner
image-197

Menü Trenner

Analog zum Menü im Header erstelle ich schnell noch ein paar Dummy Seiten. Hier nutze ich aber auch gleich die Seitentyp Auswahl

Seiten anlegen
image-198

Seiten anlegen

Der Seitenbaum müsste jetzt so aussehen:

Seitenbaum Menü unten
image-199

Seitenbaum Menü unten

Das obere Menü einbinden

Über folgendes TypoScript binde ich das obere Menü ein:

# Top Navigation
  marks.MENU = HMENU
  marks.MENU {
   entryLevel = 0
   special = directory
   special.value = 1
   1 = TMENU
    1 {
      expAll = 0
      wrap = <ul class="nav_top"> | </ul>
      NO = 1
      NO {
        wrapItemAndSub = <li class="nav_default"> | </li>
        ATagParams = class="a_top_nav"
        }
   }
}
   special.value = 1

ist die Page ID meiner „As-Moll“ Seite. Im Frontend sieht das ganze so aus:

Header Menü
image-200

Header Menü

Auch das ist wieder pures CSS:

.nav_top {
	float: right;
	}
	
.nav_default {
	float: left;
	min-height: 45px;
	padding: 25px 20px 0px 20px;
	}
	
.a_top_nav {
	font-family: 'Merriweather',serif;
    font-size: inherit;
    font-weight: 700;
	font-size: 1.3em;
	color: #8ed5e7;
	text-transform: uppercase;
	}

Außerdem habe ich das Float in der Klasse „nav.nav-collapse“ von Left auf Right gesetzt. Das Ergebnis im Frontend:

Header Menü
image-201

Header Menü

Die Menü Animation

Ein Menü lebt immer auch ein bischen von Animationen. Waren früher JavaScripts für Animationen nötig, kann man einiges auch heute bereits sehr schön mit CSS abfeiern. Hier gibt es wie immer allerdings die Einschränkung, dass es einigen Browsern nicht funktioniert. Dazu an anderer Stelle aber mehr.

Zunächst definiere ich einen Active Zustand in meinem Typoscript Template und weise dem li und dem eingebetteten a Tag eine andere Klasse zu:

      ACT < .NO
      ACT.wrapItemAndSub = <li class="nav_active"> | </li>
      ACT.ATagParams = class="a_top_nav_active"

Ist die Seite ausgewählt, bekommt der jeweilige li und a Tag eine andere Klasse zugeordnet.

Quelltext des aktiven Menüs
image-202

Quelltext des aktiven Menüs

Jetzt noch in der CSS die jeweiligen neuen Klassen einbinden. Zunächst füge ich die „.nav_active“ der „.nav_default“ an:

.nav_default, .nav_active {
	float: left;
	min-height: 45px;
	padding: 25px 20px 0px 20px;
}

und erweitere die „.nav_active“ noch mit einer weiteren Eigenschaft:

.nav_active {
	background-color: #8ed5e7;
	}

Danach füge ich eine neue Klasse hinzu:

.a_top_nav_active {
    font-family: 'Merriweather',serif;
    font-size: inherit;
    font-weight: 700;
    font-size: 1.3em;
    text-transform: uppercase;
}

Abschließend erweitere ich den Header von 75 Pixel auf 100 Pixel.

header {
	width: 100% !important;
	max-width: 100%;
	min-height: 100px;
	padding: 0px;
	background-color: #007c9a;
	border-bottom: 4px #eb0054 solid;
}

Im Frontend sieht das dann so aus:

ACT Menü im Frontend
image-203

ACT Menü im Frontend

Die Kurve an der Unterseite versuchen wir zu einem anderen Zeitpunkt zu realisieren.

Fehlt nur noch der Rollover Zustand. Diesen realisieren wir per CSS. Zum einen ändern wir die Klassengruppe „.nav_default, .nav_active“ um:

.nav_default, .nav_active {
   float: left;
   min-height: 45px;
   /*padding: 25px 20px 0px 20px;*/
   padding-top: 25px;
   width: 100px;
   margin-top: -1px;
}

Anschließend erweitere ich die CSS um:

.nav_default:hover {
   height: 45px;
   margin-top: -1px;
}

.a_top_nav:hover {
   color: #eb0054;
   background-color: #fff;
   padding: 25px 10px;
}

Der bereits vordefinierte Transition Effekt in der „responsivegridsystem.css“ macht eine schöne Animation:

Hover Effekt
image-204

Hover Effekt

Damit ist das obere Menü fertig. Wenden wir uns den Inhalten zu.

Die Inhalte

Zu Demonstrationszwecken erstelle ich mir mit einem Lorem Ipsum Generator einen Dummy Text von etwa 100 Wörtern. Im Backend des Typo3 erstelle ich auf der „As-Moll“ Seite in der Normalspalte ein einfaches Textelement:

Lorem Ipsum
image-205

Lorem Ipsum

Da der Marker MIDDLE noch nicht definiert ist, gibt es im Frontend auch keine Ausgabe. Dieser wird im TypoScript Template aber folgendermaßen angesteuert:

marks.MIDDLE < styles.content.get

Im Frontend sieht das noch etwas unübersichtlich aus:

Inhalt
image-206

Inhalt

Mit etwas CSS lässt sich das allerdings schnell beheben. Entweder entwerfen wir in der „stylesheet.css“ einfach die Tag Elemente neu, oder wir überschreiben bereits vorgefertigte Standards in den anderen CSS Dateien. Ich mache letzteres. Die entsprechenden Parameter befinden sich in der „responsivegridsystem.css“ ab Zeile 91.

Headings in der responsivegridsystem.css
image-207

Headings in der responsivegridsystem.css

Hier ändere ich:

h1, h2, h3, h4, h5, h6 {
font-family:  'Merriweather',serif, verdana, arial, helvetica, helve;
font-weight : normal;
margin-top: 10px;
letter-spacing: -1px;
}

h1 { 
font-family:  'Merriweather',serif, verdana, arial, helvetica, helve;
color: #000;
margin-bottom : 0.2em;
font-size : 2em; /* 96 / 16 */
line-height : 1.4;
}


h2 { 
color: #222;
margin-bottom : .5em;
margin-top : .5em;
font-size : 1.75em; /* 40 / 16 */
line-height : 1.2;
}

h3 { 
color: #333;
margin-bottom : 0.3em;
letter-spacing: -1px;
font-size : 1.55em; /* 28 / 16 */
line-height : 1.3; }


h4 { 
color: #444;
margin-bottom : 0.5em;
font-size : 1.3em; /* 24 / 16  */
line-height : 1.25; }

footer h4 { 
color: #ccc;
}

h5 { 
color: #555;
margin-bottom : 1.1em;
font-size : 1em; /* 20 / 16 */ }

h6 { 
color: #666;
font-size : 1em; /* 16 / 16  */ }

So sieht das schon besser aus:

Der Inhalt mit neuer CSS
image-208

Der Inhalt mit neuer CSS

Mit dem SIDE Marker verfahren wir ähnlich. Hierfür habe ich mir die Rand Spalte im Backend ausgesucht. Testweise lade ich mal ein Bild rein:

Testbild im Backend
image-209

Testbild im Backend

Im TypoScript Template steuere ich den Marker so an:

  marks.SIDE < styles.content.get
  marks.SIDE= CONTENT
  marks.SIDE {
             select.orderBy = sorting
             select.where = colPos=3

Im Frontend sieht das aber noch etwas unschön aus:

Zerrissenes Frontend
image-210

Zerrissenes Frontend

Hier müssen wir noch einmal im HTML Template und in der CSS Hand anlegen. Im Moment beschränke ich mich aber vorerst auf eine Bildverkleinerung im Backend.

Bildgröße
image-211

zusätzlich erweitere ich die „span_1_of_3“ Klasse in der „stylesheet.css“ um ein:

padding-top: 25px;

Um die SVGs kümmern wir uns später:

Inhalt
image-212

Inhalt

Das Footer Menü

Das Footer Menü ist der einfachere Teil. Hier schreibe ich ins TypoScript Template:

  # Footer Navigation
  marks.FOOTER = HMENU
  marks.FOOTER {
      special = directory
      special.value = 7
      1 = TMENU
              1.NO = 1
              1.NO.linkWrap = || &nbsp;  &#124; |
              1.NO.ATagParams = class="footer_nav_a"
  }

Mit etwas CSS:

.footer_nav_a {
    font-family: 'Merriweather',serif;
    font-size: inherit;
    font-weight: 700;
    color: #fff !important;
    text-decoration: none !important;
}

erhalten wir ein brauchbares Ergebnis:

Footer Menü
image-213

Footer Menü

Schreiben Sie einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.