---
title: "Zwei Layouts (zwi css-Dateien) für eine HP"
url: "https://www.typo3.net/d/83593-zwei-layouts-zwi-css-dateien-fuer-eine-hp"
source: "typo3.net"
tags: ["Frontend","Barrierefreiheit","Frage","HTML & CSS"]
created: "2008-11-03"
last_reply: "2008-11-05"
replies: 10
solved: false
page: 1
pages: 1
lang: "de"
---

# Zwei Layouts (zwi css-Dateien) für eine HP

Frontend › Barrierefreiheit · 10 Antworten · gestartet 2008-11-03

## Eröffnungsbeitrag

**leof** · 2008-11-03 · [Beitrag #1](https://www.typo3.net/d/83593-zwei-layouts-zwi-css-dateien-fuer-eine-hp/1)

Hallo,
ich würde gerne zwei verschiedene Layouts für eine HP benutzen. Bin so weit, dass der Benutzer z.B. im Firefox unter "Ansicht -> Webseiten-Stil" auch das alternativ-Layout "Grün" auswählen kann. Gugst du: <http://www.dav-ettlingen.de>
Leider wird nach dem aktualisieren bzw. nach einem klick auf einen Link wieder das blaue Layout benutzt...

Kann mir jemand sagen, wie die gewählte Einstellung gespeichert werden kann? Sonst macht das ja keinen Sinn...

Schonmal danke,
Leo

## Antworten

### [#2](https://www.typo3.net/d/83593-zwei-layouts-zwi-css-dateien-fuer-eine-hp/2) · tandem · 2008-11-03

Hallo leof,

# Invertierte Darstellung
inv < page
inv {
  typeNum = 13
  value = Layout
  includeCSS.invert = fileadmin/css/invert.css
}

Link für zurück ähnlich diesem
inv.10.subparts.subcr.20.value = Layout
inv.10.subparts.subcr.20.typolink.additionalParams = &type=0

in der config noch:
simulateStaticDocuments = 1
simulateStaticDocuments_noTypeIfNoTitle = 1
simulateStaticDocuments_pEnc = md5
simulateStaticDocuments_pEnc_onlyP = type
linkVars = type
uniqueLinkVars = 1

Gruss
Wolfgang

### [#3](https://www.typo3.net/d/83593-zwei-layouts-zwi-css-dateien-fuer-eine-hp/3) · leof · 2008-11-03

Hallo Wolfgang,
schonmal danke für die Antwort. Das mit dem convig Teil hab ich mal im Template übernommen... Das mit dem:

> **tandem schrieb:**
>
> # Invertierte Darstellung
> [...]
> inv < page
> inv {
>   typeNum = 13
>   value = Layout
>   includeCSS.invert = fileadmin/css/invert.css
> }
>
> Link für zurück ähnlich diesem
> inv.10.subparts.subcr.20.value = Layout
> inv.10.subparts.subcr.20.typolink.additionalParams = &type=0
> [...]

versteh ich leider nicht. Was passiert mit dem inv?
Mein Seitenlayout schaut so aus (den Teil von oben hab ich enfach mal ans Ende gehängt - dass das so nicht funktioniert ist mir schon klar^^):

```typoscript
page = PAGE
page {
	shortcutIcon = fileadmin/templates/media/icondav_32x32.ico
	headerData.10 = TEXT
	headerData.10.value (
		<!--[if lt IE 7]>
		<link href="fileadmin/templates/css/ie.css" rel="stylesheet" typoe = "text/css" />
		<![endif]-->
		)
	
	includeCSS {
		file1 = fileadmin/templates/css/screen_blue.css
		file1.media = screen
		file1.title  = Blau
		file2 = fileadmin/templates/css/screen_green.css
		file2.media = screen
		file2.title  = Gruen
		print = fileadmin/templates/css/print.css
		print.media = print
	}

	10 = TEMPLATE
	10 {
		template = FILE
		template.file = fileadmin/templates/main.html
		workOnSubpart = DOCUMENT_BODY
		relPathPrefix = fileadmin/templates/

		subparts {
			CONTENT < styles.content.get
		}
	}
}

inv < page
inv {
  typeNum = 13
  value = Layout
  includeCSS.invert = fileadmin/css/screen_green.css
}

inv.10.subparts.subcr.20.value = Layout
inv.10.subparts.subcr.20.typolink.additionalParams = &type=0
```

Über einen zweiten Tipp wäre ich dankbar...
Schönen Abend noch,
Leo

### [#4](https://www.typo3.net/d/83593-zwei-layouts-zwi-css-dateien-fuer-eine-hp/4) · tandem · 2008-11-04

Hallo leof,

nachdem die Seite gebaut ist, kopierst Du sie ins Objekt
inv < page
Deine Site hat die typeNum 0
inv bekommt jetzt eine andere freie typeNum
inv.typeNum = 13
mit value = Layout bereitest Du einen Schalter zum Umschalten des Layouts vor.
mit includeCSS.invert = Pfad zur alternativen CSS-Datei
bindest Du das andere Lyaout ein.

Im Browser kannst Du nun durch anhängen von type=13 diese Seite aufrufen.
Dann gehts weiter ...
Auf der Seite muss ein Schalter eingebaut werden, z.B. im Kopf der Seite etwa so einer:
20 = TEXT
20 {
value = Layout
typolink.parameter.data = TSFE:id
typolink.additionalParams = &type=13
}
und die config wie oben beschrieben.

Gruss

### [#5](https://www.typo3.net/d/83593-zwei-layouts-zwi-css-dateien-fuer-eine-hp/5) · leof · 2008-11-04

Hallo Wolfgang,
danke für die Erklärung...
Hab es mal auf zwei verschiedene Arten versucht - leider klappt es noch nicht ganz. Das Ergebnis ist bei beiden Versuchen das Gleiche:
Und zwar: Beim Klick auf "css" unten links auf der Homepage, wird das grüne Design angezeigt. Beim weiternavigieren wird jedoch wieder auf das blaue Design umgeschalten...
Ich denke, dass das mit dem "additionalParams" nicht richtig funktioniert...
Hab schon viel versucht - abers will einfach net  :'(
Kannst ja ruhig selbst mal versuche: Testseite: <http://www.leo.dav-ettlingen.de>

Wäre nett, wenn du nochmal kurz drüber schauen könntest - mit Typoscript kenn ich mich noch net soo sehr aus... (Ab Zeile 57 wirds interessant)

```typoscript
page = PAGE
page {
	meta.AUTHOR = Leo Führinger
	typeNum = 0
	headerData = COA
	headerData.10 = TEXT
	headerData.10.field = title
	headerData.10.wrap = <title>Leos Homepage:&nbsp; | </title>
	headerData.10.value (
		<!--[if lt IE 7]>
		<link href="fileadmin/templates/css/ie.css" rel="stylesheet" type = "text/css" />
		<![endif]-->
		)
	
	includeCSS {
		screen = fileadmin/templates/css/screen_blue.css
		screen.media = screen
		screen.title  = Blau
		print = fileadmin/templates/css/print.css
		print.media = print
	}

	10 = TEMPLATE
	10 {
		template = FILE
		template.file = fileadmin/templates/main.html
		workOnSubpart = DOCUMENT_BODY
		relPathPrefix = fileadmin/templates/
		
		marks{
			YEAR = TEXT
			YEAR.data = date:Y
			
			LAST_CHANGE = TEXT
			LAST_CHANGE.data = register:SYS_LASTCHANGED
			LAST_CHANGE.strftime = %d.%m.%Y
			
			HEADER_IMG = IMAGE
			HEADER_IMG.file  = fileadmin/templates/media/header/Rofan1.jpg
			HEADER_IMG.params = class=headerimg
			
			LOGO = IMAGE
			LOGO.file = fileadmin/templates/media/logo_typo3.gif
			LOGO.params = id="logo" name="logo"#
			
			CSSVERSION = TEXT
			CSSVERSION.field = uid
			CSSVERSION.wrap = <a href="index.php?id=|&L=0&type=1" target="_self">css</a>
		}
		
		subparts {
			CONTENT < styles.content.get
		}
	}
}

page_green < page
page_green {
	typeNum = 1
	includeCSS {
		screen = fileadmin/templates/css/screen_green.css
		screen.media = screen
		screen.title  = Gruen
	}
	
	# Zum 1. Versuch
	20 = TEXT
	20 {
		value = Layout
		typolink.parameter.data = TSFE:id
		typolink.additionalParams = &type=1
	}
	
	10.marks{
		HEADER_IMG = IMAGE
		HEADER_IMG.file  = fileadmin/templates/media/header/Rofan2.jpg
		HEADER_IMG.params = class=headerimg
		 
		#1. Versuch
		CSSVERSION < 20
		
		#2. Versuch
		/*
		CSSVERSION = TEXT
		CSSVERSION.field = uid
		CSSVERSION.wrap = <a href="index.php?id=|&L=0&type=0" target="_self">css</a>
		*/
	}
}
```

Danke, Leo

### [#6](https://www.typo3.net/d/83593-zwei-layouts-zwi-css-dateien-fuer-eine-hp/6) · tandem · 2008-11-05

Hallo leof,

Zeile 46 bis 48 ersetzen durch:
CSSVERSION = TEXT
CSSVERSION {
    value = css
    typolink.parameter.data = TSFE:id
    typolink.additionalParams = &type=13
}

Zeile 57 bis 89 ersetzen durch:
page_green {
        typeNum = 13
        value = css
        includeCSS {
                screen = fileadmin/templates/css/screen_green.css
                screen.media = screen
                screen.title  = Gruen
        }

page_green.10.marks.CSSVERSION.value = css
page_green.10.marks.CSSVERSION.typolink.additionalParams = &type=0

und die entsprechenden config Einstellungen wie oben beschrieben.
Das sollte finktionieren.

Gruss

### [#7](https://www.typo3.net/d/83593-zwei-layouts-zwi-css-dateien-fuer-eine-hp/7) · leof · 2008-11-05

So - vielen Dank Wolfgang - auch für deine Geduld! Auf www.dav-ettlingen.de funktioniert es jetzt Einwand frei  :D
Was dennoch schade war, dass ich auch der page_green die ganzen Navigationsleisten und Außnahmen wieder zuweisen muss:

```typoscript
page.10.subparts.MAINMENU.excludeUidList = 128,13,16,9,8
page_green.10.subparts.MAINMENU.excludeUidList = 128,13,16,9,8

page.10.subparts.TOPMENU < temp.topmenu
page_green.10.subparts.TOPMENU < temp.topmenu
[usw...]
```

Aber damit kann ich gut leben.

Leider gibt es ein Problem auf leof.dav-ettlingen.de mit dem
SimulateStaticDocument
Wenn ich das anschalte (sowohl nur das, als auch alles andere von oben), findet er die Seiten nicht mehr... Da google ich mal ein bisschen, wenn ich aus der Uni komm...

Nochmals Danke,
Leo

### [#8](https://www.typo3.net/d/83593-zwei-layouts-zwi-css-dateien-fuer-eine-hp/8) · tandem · 2008-11-05

Hallo leof,

hab mal auf www.dav-ettlingen.de nachgesehen.
Hast Du den marker wieder rausgenommen?

Gruss

### [#9](https://www.typo3.net/d/83593-zwei-layouts-zwi-css-dateien-fuer-eine-hp/9) · leof · 2008-11-05

Ich sag nur Entwurfsworkspace ;-)
Jetzt läufts 'wieder'...

Leo

### [#10](https://www.typo3.net/d/83593-zwei-layouts-zwi-css-dateien-fuer-eine-hp/10) · tandem · 2008-11-05

Hallo leof,

Du brauchst doch nur die Code-Teile neu zuweisen, die auch Layoutanweisungen enthalten.
Oder hab´ich das falsch verstanden?

Gruss

### [#11](https://www.typo3.net/d/83593-zwei-layouts-zwi-css-dateien-fuer-eine-hp/11) · leof · 2008-11-05

Nun ja - das stimmt schon, dass ich nur die Code-Teile mit Layoutanweisungen neu zuweisen muss. Aber dafür brauche ich doch auch zwei Seitenobjekte - 'page' und 'green_page'.
Erst nach deren Erstellung erstelle ich die Menüs und weiß diese dann der Seite zu...
Da ich zwei verschiedene Seitenobjekte brauche (eines mit typeNum=0 und eines mit typeNum=13) muss ich auch in jedes dieser Seitenobjekte die Menüs einbinden...

Oder gibt es eine Möglichkeit, dass wenn ich auf den Marker css, klicke, dass der quasi im Objekt "page" die typeNum auf 13 ändert und die css-Einstellungen ändert, so dass ich gar kein Objekt green_page brauche?

Hier nochmal mein TypoScriptCode... (evtl. möchten ja noch andere das gleiche realisieren)

```typoscript
page = PAGE
page {
	meta.AUTHOR = Leo Führinger
	typeNum=0
	shortcutIcon = fileadmin/templates/media/icondav_32x32.ico
	headerData = COA
	headerData.10 = TEXT
	headerData.10.field = title
	headerData.10.wrap = <title>DAV Sektion Ettlingen:&nbsp; | </title>
	headerData.10.value (
		<!--[if lt IE 7]>
		<link href="fileadmin/templates/css/ie.css" rel="stylesheet" type = "text/css" />
		<![endif]-->
		)
	
	includeCSS {
		screen = fileadmin/templates/css/screen_blue.css
		screen.media = screen
		screen.title  = Blau
		print = fileadmin/templates/css/print.css
		print.media = print
	}

	10 = TEMPLATE
	10 {
		template = FILE
		template.file = fileadmin/templates/main.html
		workOnSubpart = DOCUMENT_BODY
		relPathPrefix = fileadmin/templates/
		
		marks{
			YEAR = TEXT
			YEAR.data = date:Y
			
			LAST_CHANGE = TEXT
			LAST_CHANGE.data = register:SYS_LASTCHANGED
			LAST_CHANGE.strftime = %d.%m.%Y
			
			HEADER_IMG = IMAGE
			HEADER_IMG.file  = fileadmin/templates/media/header/Rofan1.jpg
			HEADER_IMG.params = class=headerimg
			
			LOGO = IMAGE
			LOGO.file = fileadmin/templates/media/logo_dav.jpg
			LOGO.params = id="logo" name="logo"
			
			CSSVERSION = TEXT
			CSSVERSION {
				value = css
				typolink.parameter.data = TSFE:id
				typolink.additionalParams = &type=13
			}
		}
		
		subparts {
			CONTENT < styles.content.get
		}
	}
}


//Zweites css-Layouts
page_green < page
page_green {
	typeNum = 13
	value = css
	
	includeCSS {
		screen = fileadmin/templates/css/screen_green.css
		screen.media = screen
		screen.title = Gruen
	}
	
	10.marks {
		HEADER_IMG = IMAGE
		HEADER_IMG.file  = fileadmin/templates/media/header/Rofan2.jpg
		HEADER_IMG.params = class=headerimg
		
		CSSVERSION.value = css
		CSSVERSION.typolink.additionalParams = &type=0
	}
}
```

Gruss

---

Quelle: „Zwei Layouts (zwi css-Dateien) für eine HP“, typo3.net, https://www.typo3.net/d/83593-zwei-layouts-zwi-css-dateien-fuer-eine-hp
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.