Template / CSS Weiche

deak_wue · #1 15.08.07, 14:22

Hallo,

hatte edliche problem mit Firefox vs IE, ok ich habe jetzt zwei verschiedene Templates und CSS Files. Einen je für IE und Firefox.
Wie würdet ihr das nun einbinden da ich das template ja über TS einbinde.
gibt es im typoscript eine Browser weiche oder so was?

beste grüße

Markus

**MistaD** · #2 15.08.07, 14:36

Hallo,

CONDITIONS sollten dich ans Ziel bringen. Dort kannst du Browser und wenn gewünscht auch das OS (oder Browser-Version) abfragen, also z.B. Firefox Windows und Firefox Mac etc....

deak_wue · #3 15.08.07, 14:43

also dann so:

HTML-Code:

stylesheet = fileadmin/template/standart.css
[browser = msie] && [system = win]
stylesheet = fileadmin/template/test.css

deak_wue · #4 15.08.07, 14:47

ich hab das jetzt so ins TS geschrieben:

HTML-Code:

seite = PAGE
seite {
typeNum = 0
bodyTag = <body bgColor = "#5b5b5b">
stylesheet = fileadmin/template/standart_.css
[browser = msie] 
stylesheet = fileadmin/template/test.css

meta.AUTHOR = Markus Miederer
metaDESCRIPTION = Traders-Mag Beschreibung
config.language = de
config.locale_all = de_DE


10 = TEMPLATE
10.template = FILE
10.template.file = fileadmin/template/template_traderstv.html
[browser = msie] 
10.template.file = fileadmin/template/test.html
10.workOnSubpart = document

ich möchte nur zwischen IE und firefox unterscheiden, was hab ich den da flasch gemacht??? im firefox nimmt er nämlich nicht den richtigen

**MistaD** · #5 15.08.07, 15:03

Hallo,

CONDITIONS nicht innerhalb von geschweiften Klammern!
Beim Firefox nimm am besten anstelle von Browser useragent.
Hier ein Beispiel: (in weiss, bißchen schwer zu sehen die Condition Angaben/Klammern)

Typoscript-Code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:

[browser = msie]
seite.10.template.file = Pfad/zum/IE_Template
seite.includeCSS.file = Pfad/zum/IE_CSS
seite.includeCSS.media = screen
[global]

[useragent = *Firefox*]
seite.10.template.file = Pfad/zum/FF_Template
seite.includeCSS.file = Pfad/zum/FF_CSS
seite.includeCSS.media = screen
[global]

deak_wue · #6 15.08.07, 15:12

hallo mista,

ok nochmals danke ich hab das nun so gemacht. jetzt ist die ganze seite weg...ich werd noch verrückt. hier nochmal der ganze code vielleicht siehst du den fehler:

Code:

[browser = msie]
seite.10.template.file = template/test.html
seite.includeCSS.file = template/test.css
seite.includeCSS.media = screen
[global]

[useragent = *Firefox*]
seite.10.template.file = template/template_traderstv.html
seite.includeCSS.file = template/standart.css
seite.includeCSS.media = screen
[global]



seite = PAGE
seite {
typeNum = 0
bodyTag = <body bgColor = "#5b5b5b">



meta.AUTHOR = Markus Miederer
metaDESCRIPTION = Traders-Mag Beschreibung
config.language = de
config.locale_all = de_DE


10 = TEMPLATE
10.template = FILE

10.workOnSubpart = document

10.marks {

TEASER < styles.content.get

PROGRAMM  < styles.content.getBorder
BLOGS < styles.content.getRight
SEMINAR < styles.content.getLeft


SECONDNAVI = HMENU
SECONDNAVI.special = directory
SECONDNAVI.special.value = 92
SECONDNAVI.1 = TMENU
SECONDNAVI.1.NO = 1 
SECONDNAVI.1.ATagParams = class="linkWeiss"
SECONDNAVI.1.NO.linkWrap = &nbsp;|&nbsp; |

NAVIGATION = HMENU
NAVIGATION.special = directory
NAVIGATION.special.value = 104
NAVIGATION.1 = GMENU
NAVIGATION.1.NO = 1 

NAVIGATION.1.NO {
XY = [10.w]+15, 30
backColor = #5b5b5b


10 = TEXT
10.text.field = title
10.fontColor = #FFFFFF
10.fontFile = fileadmin/template/arial.ttf
10.fontSize = 8
10.offset = 7, 21
niceText = 1
20 = IMAGE
20.file = GIFBUILDER
20.file {

XY = 1,[10.w]+30, 
backColor = #FFFFFF
}
20.offset = 0, 0
}


NAVIGATION.1.RO < .NAVIGATION.1.NO
NAVIGATION.1.RO.backColor = #7a2d3f
NAVIGATION.1.CUR < .NAVIGATION.1.RO 



MAINNAVI = HMENU
MAINNAVI.special = directory
MAINNAVI.special.value = 34
MAINNAVI.entryLevel = 1
MAINNAVI.1 = GMENU
MAINNAVI.1.NO = 1
MAINNAVI.1.NO {

XY = 300, 20
backColor = #7a2d3f

10 = TEXT
10.text.field = title
10.fontColor = #FFFFFF
10.fontFile = fileadmin/template/arial.ttf
10.fontSize = 8

10.offset = 7, 15


20 = IMAGE
20.file = GIFBUILDER
20.file {
XY = 300, 1
backColor = #FFFFFF
}
20.offset = 0, 0

}

MAINNAVI.1.RO < .MAINNAVI.1.NO
MAINNAVI.1.RO.backColor = #5b5b5b
MAINNAVI.1.CUR < .MAINNAVI.1.RO

MAINNAVI.2.NO {
backColor = #5b5b5b


}

**MistaD** · #7 15.08.07, 15:20

Hallo,

setz die Conditions mal unter deins TS, ans Ende. Und du solltest deinem PAGE Objekt auch ein Template mitgeben, das dann durch deine CONDITIONS getauscht/ersetzt wird.

deak_wue · #8 15.08.07, 15:34

hi,

habe oben leer.css und leer.html eingebunden die datein gibt es nicht aber das müsste ja egal sein da sie eh überschrieben werden oder?

wenn ichs mir im ff anschaue passt auch alles im IE 7 dageggen wird nix angezeigt:

code:_

Code:

  Code:
 seite = PAGE
seite {
typeNum = 0
bodyTag = <body bgColor = "#5b5b5b">
stylesheet = fileadmin/template/leer.css
meta.AUTHOR = Markus Miederer
metaDESCRIPTION = Traders-Mag Beschreibung
config.language = de
config.locale_all = de_DE


10 = TEMPLATE
10.template = FILE
10.template.file = fileadmin/template/leer.html
10.workOnSubpart = document
10.marks {

TEASER < styles.content.get

PROGRAMM  < styles.content.getBorder
BLOGS < styles.content.getRight
SEMINAR < styles.content.getLeft


SECONDNAVI = HMENU
SECONDNAVI.special = directory
SECONDNAVI.special.value = 92
SECONDNAVI.1 = TMENU
SECONDNAVI.1.NO = 1 
SECONDNAVI.1.ATagParams = class="linkWeiss"
SECONDNAVI.1.NO.linkWrap = &nbsp;|&nbsp; |

NAVIGATION = HMENU
NAVIGATION.special = directory
NAVIGATION.special.value = 104
NAVIGATION.1 = GMENU
NAVIGATION.1.NO = 1 

NAVIGATION.1.NO {
XY = [10.w]+15, 30
backColor = #5b5b5b


10 = TEXT
10.text.field = title
10.fontColor = #FFFFFF
10.fontFile = fileadmin/template/arial.ttf
10.fontSize = 8
10.offset = 7, 21
niceText = 1
20 = IMAGE
20.file = GIFBUILDER
20.file {

XY = 1,[10.w]+30, 
backColor = #FFFFFF
}
20.offset = 0, 0
}


NAVIGATION.1.RO < .NAVIGATION.1.NO
NAVIGATION.1.RO.backColor = #7a2d3f
NAVIGATION.1.CUR < .NAVIGATION.1.RO 



MAINNAVI = HMENU
MAINNAVI.special = directory
MAINNAVI.special.value = 34
MAINNAVI.entryLevel = 1
MAINNAVI.1 = GMENU
MAINNAVI.1.NO = 1
MAINNAVI.1.NO {

XY = 300, 20
backColor = #7a2d3f

10 = TEXT
10.text.field = title
10.fontColor = #FFFFFF
10.fontFile = fileadmin/template/arial.ttf
10.fontSize = 8

10.offset = 7, 15


20 = IMAGE
20.file = GIFBUILDER
20.file {
XY = 300, 1
backColor = #FFFFFF
}
20.offset = 0, 0

}

MAINNAVI.1.RO < .MAINNAVI.1.NO
MAINNAVI.1.RO.backColor = #5b5b5b
MAINNAVI.1.CUR < .MAINNAVI.1.RO

MAINNAVI.2.NO {
backColor = #5b5b5b


}


[browser = msie]
seite.10.template.file = fileadmin/template/test.html
seite.includeCSS.file = fileadmin/template/test.css
seite.includeCSS.media = screen
[global]

[useragent = *Firefox*]
seite.10.template.file = fileadmin/template/template_traderstv.html
seite.includeCSS.file = fileadmin/template/standart.css
seite.includeCSS.media = screen
[global]

**MistaD** · #9 15.08.07, 15:56

Hallo,

keine LEEREN css oder Templates einbinden, was soll denn da auch angezeigt werden?
Ganz normal dein STANDARD Template einbinden, dann am Schluss über die CONDITIONS jeweils das für den IE und das für den FF!

Dshow · #10 16.08.07, 21:09

Hi,

ich mache das so, dass ich die eigentliche .css-Datei normal über Typoscript einbinden.
Zudem habe ich eine .css-Datei welche nur die Anpassungen für den IE enthält (Hacks).
Ich binde diese Dateien wie folgt ein:

Typoscript-Code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:

page.includeCSS{
file1 = fileadmin/templates/css/css_normal.css
file1 {
type = text/css
}
}

# IE Hack einbinden
page.headerData.20 = TEXT
page.headerData.20.value (

)

Du kannst dann mehrere Dateien einbinden und die einzelnen Versionen von IE direkt ansprechen. Im Beispiel oben bedeutet das "[if lte IE 7]" dass die Css Datei bei allen Internet Explorer mit Version 7 und kleiner angesprochen wird.
Mit diesen Operatoren kannst Du gezielt die gewünschten Browser Versionen ansprechen:

! nicht
lt kleiner als (less than)
lte kleiner als oder gleich (less than or equal)
gt größer als (greater than)
gte größer als oder gleich (greater than or equal)

Liebe Grüße
Dshow

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht	Thema bewerten
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln	Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Seite basierend auf anderem Template in Template einbinden?	Danwe	TYPO3 4.x Fragen und Probleme	2	19.03.08 11:12
template in ein vorhandenes template einbinden	µaTh	TYPO3 3.x Fragen und Probleme	2	16.10.07 13:08
Template Desaster - Vorlage sieht anders aus als Template	Damned	TemplaVoila	2	16.01.07 13:45
Neues Template angelegt: No template found!	Lissy	TYPO3 4.x Fragen und Probleme	0	17.10.06 09:37
familienhaus-weiche.de	arnem	Deine TYPO3 Projekte	4	26.04.06 13:05

Suche

Userpanel

Template / CSS Weiche