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 2 von 3

Tags: HTML & CSS, Tipp

Zur besten Antwort

bujaka ·

Hallo Kitsunet.
Vielen Dank für den Tipp!
Hab die Reihenfolge geändert, leider ohne Erfolg.

Die Schriftgröße ist dann die der size2.css(95%), schon bevor ich auf A+ oder A++ gedrückt habe!.
Ich hab die size0.css mal zum Test mit der size2.css getauscht und nun zeigt er die size0.css(75%) an. Wenn ich dann auf A,A+ oder A++ drücke passiert garnichts!

        includeCSS.file1 = fileadmin/styles.css
	includeCSS.file1.title = Styles für die Bildschirmausgabe 
	includeCSS.file1.import = 1 
	
        [globalVar = GP:Fsize<1]
	includeCSS.file2 = fileadmin/templates/css/size2.css
	includeCSS.file2.title = Font Size Step 1
	includeCSS.file2.import = 1
	[END]
 
	[globalVar = GP:Fsize=1]
	includeCSS.file2 = fileadmin/templates/css/size1.css
	includeCSS.file2.title = Font Size Step 2
	includeCSS.file2.import = 1
	[END]
 
	[globalVar = GP:Fsize=2]
	includeCSS.file2 = fileadmin/templates/css/size0.css
	includeCSS.file2.title = Font Size Step 3
	includeCSS.file2.import = 1
	[END]

# my marks

	fsizemenu = COA
	fsizemenu.40 = HTML
	fsizemenu.40.value = A
	fsizemenu.40.value.typolink.parameter.data = page:uid
	fsizemenu.40.value.typolink.additionalParams = &Fsize=0
 
	fsizemenu1 = COA
	fsizemenu1.40 = HTML
	fsizemenu1.40.value = A+
	fsizemenu1.40.value.typolink.parameter.data = page:uid
	fsizemenu1.40.value.typolink.additionalParams = &Fsize=1
 
	fsizemenu2 = COA
	fsizemenu2.40 = HTML
	fsizemenu2.40.value = A++
	fsizemenu2.40.value.typolink.parameter.data = page:uid
	fsizemenu2.40.value.typolink.additionalParams = &Fsize=2
bujaka ·

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. #angry#

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 😃

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

und so weiter.....

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

tomgr ·

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:

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

size2.css

body {
font-size: 150%; #ein Beispiel
}

Mein 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]

Die Marker stehen innerhalb von seite.20

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
Unbekannter Benutzer ·

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.

Unbekannter Benutzer ·

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

tomgr ·

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.

Unbekannter Benutzer ·

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: :o

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

tomgr ·

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.

kenzo2008 ·

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ß

Unbekannter Benutzer ·

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.

..snip..
page.50.marks.fsizemenu
..snip..
page.60.marks.fsizemenu1
..snip..
page.70.marks.fsizemenu2

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

kenzo2008 ·

Vielen Dank für die Hilfe...hat geklappt :-)

Jetzt hab ich nen neues Problem. Sobald ich die Schriftgröße verändere, werden die News aus tt_news nicht mehr angezeigt.

Hat einer schon mal dieses Problem gehabt? Zusätzlich verwende ich CoolURI.

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


### CSS-Files einbinden ###
###############################

page.includeCSS.design = fileadmin/css/layout.css
page.includeCSS.navi = fileadmin/css/navi.css
page.includeCSS.news = fileadmin/css/tt_news_v3_styles.css

page.shortcutIcon = fileadmin/favicon.ico


### 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 
    
  ### CoolURI ###
  simulateStaticDocuments = 0
  baseURL = http://www.meineDomain.de/
  #Die Basisdomain
  tx_cooluri_enable = 1
  #Optional alte gespeicherte Links zu neuen Weiterleiten
  redirectOldLinksToNew = 1
    
  ### Schriftgröße ändern ###
  linkVars = Fsize
  uniqueLinkVars = 1
  
}


### 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.10.marks.fsizemenu = COA
page.10.marks.fsizemenu.40 = HTML
page.10.marks.fsizemenu.40.value = A
page.10.marks.fsizemenu.40.value.typolink.parameter.data = page:uid
page.10.marks.fsizemenu.40.value.typolink.additionalParams = &Fsize=0
page.10.marks.fsizemenu.40.value.typolink.ATagParams = title="Schriftgröße: normal"

page.10.marks.fsizemenu1 = COA
page.10.marks.fsizemenu1.40 = HTML
page.10.marks.fsizemenu1.40.value = A+
page.10.marks.fsizemenu1.40.value.typolink.parameter.data = page:uid
page.10.marks.fsizemenu1.40.value.typolink.additionalParams = &Fsize=1
page.10.marks.fsizemenu1.40.value.typolink.ATagParams = title="Schriftgröße: groß"

page.10.marks.fsizemenu2 = COA
page.10.marks.fsizemenu2.40 = HTML
page.10.marks.fsizemenu2.40.value = A++
page.10.marks.fsizemenu2.40.value.typolink.parameter.data = page:uid
page.10.marks.fsizemenu2.40.value.typolink.additionalParams = &Fsize=2
page.10.marks.fsizemenu2.40.value.typolink.ATagParams = title="Schriftgröße: sehr groß"

### 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


### Aktuelle News einbinden ###
###############################
plugin.tt_news {
  datetimeDaysToArchive = 120
  displayList.date_stdWrap.strftime =  %d.%m.%Y
  displaySingle.age_stdWrap.age = Minute(n) | Stunde(n) | Tag(e) | Jahr(e)
  dontUseBackPid = 1
  useHRDates = 1
  _LOCAL_LANG {
       de {
          more = mehr
          backToList = zurück
       }
  }
}

