Schriftgrößen mit CSS und TYPO3 wählen

  • kitsunet kitsunet
    Flash Gordon
    0 x
    2524 Beiträge
    26 Hilfreiche Beiträge
    30. 11. 2006, 11:30

    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:

    [TS]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
    [/TS]

    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:

    [TS]

    [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

    [/TS]

    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

    config.baseURL = http://www.kitsunet.com/
    TYPO3 Flow und Neos Community Contact


  • bujaka bujaka
    T3PO
    0 x
    10 Beiträge
    0 Hilfreiche Beiträge
    04. 02. 2009, 15:52

    Mein Problem, hat sich dank tatgräftiger Unterstützung von Kitsunset in Luft aufgelöst!!!

    Ich hatte die Conditions innerhalb eines ausgeklammerten Bereiches stehen und somit ging da garnichts.

    DIE LÖSUNG

    Die Conditions habe ich jetzt mit vollem TS Pfad, ganz unten am Ende meines TS Skriptes eingebunden und siehe da!!! ES LÄUFT

    [TS][globalVar = GP:Fsize<1]
    page.includeCSS.file2 = fileadmin/templates/css/size0.css
    page.includeCSS.file2.title = Font Size Step 1
    page.includeCSS.file2.import = 1
    [END]

    [/TS]

    und so weiter.....

    Die Beste Unterstützung seit es Typo3 gibt!!!
    Danke Christian[/b][/TS]

  • tomgr tomgr
    R2-D2
    0 x
    107 Beiträge
    0 Hilfreiche Beiträge
    27. 03. 2009, 13:23

    Typo3 4.2.6

    Moin Alle.
    Ich würde da gerne mal mitmachen.
    So langsam bin ich am verzweifeln.
    Die Links reagieren, die Seite wird
    neu geladen und die Variablen korrekt übergeben.
    Aber kein Ergebnis.

    https://www.domaene.de/startseite.0.html?&Fsize=2 oder 1 oder 0

    Die css-Files sind vorhanden, mit verschiedenen Größenangeben.
    font-size wird vorher nicht in default.css oder einer anderen
    css-Datei innerhalb von body deklariert.

    Kann da vielleicht jemand helfen?

    Gruss, Tom.

    Auszug:
    [HTML]body, html {
    position: relative;
    text-align: center;
    border: 0;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    height: auto;
    background-color: #FFEECC;
    [/HTML]

    size2.css
    [HTML]body {
    font-size: 150%; #ein Beispiel
    }
    [/HTML]

    Mein TS.

    [TS]config.simulateStaticDocuments = 1
    config.linkVars = Fsize
    config.uniqueLinkVars = 1
    seite = page
    seite.typeNum = 0
    seite.bodyTag = <body>
    seite.shortcutIcon = fileadmin/icons/favicon1.ico

    seite.includeCSS.file1 = fileadmin/css/css_neu/default.css
    seite.includeCSS.file1.title = Ausgabe
    seite.includeCSS.file1.import = 1

    seite.includeCSS.file1.media = screen
    seite.includeCSS.smallads_css = fileadmin/css/ke_smallads.css

    [globalVar = GP:Fsize<1]
    seite.includeCSS.file2 = fileadmin/css/css-neu/size0.css
    seite.includeCSS.file2.media = all
    seite.includeCSS.file2.title = Step 1
    seite.includeCSS.file2.import = 1
    [END][globalVar = GP:Fsize=1]
    seite.includeCSS.file2 = fileadmin/css/css-neu/size1.css
    seite.includeCSS.file2.media = all
    seite.includeCSS.file2.title = Step 2
    seite.includeCSS.file2.import = 1
    [END]

    [globalVar = GP:Fsize=2]
    seite.includeCSS.file2 = fileadmin/css/css-neu/size2.css
    seite.includeCSS.file2.media = all
    seite.includeCSS.file2.title = Step 3
    seite.includeCSS.file2.import = 1
    [END][/TS]

    Die Marker stehen innerhalb von seite.20

    [TS]marks.fsizemenu = COA
    marks.fsizemenu.40 = HTML
    marks.fsizemenu.40.value = A&nbsp;
    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+&nbsp;
    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++&nbsp;
    marks.fsizemenu2.40.value.typolink.parameter.data = page:uid
    marks.fsizemenu2.40.value.typolink.additionalParams = &Fsize=2

    [/TS]

  • kitsunet kitsunet
    Flash Gordon
    0 x
    2524 Beiträge
    26 Hilfreiche Beiträge
    27. 03. 2009, 16:58

    Hallo dein Problem kommt durch simulateStatic zustande, allerdings weiß ich nicht ganz sicher wie es gelöst werden kann, da ich simulateStatic nie benutze. Es wurde auch schon mal auf Seite 2 diskutiert.

    config.baseURL = http://www.kitsunet.com/
    TYPO3 Flow und Neos Community Contact

  • tomgr tomgr
    R2-D2
    0 x
    107 Beiträge
    0 Hilfreiche Beiträge
    28. 03. 2009, 08:59

    Moin
    Auch wenn ich "config.simulateStaticDocuments = 0" einstelle passiert nichts.

    https://www.domaene.de/index.php?id=startseite&Fsize=2 <- die Endung ist richtig.

    Gibt es die Möglichkeit irgendwo rauszufinden ob Typo3 den font-size-Tag innerhalb von body selbst übergibt und meine css überschreibt?
    (kein css_styled_content)

    Gruss, Tom.

  • kitsunet kitsunet
    Flash Gordon
    0 x
    2524 Beiträge
    26 Hilfreiche Beiträge
    28. 03. 2009, 09:44

    Mit welchem Browser guckst du? Ich habe mal die Erfahrung gemacht, dass der IE bei zwei oder mehr CSS Dateien die mit import eingebunden werden etwas komisch reagiert. Probier mal alle ohne import = 1 einzubinden.

    Du kannst doch einfach in dein HTML / CSS gucken ob irgendwo sonst die font-size geändert wird. Hilfreich ist dabei z.B. die Web Developer Toolbar im Firefox (addon).

    config.baseURL = http://www.kitsunet.com/
    TYPO3 Flow und Neos Community Contact

  • tomgr tomgr
    R2-D2
    0 x
    107 Beiträge
    0 Hilfreiche Beiträge
    28. 03. 2009, 15:04

    Ich arbeite zu 99% mit dem Firefox.
    Die Toolbar habe ich auch im Einsatz.
    Das ist zu sehen in View CSS:
    (Auszug /index.php?id=startseite&Fsize=2 <- font-size: 150%

    p, ul, ol { font-size: 11px; }

    p.bodytext { font-face: Verdana, Arial, sans-serif; font-size: 11px; color: #000000; line-height: 14px; padding-bottom: 6px;}

    Das dürfte doch nicht stören, oder?
    Hab ich auch schon entfernt, nichts passiert.

    Meine drei externen css files sind gar nicht enthalten.
    Entweder wird der font-size Tag nicht überschrieben oder Typo findet die css-Files nicht.
    Ich habe in der size2.css Datei mal mehrere styles eingebaut, da reagiert gar nichts auch nicht im IE.
    Ich habe immer Java vermieden, aber irgendwie komme ich da wohl nicht drum herum.

  • kitsunet kitsunet
    Flash Gordon
    0 x
    2524 Beiträge
    26 Hilfreiche Beiträge
    28. 03. 2009, 15:36

    Die Anleitung sagt ganz deutlich, dass KEINE Schriftgröße in px angegeben werden darf. Damit funktioniert es nicht. Du musst die Schriftgrößen in em angeben.
    Hast du versucht das import trotzdem mal wegzunehmen?

    Ich sehe gerade du schreibst den Pfad zu den CSS Dateien unterschiedlich:

    fileadmin/css/css-neu/size0.css
    vs.
    fileadmin/css/css_neu/default.css

    einmal Bindestrich und einmal Unterstrich, wird ja nur eins von beidem stimmen...

    config.baseURL = http://www.kitsunet.com/
    TYPO3 Flow und Neos Community Contact

  • tomgr tomgr
    R2-D2
    0 x
    107 Beiträge
    0 Hilfreiche Beiträge
    30. 03. 2009, 07:39

    Moin
    Du hast recht, mit "px" geht's nicht.
    Aber auch sonst gefällt mir das alles nicht so richtig.
    Für ein vernünftiges Layout sollten alle Elemente einer
    Webseite größenverstellbar sein.
    Das werde ich mir hier nicht mehr antun.
    Vielleicht für die nächste Webseite.

    Bis dahin:
    Strg und +/- geht auch.

    Danke für die Hilfe.
    Gruss, Tom.

  • 0 x
    15 Beiträge
    0 Hilfreiche Beiträge
    25. 02. 2010, 15:46

    Hallo zusammen,

    könnt Ihr mir helfen?

    Bei mir erscheinen die Marker im Frontend erst gar nicht, was mach ich falsch?

    Setup:

    ### Typo3-Seite definieren ###
    ##################################
    page = PAGE

    ### CSS-Files einbinden ###
    ###############################
    page.includeCSS.design = fileadmin/css/layout.css
    page.includeCSS.navi = fileadmin/css/navi.css

    ### Designvorlage einbinden ###
    ###################################
    page.10 = TEMPLATE
    page.10 {
    template = FILE
    template.file = fileadmin/layout.html
    workOnSubpart = DOCUMENT_BODY
    }

    ### Allgemeine Konfiguration ###
    ################################
    config {
    xhtml_cleaning = all
    no_cache = 1
    locale_all = de_DE.utf8
    htmlTag_langKey = de-DE
    metaCharset = utf-8
    xmlprologue = none
    doctype = xhtml_trans
    language = de
    admPanel = 0
    spamProtectEmailAddresses_atSubst = (at)
    spamProtectEmailAddresses = ascii

    ### Schriftgröße ändern ###
    linkVars = Fsize

    }

    ### Schriftgröße ändern ###
    ###############################

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

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

    #die Marker:

    page.50.marks.fsizemenu = COA
    page.50.marks.fsizemenu.40 = HTML
    page.50.marks.fsizemenu.40.value = A
    page.50.marks.fsizemenu.40.value.typolink.parameter.data = page:uid
    page.50.marks.fsizemenu.40.value.typolink.additionalParams = &Fsize=0

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

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

    ### Inhaltsbereich auslesen ###
    ###############################
    page.10.marks.INHALT < styles.content.get
    page.10.subparts.NAVI < tmp.HAUPTNAVI
    page.10.marks.BREADCRUMP < tmp.KLICKPFAD
    page.10.marks.FOTO < styles.content.getLeft

    ### Fussnavigation ###
    ######################
    page.10 {
    marks.FOOTERNAV = HMENU
    marks.FOOTERNAV {
    special = directory
    special.value = 15
    1 = TMENU
    1.NO = 1
    1.NO.linkWrap = &nbsp; |*| &nbsp;&nbsp;&#x007C;&nbsp;&nbsp; |*| &nbsp;&nbsp;&#x007C;&nbsp;&nbsp; |*| &nbsp;|
    }
    }

    ### Suchfeld oben rechts einbinden ###
    ######################################
    page.10.marks.SUCHE >
    page.10.marks.SUCHE < plugin.tx_macinasearchbox_pi1
    page.10.marks.SUCHE.pidSearchpage = 41
    page.10.marks.SUCHE.templateFile = EXT:macina_searchbox/pi1/template.htm

    Gruß

  • kitsunet kitsunet
    Flash Gordon
    0 x
    2524 Beiträge
    26 Hilfreiche Beiträge
    26. 02. 2010, 10:32

    Beim nächsten Mal bitte die TS Codebox benutzen, dann ließt es sich etwas einfacher...

    Du hast die Marker ja an Objektnummern gesetzt, die gar nicht existieren.

    [TS]..snip..
    page.50.marks.fsizemenu
    ..snip..
    page.60.marks.fsizemenu1
    ..snip..
    page.70.marks.fsizemenu2
    [/TS]

    Muss alles in page.10.marks
    Dann sollte es klappen, wenn die Marker auch in deinem Template existieren.

    config.baseURL = http://www.kitsunet.com/
    TYPO3 Flow und Neos Community Contact