Zum Inhalt springen

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

Erstellt am 3. November 2008 · 10 Antworten · letzte Antwort am 5. November 2008

Tags: HTML & CSS, Frage

leof ·

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

tandem ·

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

leof ·

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^^):

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

tandem ·

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

leof ·

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)

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

tandem ·

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

leof ·

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

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

tandem ·

Hallo leof,

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

Gruss

leof ·

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)

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