Zum Inhalt springen

Schriftgrößen mit CSS und TYPO3 wählen

Erstellt am 30. November 2006 · 46 Antworten · letzte Antwort am 28. März 2011 · Seite 1 von 3

Tags: HTML & CSS, Tipp

Arnie2001 ·

Finde ich auch super, leider taucht ein Problem mit Realurl auf :

Schriftgrößenveränderung 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:

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!

Unbekannter Benutzer · · Beste Antwort

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

gongo ·

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?

Arnie2001 ·
Kitsunet schrieb

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

Habe ich auch schon ausprobiert, geht leider nicht. Es wird immer "keine News id übergeben" angezeigt.

Hat jemand ne Lösung?

Arnie2001 ·

Hallo Leute, im Rahmen der Entwicklung von www.edesheim.de hat sich mein Problem erledigt.

Hier könnt Ihr das Ganze mit tt_news und anderen Extension sehen:

http://www.edesheim.de

Da ich es nicht abschätzen kann, ob die Seite wirklich barrierefrei ist, wäre ein Rückläufer nicht schlecht!!!!

Danke an Alle!

Gruß Arnie!

leuny ·

Hi,

das script funktioniert. ich möchte es aber jetzt gerne so modifizieren, dass ich zwei symbole verwende um die schrift zu verkleinern oder zu vergrößern (also nicht mehr alle stufen anzeigen).

bin typo3 dummy. in php könnte man eine variable definieren, die wenn man auf den schriftgrößer-button klickt um 1 erhöht wird und dann die entsprechende css-datei ausgewählt wird. beim schriftkleiner-buttom entsprechend umgekehrt.

könnt ihr mir da helfen?

mfg
Leuny

Arnie2001 ·

Hier mal das Ganze mit funktionierenden Links für RealURL und tt_news und Konsorten:

temp.fsizemenu = COA
temp.fsizemenu {
wrap = <ul>|</ul>
40 = HTML
40 {
value = Normal A
value.wrap = <li class="sizepunkt">|</li>
value.typolink.parameter.data = page:uid
value.typolink.additionalParams = &Fsize=0
value.typolink.addQueryString = 1
value.typolink.addQueryString.method = GET
}
50 < temp.fsizemenu.40
50 {
value = Mittel A+
value.wrap = <li class="sizepunkt">|</li>
value.typolink.additionalParams = &Fsize=1
value.typolink.addQueryString = 1
value.typolink.addQueryString.method = GET
}
60 < temp.fsizemenu.40
60 {
value = Groß A++
value.wrap = <li class="sizepunkt">|</li>
value.typolink.additionalParams = &Fsize=2
value.typolink.addQueryString = 1
value.typolink.addQueryString.method = GET
}
70 < temp.fsizemenu.40
70 {
value = Handy- / Textversion
value.wrap = <li class="sizepunkt">|</li>
value.typolink.additionalParams = &Fsize=3
value.typolink.addQueryString = 1
value.typolink.addQueryString.method = GET
}

}

Die Ergänzung der realurlconf.php
array(
'GETvar' => 'Fsize',
'valueMap' => array(
'n' => '0',
'g' => '1',
'gg'=> '2',
'nt'=> '3',

),
'noMatch' => 'bypass',
),

Unbekannter Benutzer ·

Danke das du das "rund" gemacht hast! Bin hier gerade mit so vielen anderen Sachen beschäftigt, dass ich nicht dazu gekommen bin hier mal ein Update zu posten.

Grüße

Christian

jens ·

Hallo zusammen!

Erst einmal Danke für die Anleitung.
Anhand des Beispiels von Kitsunet habe ich versucht den Font-Resizer auf meiner Seite zu integrieren. Leider nicht erfolgreich. Ich bin jetzt schon seit Stunden am Überlegen wo ich den Fehler mache...

###Font size
config.linkVars = Fsize
config.uniqueLinkVars = 1

[globalVar = GP:Fsize<1]
seite.includeCSS.file1 = fileadmin/size0.css
seite.includeCSS.file1.title = Font Size Step 1
seite.includeCSS.file1.import = 1
[END]