Vielen Dank

kenzo2008 ·

Kurze Ergänzung:

Der Bereich "Plugin inserted" wird weggelassen.

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

Hat einer eine Idee?

kenzo2008 ·

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 ·

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 😉

# Default PAGE object:
page = PAGE

config {
  language = de
  locale_all = de_DE
  doctype = xhtml_trans
  xmlprologue = none
  metaCharset = utf-8
  htmlTag_langKey = de-DE
  linkVars = L
  sys_language_uid = 0
  
  
 ### CoolURI ###
  #simulateStaticDocuments = 0
 # baseURL = http://www.meineDomain.de/
  #Die Basisdomain
  #tx_cooluri_enable = 1
  #Optional alte gespeicherte Links zu neuen Weiterleiten
  redirectOldLinksToNew = 1
 
  ### Schriftgröße ändern ###
  linkVars = Fsize
  uniqueLinkVars = 1
  
  
}  

# wenn der globale Parameter L auf 1 steht:
[globalVar = GP:L = 1]
config.sys_language_uid = 1
config.language = en
config.locale_all = en_UK
config.htmlTag_langKey = en-UK
[global]



###Hier wird die MAIN-CSS Datei eingebunden
#wichtig: file1 (die CSS Hauptdateieinbindung) vor file2
#->sonst überschreibt file1 (Haupt-CSS-Datei) die anderen File2 Dateien
#und es ist nur die Haupt-Css Datei wirksam)
page.includeCSS.file1 = fileadmin/template/malerei.css
page.includeCSS.file1.title = Styles für die Bildschirmausgabe
page.includeCSS.file1.import = 1


### Schriftgröße ändern ###
###############################
 
[globalVar = GP:Fsize<1]
page.includeCSS.file2 = fileadmin/template/malerei.css
page.includeCSS.file2.title = Font Size Step 1
page.includeCSS.file2.import = 1
[END]
 
[globalVar = GP:Fsize=1]
page.includeCSS.file2 = fileadmin/template/malerei2.css
page.includeCSS.file2.title = Font Size Step 2
page.includeCSS.file2.import = 1
[END]
 
[globalVar = GP:Fsize=2]
page.includeCSS.file2 = fileadmin/template/malerei3.css
page.includeCSS.file2.title = Font Size Step 3
page.includeCSS.file2.import = 1
[END]
 
  



# Indizieren der Website aktivieren
page.config.index_enable = 1


#page.includeCSS {
 #    file10 = fileadmin/template/malerei.css
  #   file10.media = screen
   #  }

page.10 = TEMPLATE
page.10 {
   template = FILE
   template.file =  fileadmin/template/malerei.htm
   workOnSubpart = DOCUMENT_BODY
   
   subparts.INHALT < styles.content.get
  
 #!!!für 2.Sprache
  select.languageField = sys_language_uid

  

 
#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.fsizemenu.40.value.typolink.ATagParams = title="Schriftgröße: normal"
 
marks.fsizemenu1 = COA
marks.fsizemenu1.50 = HTML
marks.fsizemenu1.50.value = A+
marks.fsizemenu1.50.value.typolink.parameter.data = page:uid
marks.fsizemenu1.50.value.typolink.additionalParams = &Fsize=1
marks.fsizemenu1.50.value.typolink.ATagParams = title="Schriftgröße: groß"
 
marks.fsizemenu2 = COA
marks.fsizemenu2.60 = HTML
marks.fsizemenu2.60.value = A++
marks.fsizemenu2.60.value.typolink.parameter.data = page:uid
marks.fsizemenu2.60.value.typolink.additionalParams = &Fsize=2
marks.fsizemenu2.60.value.typolink.ATagParams = title="Schriftgröße: sehr groß"  
   
  
   #deutsch | english
  subparts.language = COA
   subparts.language {
      10 = TEXT
      10.wrap = <a href="index.php?id= | &L=0">einfach</a>
      10.field = uid
      20 = TEXT
      20.value = &nbsp;|&nbsp;
      30 = TEXT
      30.wrap = <a href="index.php?id=|&L=1">schwer</a>
      30.field = uid
    }

  
  
  
  
   marks.FOOTER = COA
   marks.FOOTER {
      10 = TEXT
      10.field = title
      20 = TEXT
      20.value = &nbsp;&copy; 2010 faktura.design
      20.wrap = <a href ="http://www.faktura-berlin.de/"> | </a>
      
   }
  
  
  subparts.GLOBALS = HMENU
   subparts.GLOBALS {
      special = list
      special.value = 7,8,13
      1 = TMENU
    #  1.NO.stdWrap.case=lower
      1.NO.linkWrap = | |*| &nbsp; |
   }
  
       
   subparts.NAVIGATION = HMENU
   subparts.NAVIGATION {
     #excludeUidList = 7,8,13
        wrap = <ul class="navi"> | </ul>
        1 = TMENU
        1.NO.wrapItemAndSub = <li> | </li>
     
     #CUR Zustand der ersten Ebene
     
     1.CUR = 1  
     1.CUR.wrapItemAndSub = <li> | </li>
     1.CUR.ATagParams = class="active"
     
     #Die zweite Ebene:
 # 2 = TMENU
    #Die zweite Ebene:
  2 = TMENU
  2.wrap = <ul class="subnavi"> | </ul>
  2.NO.wrapItemAndSub = <li> | </li>
  }
}