Schriftgrößen mit CSS und TYPO3 wählen

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

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

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

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

😢
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

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

😃 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.

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!

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?

eine Anleitung wie man das Schriftvergrößern mit RealURL nutzt wäre toll :o

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?

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!

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

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',
),

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

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!

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

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?

Eine URL wäre nicht schlecht um das aus erster Hand zu sehen. Kannst du mir auch per PM schicken...

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.