Suche
Teilen
startseite » forum

Schriftgrößen mit CSS und TYPO3 wählen

  • kitsunet kitsunet
    Flash Gordon
    0 x
    2559 Beiträge
    27 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
    Release Manager TYPO3 Neos 1.1
    Ich habe Probleme mit den PMs hier, also schreibt mir bitte eine Mail oder über Twitter!

  • 0 x
    15 Beiträge
    0 Hilfreiche Beiträge
    11. 03. 2010, 10:37

    Kurze Ergänzung:

    Der Bereich "Plugin inserted" wird weggelassen.

    [TS]<div id="content">

    <!-- CONTENT ELEMENT, uid:161/text [begin]-->
    <div id="c161" class="csc-default">
    <!-- Header: [begin]-->
    <div class="csc-header csc-header-n1"><h1 class="csc-firstHeader">AKTUELLES</h1></div>
    <!-- Header: [end]-->

    </div>
    <!-- CONTENT ELEMENT, uid:161/text [end]-->

    <!-- CONTENT ELEMENT, uid:163/list [begin]-->
    <div id="c163" class="csc-default">
    <!-- Plugin inserted: [begin]-->

    <!-- Plugin inserted: [end]-->
    </div>
    <!-- CONTENT ELEMENT, uid:163/list [end]-->

    </div>

    </div>
    [/TS]

    Hat einer eine Idee?

  • kitsunet kitsunet
    Flash Gordon
    0 x
    2559 Beiträge
    27 Hilfreiche Beiträge
    11. 03. 2010, 11:00

    Du musst bei den Links die aktuelle News ID wieder anhängen lassen. Den entsprechenden Code gibts auch hier im Thread.

    config.baseURL = http://www.kitsunet.com/
    TYPO3 Flow und Neos Community Contact
    Release Manager TYPO3 Neos 1.1
    Ich habe Probleme mit den PMs hier, also schreibt mir bitte eine Mail oder über Twitter!

  • 0 x
    15 Beiträge
    0 Hilfreiche Beiträge
    11. 03. 2010, 14:29

    Hallo Kitsunet, danke für den Tip...leider weiß ich nicht genau wo ich etwas änder muss.

    Das & hab ich mal rausgenommen bei additionalParams = &Fsize=0. Funzt aber auch leider nicht mehr danach.

    Vielen Dank für die Hilfe

  • SBgerman SBgerman
    Padawan
    0 x
    35 Beiträge
    0 Hilfreiche Beiträge
    28. 03. 2011, 13:18

    Hallo,

    Ich hab in meiner Seite auch, per TypoScript, 3 Links mit Schriftgrößenveränderung eingebaut.

    Klappt auch alles: nur will ich jetzt die Seite zweisprachig aufbauen (was auch klappt) und weiterhin die Schriftgrößenveränderung für die 2. Sprache nutzen.

    nicht über die Kommentare wundern...ist meine eigene, geistige Sprache ;)

    1. # Default PAGE object:
    2. page = PAGE
    3.  
    4. config {
    5.   language = de
    6.   locale_all = de_DE
    7.   doctype = xhtml_trans
    8.   xmlprologue = none
    9.   metaCharset = utf-8
    10.   htmlTag_langKey = de-DE
    11.   linkVars = L
    12.   sys_language_uid = 0
    13.  
    14.  
    15.  ### CoolURI ###
    16.   #simulateStaticDocuments = 0
    17.  # baseURL = http://www.meineDomain.de/
    18.   #Die Basisdomain
    19.   #tx_cooluri_enable = 1
    20.   #Optional alte gespeicherte Links zu neuen Weiterleiten
    21.   redirectOldLinksToNew = 1
    22.  
    23.   ### Schriftgröße ändern ###
    24.   linkVars = Fsize
    25.   uniqueLinkVars = 1
    26.  
    27.  
    28. }  
    29.  
    30. # wenn der globale Parameter L auf 1 steht:
    31. [globalVar = GP:L = 1]
    32. config.sys_language_uid = 1
    33. config.language = en
    34. config.locale_all = en_UK
    35. config.htmlTag_langKey = en-UK
    36. [global]
    37.  
    38.  
    39.  
    40. ###Hier wird die MAIN-CSS Datei eingebunden
    41. #wichtig: file1 (die CSS Hauptdateieinbindung) vor file2
    42. #->sonst überschreibt file1 (Haupt-CSS-Datei) die anderen File2 Dateien
    43. #und es ist nur die Haupt-Css Datei wirksam)
    44. page.includeCSS.file1 = fileadmin/template/malerei.css
    45. page.includeCSS.file1.title = Styles für die Bildschirmausgabe
    46. page.includeCSS.file1.import = 1
    47.  
    48.  
    49. ### Schriftgröße ändern ###
    50. ###############################
    51.  
    52. [globalVar = GP:Fsize<1]
    53. page.includeCSS.file2 = fileadmin/template/malerei.css
    54. page.includeCSS.file2.title = Font Size Step 1
    55. page.includeCSS.file2.import = 1
    56. [END]
    57.  
    58. [globalVar = GP:Fsize=1]
    59. page.includeCSS.file2 = fileadmin/template/malerei2.css
    60. page.includeCSS.file2.title = Font Size Step 2
    61. page.includeCSS.file2.import = 1
    62. [END]
    63.  
    64. [globalVar = GP:Fsize=2]
    65. page.includeCSS.file2 = fileadmin/template/malerei3.css
    66. page.includeCSS.file2.title = Font Size Step 3
    67. page.includeCSS.file2.import = 1
    68. [END]
    69.  
    70.  
    71.  
    72.  
    73.  
    74. # Indizieren der Website aktivieren
    75. page.config.index_enable = 1
    76.  
    77.  
    78. #page.includeCSS {
    79.  #    file10 = fileadmin/template/malerei.css
    80.   #   file10.media = screen
    81.    #  }
    82.  
    83. page.10 = TEMPLATE
    84. page.10 {
    85.    template = FILE
    86.    template.file =  fileadmin/template/malerei.htm
    87.    workOnSubpart = DOCUMENT_BODY
    88.  
    89.    subparts.INHALT < styles.content.get
    90.  
    91.  #!!!für 2.Sprache
    92.   select.languageField = sys_language_uid
    93.  
    94.  
    95.  
    96.  
    97. #die Marker:
    98.  
    99. marks.fsizemenu = COA
    100. marks.fsizemenu.40 = HTML
    101. marks.fsizemenu.40.value = A
    102. marks.fsizemenu.40.value.typolink.parameter.data = page:uid
    103. marks.fsizemenu.40.value.typolink.additionalParams = &Fsize=0
    104. marks.fsizemenu.40.value.typolink.ATagParams = title="Schriftgröße: normal"
    105.  
    106. marks.fsizemenu1 = COA
    107. marks.fsizemenu1.50 = HTML
    108. marks.fsizemenu1.50.value = A+
    109. marks.fsizemenu1.50.value.typolink.parameter.data = page:uid
    110. marks.fsizemenu1.50.value.typolink.additionalParams = &Fsize=1
    111. marks.fsizemenu1.50.value.typolink.ATagParams = title="Schriftgröße: groß"
    112.  
    113. marks.fsizemenu2 = COA
    114. marks.fsizemenu2.60 = HTML
    115. marks.fsizemenu2.60.value = A++
    116. marks.fsizemenu2.60.value.typolink.parameter.data = page:uid
    117. marks.fsizemenu2.60.value.typolink.additionalParams = &Fsize=2
    118. marks.fsizemenu2.60.value.typolink.ATagParams = title="Schriftgröße: sehr groß"  
    119.  
    120.  
    121.    #deutsch | english
    122.   subparts.language = COA
    123.    subparts.language {
    124.       10 = TEXT
    125.       10.wrap = <!!=.?=|=>einfach</a>
    126.       10.field = uid
    127.       20 = TEXT
    128.       20.value = &nbsp;|&nbsp;
    129.       30 = TEXT
    130.       30.wrap = <!!=.?=|=>schwer</a>
    131.       30.field = uid
    132.     }
    133.  
    134.  
    135.  
    136.  
    137.  
    138.    marks.FOOTER = COA
    139.    marks.FOOTER {
    140.       10 = TEXT
    141.       10.field = title
    142.       20 = TEXT
    143.       20.value = &nbsp;&copy; 2010 faktura.design
    144.       20.wrap = <a href ="http://www.faktura-berlin.de/"> | </a>
    145.  
    146.    }
    147.  
    148.  
    149.   subparts.GLOBALS = HMENU
    150.    subparts.GLOBALS {
    151.       special = list
    152.       special.value = 7,8,13
    153.       1 = TMENU
    154.     #  1.NO.stdWrap.case=lower
    155.       1.NO.linkWrap = | |*| &nbsp; |
    156.    }
    157.  
    158.  
    159.    subparts.NAVIGATION = HMENU
    160.    subparts.NAVIGATION {
    161.      #excludeUidList = 7,8,13
    162.         wrap = <ul class="navi"> | </ul>
    163.         1 = TMENU
    164.         1.NO.wrapItemAndSub = <li> | </li>
    165.  
    166.      #CUR Zustand der ersten Ebene
    167.  
    168.      1.CUR = 1  
    169.      1.CUR.wrapItemAndSub = <li> | </li>
    170.      1.CUR.ATagParams = class="active"
    171.  
    172.      #Die zweite Ebene:
    173.  # 2 = TMENU
    174.     #Die zweite Ebene:
    175.   2 = TMENU
    176.   2.wrap = <ul class="subnavi"> | </ul>
    177.   2.NO.wrapItemAndSub = <li> | </li>
    178.   }
    179. }

  • kitsunet kitsunet
    Flash Gordon
    0 x
    2559 Beiträge
    27 Hilfreiche Beiträge
    28. 03. 2011, 13:20

    Du überschreibst dir deine linkVars:

    linkVars = L
    linkVars = Fsize

    =>

    linkVars = L,Fsize

    config.baseURL = http://www.kitsunet.com/
    TYPO3 Flow und Neos Community Contact
    Release Manager TYPO3 Neos 1.1
    Ich habe Probleme mit den PMs hier, also schreibt mir bitte eine Mail oder über Twitter!

  • SBgerman SBgerman
    Padawan
    0 x
    35 Beiträge
    0 Hilfreiche Beiträge
    28. 03. 2011, 13:32

    Vielen Dank!
    Es hat geklappt!

Präsentiert von