Ein responsives Webdesign mit Typo3 (Teil 3)

Frontend finales Template

Typo3 wurde installiert, das Template ist soweit fertig – kommen wir nun zur Umsetzung in Typo3. Damit ist unser Webdesign zwar immer noch nicht responsiv, aber wir nähern uns mit großen Schritten.

Loggen wir uns zunächst im Backend unseres lokalen Typo3 Systems ein.

Typo3 Backend
image-124

Typo3 Backend

Hier erstelle ich eine Startseite mit dem Namen „As-Moll“:

Startseite
image-125

Startseite

Über „Template“ generiere ich ein neues Root Template:

Neues Template
image-126

Neues Template

Das Template nenne ich über „Info/Bearbeiten“ in „Root Template“ um und speichere zwischen:

Umbenennen in Root Template
image-127

Umbenennen in Root Template

Über „Edit the whole template record“ wird die CSS Styled Content eingebunden:

Edit whole record
image-128

Edit whole record

und:

CSS Styled Content
image-129

CSS Styled Content

In der Template Übersicht beginne ich nun mit der Einbindung via TypoScript:

Template Setup
image-130

Template Setup

HTML5

Wie bereits in Tutorial 1 und Tutorial 2 angemerkt nutze ich HTML5 zur Auszeichnung. Typo3 6.2.x bringt dabei schon einiges von Haus aus mit und wir starten mit dem Head Bereich unserer Seite.

Wie bei jeder Typo3 Seite muss zunächst PAGE initialisiert werden.

# PAGE initialisieren:
page = PAGE
page.typeNum = 0

Danach binde ich die CSS Dateien der Reihe nach ein:

# CSS einbinden
page.includeCSS.file1 = fileadmin/css/3cols.css
page.includeCSS.file2 = fileadmin/css/col.css
page.includeCSS.file3 = fileadmin/css/html5reset.css
page.includeCSS.file4 = fileadmin/css/responsivegridsystem.css
page.includeCSS.file5 = fileadmin/css/stylesheet.css

Im Quelltext sieht das dann so aus:

Quelltext
image-131

Quelltext

Der nächste Schritt ist sicherlich nicht astrein, aber er funktioniert. Vielleicht hat jemand eine bessere Idee.

# Adaptive Images, Schriften, META Tags und Viewport einbinden
page.headTag (
<head>
<script>
 document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';
</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
)

Damit ist der HTML5 Prolog soweit fertig.

Das Template ansteuern

Mit:

# Default Template einbinden
page.10 = TEMPLATE
page.10.template = FILE
page.10.template.file = fileadmin/template.html

steuere ich das Template an. Im Frontend der Seite müssten jetzt die Marker sichtbar werden.

Frontend Marker
image-132

Frontend Marker

Das Design mit CSS

Widmen wir uns zunächst dem Hintergrundbild. Das soll sich auf die gesamte Breite und Höhe automatisch dem Viewport anpassen. Möglich mach das CSS3.
Zunächst lade ich mein Hintergrundbild in den Unterordner „fileadmin/images/backgrounds/“ in einer Auflösung von 2.560 Pixeln Breite. In meine „stylesheet.css“ schreibe ich dann folgenden Eintrag:

