Schriftgrößen mit CSS und TYPO3 wählen
| Autor | Nachricht |
|---|---|
|
Verfasst am: 30. 11. 2006 [11:30]
|
|
|
Kitsunet
Themenersteller
Dabei seit: 02.02.2006
Beiträge: 1895
|
Hallo, mal ein kleines Tutorial zum Thema Schriftgrößenauswahl seitenübergreifend mit TYPO3. Zuerst muss ich dazu einen kleinen Exkurs in CSS und relative Schriftgrößen machen. Falls Ihr eure Schriftgröße bereits mit em einstellt könnt ihr ein Stück überspringen. Allen anderen rate ich zusätzlich zu diesem Thema zu googlen, weil das ein HowTo für sich wäre. Um die Schriftgrößen über den Browser steuerbar zu machen gibt man die Schriftgrößen in seinem CSS am besten mit der relativen Einheit em an. Aber wie groß ist 1em? Nun, ganz sicher kann man es nicht vorhersagen, aber bei den meisten Browsern ist die Standardschriftgröße 16 Pixel, damit ist 1em auch 16Pixel. Will ich nun z.B. 8 Pixel müsste ich 0.5em nehmen (es wird also die Standardschriftgröße mit meiner em-Angabe multipliziert). Da mir 16Pixel meist zu groß ist, und ich nicht ständig die Schriftgröße angeben will, setze ich die Standardgröße meist niedriger an. Das kann ich machen, indem ich in meinem CSS für den body-Tag (dessen einstellungen an alles vererbt werden) Die Schriftgröße verstelle. Ich mache es mit Prozent, aber man kann da auch direkt em nehmen, wenn man will. Das sieht dann in meiner CSS Datei z.B. so aus: body{ font-size: 62.5%; } Das ergibt eine Standardschriftgröße von 10Pixel, so dass jetzt 1em = 10Pixel sind. Das dazu, alles weitere bitte ergooglen. Um jetzt verschiedene Größen anzubieten, muss ich nur noch diese Angabe ändern, weil ja alle anderen Schriftgrößen auf die Standardschrift bezogen werden. D.h. body{ font-size: 80%; } ergibt im ganzen Dokument eine größere Schrift. Nun könnte man das über Javascript machen, sogar Stufenlos. Das funktioniert aber natürlich nur, wenn Javascript eingeschaltet ist und wird in der Regel wenn man die Seite wechselt wieder zurückgesetzt. Das kann man umgehen indem man das über TYPO3 mit einer GET-Variablen löst. Dazu müssen wir erstmal die GET-Variable einrichten: config.linkVars = Fsize,L # Falls ihr keine mehrsprachige Seite habt, könnt Ihr das L weglassen. Eure Variable heißt jetzt Fsize (könnt ihr auch anders machen) Jetzt brauchen wir ein Menü um zwischen den Größen umzuschalten. Das könnte man sicher eleganter Lösen, ich poste jetzt mal ein Beispiel mit drei verschiedenen Schriftgrößen: TYPOSCRIPT temp.fsizemenu = COA temp.fsizemenu.wrap = <ul class="langmenu">|</ul> temp.fsizemenu.40 = HTML temp.fsizemenu.40.value = A temp.fsizemenu.40.value.wrap = <li class="langm0">|</li> temp.fsizemenu.40.value.typolink.parameter.data = page:uid temp.fsizemenu.40.value.typolink.additionalParams = &Fsize=0 temp.fsizemenu.50 < temp.fsizemenu.40 temp.fsizemenu.50.value = A+ temp.fsizemenu.50.value.wrap = <li class="langm2">|</li> temp.fsizemenu.50.value.typolink.additionalParams = &Fsize=1 temp.fsizemenu.60 < temp.fsizemenu.40 temp.fsizemenu.60.value = A++ temp.fsizemenu.60.value.wrap = <li class="langm3">|</li> temp.fsizemenu.60.value.typolink.additionalParams = &Fsize=2 Der Code ist ja nicht ganz so schwer, es werden drei Links erzeugt auf die gerade aktive Seite und an jeden wird einer der drei Paramter drangehangen. So jetzt können wir die Schriftgröße wählen, aber es passiert noch nichts. Wir müssen natürlich die GET-Variable in unserem Typoscript abfragen per Condition. Jetzt brauchen wir aber auch drei CSS Dateien, mit den verschiedenen Werten für die font-size. Ich mache das so, dass ich meine Styles ganz normal schreibe, dann aber die Größenangabe für das body-Tag alleine in drei Dateien reinschreibe mit jeweils unterschiedlichen Werten. Die heißen dann size0.css, size1.css und size2.css Dann lade ich eine davon je nach Condition als erste und meine restlichen Styles danach, also etwa so: TYPOSCRIPT [globalVar = GP:Fsize<1] page.includeCSS.file1 = css/size0.css page.includeCSS.file1.title = Font Size Step 1 page.includeCSS.file1.import = 1 [END] [globalVar = GP:Fsize=1] page.includeCSS.file1 = css/size1.css page.includeCSS.file1.title = Font Size Step 2 page.includeCSS.file1.import = 1 [END] [globalVar = GP:Fsize=2] page.includeCSS.file1 = css/size2.css page.includeCSS.file1.title = Font Size Step 3 page.includeCSS.file1.import = 1 [END] page.includeCSS.file2 = css/basic_styles.css page.includeCSS.file2.title = Styles für die Bildschirmausgabe page.includeCSS.file2.import = 1 page.includeCSS.file3 = css/additional.css page.includeCSS.file3.title = Styles für die Bildschirmausgabe page.includeCSS.file3.import = 1 Fertig, damit haben wir eine Schriftgrößenauswahl, die über die ganze Seite hinweg mitgenommen wird. Da es eine normale GET-Variable ist, so wie der Sprachparameter auch, kann man das natürlich auch in RealURL einbinden. Ich bin jetzt erstmal in Urlaub und kann auf Fragen dazu nicht antworten, würde mich aber trotzdem über Hinweise, Anmerkungen und auch Fragen freuen. Viele Grüße Christian <TS> config.baseURL = http://www.kitsunet.de/ </TS>
Certified TYPO3 Integrator |
  |