[globalVar = GP:Fsize=1]
seite.includeCSS.file1 = fileadmin/size1.css
seite.includeCSS.file1.title = Font Size Step 2
seite.includeCSS.file1.import = 1
[END]

[globalVar = GP:Fsize=2]
seite.includeCSS.file1 = fileadmin/size2.css
seite.includeCSS.file1.title = Font Size Step 3
seite.includeCSS.file1.import = 1
[END]

###Hier wird die MAIN-CSS Datei eingebunden
page.includeCSS.file2 = fileadmin/style-main.css
page.includeCSS.file2.title = Styles für die Bildschirmausgabe
page.includeCSS.file2.import = 1

[...]

###Marker Font Size
marks.SIZE0 = COA
marks.SIZE0.40 = HTML
marks.SIZE0.40.value = A
marks.SIZE0.40.value.typolink.parameter.data = page:uid
marks.SIZE0.40.value.typolink.additionalParams = &Fsize=0

marks.SIZE1 = COA
marks.SIZE1.40 = HTML
marks.SIZE1.40.value = A+
marks.SIZE1.40.value.typolink.parameter.data = page:uid
marks.SIZE1.40.value.typolink.additionalParams = &Fsize=1

marks.SIZE2 = COA
marks.SIZE2.40 = HTML
marks.SIZE2.40.value = A++
marks.SIZE2.40.value.typolink.parameter.data = page:uid
marks.SIZE2.40.value.typolink.additionalParams = &Fsize=2

Die Marker werden wie geplant ersetzt und auch beim Klick auf A++ wird diese Endung (.html?&Fsize=2) angehängt. Nur leider ändert sich am Schriftbild nichts.
Im style-main.css befinden sich sämtliche Styles. In den Styles size0.css, size1.css und size2.css nur der Body-Tag mit

body
{
font-size:120%;
}

Jeweils eine andere Größe.

Sieht jemand den Fehler?

BEST!

Unbekannter Benutzer ·

Also du benutzt wahrscheinlich simulateStaticDocuments, oder?

Du hast das hier geschrieben:

..nd auch beim Klick auf A++ wird diese Endung (.html?&Fsize=2) angehängt.

.html?&Fsize=2 kann aber nicht funktionieren... Es muss in diesem Fall:

.html?Fsize=2 rauskommen... Also versuch mal bei diesen Zeilen hier:

marks.SIZE0.40.value.typolink.additionalParams = &Fsize=0 jeweils das & rauszunehmen...

Viele Grüße
Christian

jens ·

Hallo Kitsunet!

Danke für deine Anleitung und die schnelle Antwort.

Ja, ich benutze simulateStaticDocuments. "&" habe ich jetzt mal rausgenommen.
Leider ist das Problem damit nicht behoben. Jetzt wird gar nichts mehr angehängt.
Wenn ich die Endung manuell in der Adresszeile des Browsers anfüge geschieht auch nichts.
Hast du vielleicht noch eine Idee?

Unbekannter Benutzer ·

Hallo und einen schönen guten Abend.

Ich habe dasselbe Problem wie Jens.
Gibt es denn bereits dazu eine Lösung?

Ich nutze auch simulateStaticDocuments und
wenn ich das Ampersand entferne wird nichts mehr angehangen.

Vielen Dank für die Hilfe.

Grüße S.

Morgenthau ·

Hallo, zuerst mal danke für diese gute Methode, die Schriftgrößen einfach zu verändern.

Ich habe jedoch ein Problem mit RealURL und der realurlconf.php. Mit der habe ich keinerlei Erfahrung. Google hat mir erklärt, dass ich sie ins Verzeichnis typo3conf legen muss und per

<?php include(PATH_typo3conf.'realurlconf.php'); php?>

in der localconf.php einbinden muss.

Wenn ich allerdings in der reaulurlconf wie von Arnie2001 beschrieben den Code

array(
'GETvar' => 'Fsize',
'valueMap' => array(
'n' => '0',
'g' => '1',
'gg'=> '2',
'nt'=> '3',

),
'noMatch' => 'bypass',
),