body {
    background-attachment: fixed;
    background-image: url("../images/backgrounds/background_2560.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
}

Im Frontend sieht das dann so aus:

Frontend mit Background Image
image-133

Frontend mit Background Image

Der HEADER wird in der „responsivegridsystem.css“ bereits angesteuert.

Header
image-134

Header

Lediglich:

<div class="horizontal_middle">

ist noch nicht definiert. Das können wir auch in der „stylesheet.css“ vornehmen. Mit:

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

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

.as-moll {
	width: 250px;
	float: left;
	}
	
nav.nav-collapse {
	width: 750px;
	float: left;
	}

bekommen wir den blauen Balken mit dem magentafarbenen Rahmen an der Unterseite.

Frontend mit Headerbalken
image-135

Frontend mit Headerbalken

Der FOOTER wird analog zum HEADER in die CSS geschrieben

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

Im Frontend sieht das so aus:

Frontend mit Header und Footer
image-136

Frontend mit Header und Footer

Über:

.footer_nav {
    top: 10px;
    margin: 0 auto;
    width: 1000px;
    padding-top: 20px;
    text-align: right;
  }

wird der innere Bereich des FOOTERs noch ausgerichtet. Den Inhaltsbereich steuere ich zunächst über die Klasse „section“ an:

.section {
    top: 10px;
    margin: 0 auto;
    width: 1000px;
    padding-top: 20px;
    }

Die linke Box positionieren und gestalte ich mit:

.span_2_of_3 {
	min-height: 300px;
	background-color: #fff;
	opacity: 0.8;
	-khtml-opacity: 0.8;
	-moz-opacity: 0.8;
	-webkit-opacity: 0.8;
	filter: alpha(opacity=80);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	border-radius: 30px 30px 0px 0px;
	text-align: left;
	}
	
.span_2_of_3 > article {
	padding: 30px 20px 10px 20px;
	}

Die Transparenz würde in CSS3 bereits mit dem Ausdruck:

opacity: 0.8;

ausreichen. Das Problem sind aber ältere Browser, die mit den Ausdrücken:

-khtml-opacity: 0.8;
-moz-opacity: 0.8;
-webkit-opacity: 0.8;
filter: alpha(opacity=80);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";

abgefertigt werden. Den unteren Teil der Box lassen wir vorerst eckig. Dazu kommen wir später.

Frontend mit transparenter Box links
image-137

Frontend mit transparenter Box links

Die rechte Box lässt sich mit den gleichen Angaben wie für die linke Box gestalten:

.span_1_of_3 {
	min-height: 300px;
	background-color: #fff;
	opacity: 0.8;
	-khtml-opacity: 0.8;
	-moz-opacity: 0.8;
	-webkit-opacity: 0.8;
	filter: alpha(opacity=80);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	border-radius: 30px 30px 0px 0px;
	text-align: left;
	}
Frontend mit linker und rechter Box
image-138

Frontend mit linker und rechter Box

Soweit so gut …

Bleibt das Problem mit den unterschiedlichen Kreisen am Ende der Boxen. Hier könnte man mit dem Canvas Element arbeiten, allerdings ist das noch nicht mit allen Browsern kompatibel. Auf http://css-tricks.com/ gibt es einen interessanten Artikel wie man skalierbare Vektorgrafiken (SVG) für diesen Fall heranzieht. Die Vorteile von SVG Dateien sind das relativ verlustfreie Skalieren und die breitere Browserkompatibilität (bis auf einige Ausnahmen, die mit einem Fallback aber abgefangen werden können).

In Adobe Illustrator (oder einem anderen freien Vektorprogramm wie Inkscape) erstelle ich zunächst eine SVG Datei. Der Übersichtlichkeit halber habe ich das hier mal rot eingefärbt:

SVG Datei
image-139

SVG Datei

Nachdem ich die Datei unter „fileadmin/images/backgrounds“ als form.svg abgespeichert habe, kann ich die SVG über einen Object Tag in das Template einbinden. Das geschieht unterhalb des:

<div class="col span_1_of_3">###SIDE###</div>

und zwar als Object:

  <div class="col span_1_of_3">###SIDE###</div>
    <object type="image/svg+xml" data="fileadmin/images/backgrounds/form.svg" class="box_form">
	Form <!-- fallback image in CSS -->
    </object>
...

In der CSS deklariere ich noch folgende Angaben:

.box_form {
	width: 661px;
	float: left;
	}
	
.col {
	margin-bottom: 0px;
	}

Das Ergebnis sieht dann so aus:

Frontend mit Freiform
image-140

Frontend mit Freiform

Bleibt noch die rechte Seite. Hierzu spiegele ich die SVG im Illustrator und speichere diese unter „fileadmin/imagaes/backgrounds“ als form_inv.svg ab. Diese SVG wird auch als Object unterhalb des ersten Objects ins Template geschrieben. Die Klasse heißt dort „box_form_inv“

   <object type="image/svg+xml" data="fileadmin/images/backgrounds/form.svg" class="box_form">
     Form <!-- fallback image in CSS -->
   </object>
   <object type="image/svg+xml" data="fileadmin/images/backgrounds/form_inv.svg" class="box_form_inv">
     Form <!-- fallback image in CSS -->
   </object>

in die CSS kommt dann noch:

.box_form_inv {
	width: 323px;
	float: right;
	}
Frontend finales Template
image-141

Frontend finales Template

Fertig.

Schreiben Sie einen Kommentar

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