|
|
Verfasst am: 30. 11. 2006 [11:48]
|
|
|
slack1982
Dabei seit: 06.07.2006
Beiträge: 88
|
Hi, erstmal einen dicken Lob, dass du es verwirklicht hast!!! Die Doku habe ich jetzt überflogen und werde es demnächst mal ausprobieren. Werde mich dann genauer fassen. Schönen Urlaub nocht! Gruß Alexander |
|
|
|
Verfasst am: 08. 12. 2006 [08:39]
|
|
|
tomgr
Dabei seit: 13.12.2005
Beiträge: 93
|
Moin, ich habe einmal versucht Dein Vergrößern/Verkleinern umzusetzen. Leider ohne Erfolg. Vielleicht kannst Du mir ja einen Tipp geben. Ich habe drei Marker gesetzt. Werden auch angezeigt (Ist nur zu Versuchszwecken-Verschönerung folgt). Anklicken kann man sie aber es passiert nichts. im SETUP TYPOSCRIPT config.linkVars = Fsize [globalVar = GP:Fsize<1] seite.includeCSS.file1 = fileadmin/css/size0.css seite.includeCSS.file1.title = Font Size Step 1 seite.includeCSS.file1.import = 1 [END] [globalVar = GP:Fsize=1] seite.includeCSS.file1 = fileadmin/css/size1.css seite.includeCSS.file1.title = Font Size Step 2 seite.includeCSS.file1.import = 1 [END] [globalVar = GP:Fsize=2] seite.includeCSS.file1 = fileadmin/css/size2.css seite.includeCSS.file1.title = Font Size Step 3 seite.includeCSS.file1.import = 1 [END] #die Marker: marks.fsizemenu = COA marks.fsizemenu.40 = HTML marks.fsizemenu.40.value = A marks.fsizemenu.40.value.typolink.parameter.data = page:uid marks.fsizemenu.40.value.typolink.additionalParams = &Fsize=0 marks.fsizemenu1 = COA marks.fsizemenu1.40 = HTML marks.fsizemenu1.40.value = A+ marks.fsizemenu1.40.value.typolink.parameter.data = page:uid marks.fsizemenu1.40.value.typolink.additionalParams = &Fsize=1 marks.fsizemenu2 = COA marks.fsizemenu2.40 = HTML marks.fsizemenu2.40.value = A++ marks.fsizemenu2.40.value.typolink.parameter.data = page:uid marks.fsizemenu2.40.value.typolink.additionalParams = &Fsize=2 |
|
|
|
Verfasst am: 22. 12. 2006 [14:57]
|
|
|
Kitsunet
Themenersteller
Dabei seit: 02.02.2006
Beiträge: 1895
|
So, war im Urlaub, daher hat es länger gedauert. Also auf den ersten Blick kann ich keinen Fehler entdecken. Hast du die entsprechenden CSS Dateien angelegt wie ich das beschrieben habe? Du darfst dann in deiner Haupt CSS Datei natürlich nicht die Größenangabe im Bodytag wieder überschreiben. Viele Grüße Christian <TS> config.baseURL = http://www.kitsunet.de/ </TS>
Certified TYPO3 Integrator |
|
|
|
Verfasst am: 29. 12. 2006 [17:21]
|
|
|
Mayon
Dabei seit: 23.01.2006
Beiträge: 33
|
 Hab den Code gerade ausprobiert! Nur ein Problem gibts: Nachdem man auf A+ oder A++ umgestellt hat kommt man nicht wieder in die Normale Schriftgröße. In der Url wird die neue size nämlich einfach hinten angehängt. startseite.html?&Fsize=0&Fsize=2 oder startseite.html?&Fsize=0&Fsize=1 |