einfüge, dann bleibt meine Website weiß und zeigt gar nichts mehr an. Wenn ich die realurlconf nicht einbinde, funktioniert die Größenverändernung, allerdings wird sie nicht weitergegeben, d.h. wenn ich auf eine andere Seite klicke, wird die wieder in der Standardschriftgröße dargestellt. Was mache ich falsch?

Hier mein TS im Setup:

# Schriftgrößen:

[globalVar = GP:Fsize<1]
page.headerData.40 = TEXT
page.headerData.40.value =  <link href="fileadmin/templates/style-m.css" rel="stylesheet" type="text/css" />
[END]

[globalVar = GP:Fsize=1]
page.headerData.40 = TEXT
page.headerData.40.value =  <link href="fileadmin/templates/style-l.css" rel="stylesheet" type="text/css" />
[END]

[globalVar = GP:Fsize=2]
page.headerData.40 = TEXT
page.headerData.40.value =  <link href="fileadmin/templates/style-xl.css" rel="stylesheet" type="text/css" />
[END]

lib.schriftzoom = COA
lib.schriftzoom {
wrap = Schrift: |
40 = HTML
40 {
value = normal
value.wrap = &nbsp;|
value.typolink.parameter.data = page:uid
value.typolink.additionalParams = &Fsize=0
value.typolink.addQueryString = 1
value.typolink.addQueryString.method = GET
}
50 < lib.schriftzoom.40
50 {
value = gro&szlig;
value.wrap = &nbsp;&middot;&nbsp; |
value.typolink.additionalParams = &Fsize=1
value.typolink.addQueryString = 1
value.typolink.addQueryString.method = GET
}
60 < lib.schriftzoom.40
60 {
value = gr&ouml;&szlig;er
value.wrap = &nbsp;&middot;&nbsp; |
value.typolink.additionalParams = &Fsize=2
value.typolink.addQueryString = 1
value.typolink.addQueryString.method = GET
}

PS: Ich bin eher Gestalter als Programmierer, verzeiht mir also bitte etwaige blöde Fragen.

Unbekannter Benutzer ·

Hallo,

also das die Auswahl von einer Seite zur nächsten nicht übernommen wird, hat nichts mit RealURL zu tun, sondern sollte auch ohne funktionieren. Ich vermute aber mal, dass du den Code an der falschen Stelle in deine realurlconf.php eingebaut hast. Poste doch mal deine komplette RealURL Config.

Nun aber zu deinem eigentlichen Problem. Du musst darauf achten, dass du config.linkVars = Fsize setzt (siehe mein Code auf der ersten Seite), damit der Parameter auf weiteren Seiten übernommen werden. Außerdem müssen deine Links natürlich in TYPO3 erzeugt werden, d.h. wenn du einfach in dein Template schreibst <a href="index.php?id=3" /> dann werden da die Parameter natürlich nicht übernommen...

Grüße
Christian

Morgenthau ·

Ahh! Gut, dass Du mich nochmal auf das config.linkVars = Fsize hingewiesen hast! Ich hatte es in die Constants geschrieben. Jetzt, wo ich ins Setup gesetzt habe, klappts!

Die Sache mit der RealURL ist nicht weiter wichtig. Ich finde es nicht weiter schlimm, wenn in der Adresszeile die Variable Fsize übergeben wird. Trotzdem der Vollständigkeit halber: Da ich keine realurlconf gefunden hatte, hatte ich eine neue angelegt und dort dann den Code von Arnie2001 reinkopiert.

Danke nochmal für Deine Hilfe!

flowyn33 ·

Hallo,

erstmal vielen Dank für die super Erklärung. Leider bin ich noch auf ein Problem gestoßen welches hier anscheinend noch keiner hatte.

Ich habe Bilder genommen statt Buchstaben und möchte diese nun bei RO und ACT austauschen lassen.

Gibt es da eine Möglichkeit?

Grüße
Florian

ric1893 ·

Super Tutorial! Funzt einwandfrei und ist genau das, was ich gesucht hatte.
Besten Dank an den Ersteller.

Gruß