|
|
|
Verfasst am: 01. 01. 2007 [16:17]
|
|
|
Kitsunet
Themenersteller
Dabei seit: 02.02.2006
Beiträge: 1895
|
Also normalerweise sollte das nur ein kosmetisches Problem sein und die Größen trotzdem richtig umgestellt werden, aber hiermit: config.uniqueLinkVars = 1 kannst du einstellen, das eine Variable nur einmal in der URL auftaucht. Dann sollte es klappen... Grüße Christian <TS> config.baseURL = http://www.kitsunet.de/ </TS>
Certified TYPO3 Integrator |
|
|
|
Verfasst am: 02. 01. 2007 [18:12]
|
|
|
Mayon
Dabei seit: 23.01.2006
Beiträge: 33
|
 SUPER EINFACH KLASSE Endlich eine tolle Möglichkeit die Schriftgröße zu switchen. Und vor allem klapptes in jedem Browser. D A N K E config.uniqueLinkVars = 1 war dann noch das Sahnehäubchen. Jetzt läuftes wie geschmiert. [Dieser Beitrag wurde 1mal bearbeitet, zuletzt am 02.01.2007 um 18:14.] |
|
|
|
Verfasst am: 26. 01. 2007 [09:04]
|
|
|
Arnie2001
Dabei seit: 01.11.2003
Beiträge: 269
|
Finde ich auch super, leider taucht ein Problem mit Realurl auf : Schriftgrößenveränderung Typoscript: TYPOSCRIPT temp.fsizemenu = COA temp.fsizemenu.wrap = <ul id="navigation2 class="sizemenu">|</ul> temp.fsizemenu.40 = HTML temp.fsizemenu.40.value = Normal A temp.fsizemenu.40.value.wrap = <li class="sizepunkt">|</li> temp.fsizemenu.40.value.typolink.parameter.data = page:uid temp.fsizemenu.40.value.typolink.additionalParams = &Fsize=0&no_cache=1&tx_ttnews[tt_news] temp.fsizemenu.50 < temp.fsizemenu.40 temp.fsizemenu.50.value = Mittel A+ temp.fsizemenu.50.value.wrap = <li class="sizepunkt">|</li> temp.fsizemenu.50.value.typolink.additionalParams = &Fsize=1&no_cache=1&tx_ttnews[tt_news] temp.fsizemenu.60 < temp.fsizemenu.40 temp.fsizemenu.60.value = Groß A++ temp.fsizemenu.60.value.wrap = <li class="sizepunkt">|</li> temp.fsizemenu.60.value.typolink.additionalParams = &Fsize=2&no_cache=1&tx_ttnews[tt_news] Problem: Der Link der generiert wird, zeigt immer nur articel.html an, er müsste aber beim Umschalten auf eine andere Schriftgröße bei der Singelansicht www.beispiel.de/veranstaltungen/news/article/unterhaltung.html anzeigen. Macht er aber nicht, sondern nur www.beispiel.de/veranstaltungen/news/article.html und damit kommt die Fehlermeldung : Keine news_id übergeben Bei den anderen Parameter/Variablen in der realurlconf.ph ging das so ja ganz gut: PHP array(
'GETvar' => 'Fsize',
'valueMap' => array(
'n' => '0',
'g' => '1', 'gg' => '2',
),
array(
'GETvar' => 'no_cache',
'valueMap' => array(
'nc' => 1,
),
'noMatch' => 'bypass',
),Wie muss ich den Link in Typoscript angeben , dass er in richtig generiert? Wäre echt super von Euch, schon mal danke im Vorraus! Man muss nicht alles wissen, jedoch sollte man wissen wo man Hilfe findet, bzw. in Erfahrung bringen wo es steht.
Quadronet Internetlösungen http://www.quadronet.de |
|
|
|
Verfasst am: 26. 01. 2007 [09:14]
|
|
|
Kitsunet
Themenersteller
Dabei seit: 02.02.2006
Beiträge: 1895
|
nimm mal überall aus den additionalParams die tx_ttnews raus. Also anstatt: temp.fsizemenu.40.value.typolink.additionalParams = &Fsize=0&no_cache=1&tx_ttnews[tt_news] dann: # temp.fsizemenu.40.value.typolink.additionalParams = &Fsize=0 Grüße Christian <TS> config.baseURL = http://www.kitsunet.de/ </TS>
Certified TYPO3 Integrator |
|
|
|
Verfasst am: 02. 02. 2007 [23:29]
|
|
|
gongo
Dabei seit: 04.08.2006
Beiträge: 84
|
das funktioniert soweit ganz gut. Nur hab ich auch realurl und ich frag mich wie denn die URL dort aussehen soll? Den Parameter fsize in eine leserliche URL zu setzen macht auch nicht wirklich Sinn. xxx.html?Fsize=1 wäre ja ok. Ich habe auch wieder das problem dass wenn ich die Seite wechsle die Schrift wieder klein wir Und dann frage ich mich auch warum in Typo3 solche Parameter immer über die URL mit geschleppt werden. Gibt es da nicht eventuell die Möglichkeit diese in einer SessionVariable abzulegen? [Dieser Beitrag wurde 2mal bearbeitet, zuletzt am 02.02.2007 um 23:34.] |
|
|