[Workshop] Typo3-Workshop Teil V - Tuning

**steffenk** · 13.03.2006, 23:22

Ok, wir haben unser Grundgerüst, aber mal ehrlich - das sieht doch grausig aus.
Also wollen wir mal was für unsere Ästhetik tun

Das Menü oben soll ein grafisches Menü werden, da wir einen Lieblingsfont uns dafür ausgesucht haben - kein Problem.
Tapo3 bringt einen Menütyp mit: GMENU (graphic menu) das genau das tut was wir vorhaben.

Grafisches Menü - das heisst, es werden Grafiken erzeugt und die Beschriftung der Grafiken erfolgt dynamisch. Das hat den Vorteil, das wir beliebige Fonts benutzen können, die dann in der Beschriftung erscheinen. Hierzu haben erstellen wir unter fileadmin einen Ordner "fonts" und laden die gewünschten ttf-Files rein.

Am Typoscript brauchen wir garnicht viel verändern, wir müssen nur spezielle grafische Anweisung mit unterbringen.
Hier mal das Typoscript für unser grafisches Menü:

Code:

TOPMENU = HMENU
TOPMENU {
	special = directory
	special.value = 2
	1 = GMENU
	1.wrap=<ul>|</ul>
	1.noBlur = 1
	
	1.NO = 1
	1.NO {
		XY = 100,20
		align = center
		background = #fdcba9
		wrap = <li>|</li>
		
		#Hintergrundbild
		5 = IMAGE
		5.file = fileadmin/images/topmenu.gif
		
		#Beschriftung als Text rendern
		10 = TEXT
		10.text.field = title
		10.fontColor = #FFFFFF
		10.fontFile = fileadmin/fonts/MAIAN.TTF
		10.fontSize = 14
		10.antiAlias = 1
		10.offset = 0,14
		10.align = center

	}
	1.RO < .1.NO 
	1.RO = 1
	1.RO.5.file = fileadmin/images/topmenu_ro.gif
	1.RO.10.fontColor = #000000
	
	1.ACT < .1.NO
	1.ACT = 1
	1.ACT.5.file = fileadmin/images/topmenu_act.gif
	1.ACT.10.fonColor = #0A3754
	
}

Na, Schweissperlen auf der Stirn ?

So schlimm ist es gar nicht, Der Anfang sollte uns bekannt vorkommen. Allerdings ist der Teil von 1.NO doch neu.
Hier die Erklärung dazu:

XY - Das ist die Grösse unserer Grafik, in unserem Falle 100px Breite, 20px Höhe
align - das ist die Ausrichtung
background - der Farbwert für den Hintergrund

Unsere Grafik besteht aus 2 Teilen, einem Hintergrundbild und der Beschriftung.
Als erstes definieren wir die Hintergrundgrafik (Objekt 5). Es wird eine Referenz zu einem bestehenden Bild angegeben, das in unserem Fall die selben Ausmasse hat.
Objekt 10 enthält die Beschriftung als Textobjekt.
text.field=title - Die beschriftung kommt aus dem Datenbankfeld "Title", also der Seitentitel.
Als Font nehmen wir unseren Lieblingsfont, den wir im Ordner fileadmin/fonts vorliegen haben - ist das nicht scharf ?
Die nächsten Werte beziehen sich auf die Schriftformatierung (Grösse, Kantenglättung, Abstand vom Rand und Ausrichtung.
Da wir den Text zentrieren, kann der Offset vom linken Rand mit 0 angegeben werden.

Das wars auch schon, für Rollover(RO) tauschen wir das Bild und die Schriftfarbe aus, ebenso für den aktiven Zustand.

Wow, wir haben mit wenigen Zeilen erreicht, das Typo3 uns dynamisch Grafiken aus dem Seitentitel mit gewünschtem Font generiert - wer das mal mit php versucht hat, wird wissen, wie komplex das ist.

Ok, das wars schon.

Da wir schon beim Menü sind, wollen wir ein Brotkrumenmenü haben (Breadcrumb-Navigation). Dieses spezielle Menü zeigt uns an, wo wir uns befinden, jeder kennts von anderen Seiten.
Auch dafür hat Typo3 schon alles vorbereitet.

Wir wollen unser Breadcrumb im Inhaltsbereich oben haben. Müssen wir jetzt einen neuen Marker ins Template packen ?
NEIN !

Hä ?

Ja, richtig gehört, wir bedienen uns eines einfachen Elements, COA.
COA (ContentObjectArray) ist also nichts anderes als eine Ansammlung von Objekten. Im Prinzip haben wir das schon häufiger eingesetzt.
Ein Beispiel:

Code:

WALD = COA
WALD {
	10 = BAUM
	20 = BAUM
	30 = BAUM
	40 = BAUM
}

Genauso wollen wir das auch mit unserem Marker INHALT machen. Statt ihm nur ein Element zuzuweisen, nehmen wir 2:

Code:

INHALT = COA
INHALT{
   10 < Breadcrumb 
   20 < content.styles.get
}

Natürlich müssen wir unsere Bredcrumbnavigation erst einmal erstellen.
Es ist ein Menü (HMENU), und als special bekommt es nicht directory sondern rootline.
So sieht es aus:

Code:

10 = HMENU
10 {
	special = rootline
	special.range = 2|-1
	1 = TMENU
	1.noBlur = 1
	1.wrap = <ul id="breadcrumb"> | </ul>
	1.NO.linkWrap = <li> |  &raquo; </li>
	1.NO.ATagTitle.field = title
	1.NO.ATagTitle.noTrimWrap = | zur Seite: |
	1.CUR = 1
	1.CUR {
		linkWrap = <li><span class="spot5" title="Sie befinden sich auf der Seite:"> | </span></li>
		doNotLinkIt = 1
	}
}

rootline steht also für die Breadcrumb-Navigation. Etwas krytisch sieht der range-Befehl aus:
special.range = 2|-1

Übersetzt heisst das:

special.range = Start-Ebene | letzte Ebene

Unsere Breadcrumb fängt also bei Ebene 2 an, die -1 steht für "unbegrenzt".
Der aktive Punkt wird nicht verlinkt (doNotLinkIt), die Links bekommen ein Sonderzeichen (der Doppelpfeil) nachgestellt. So sieht unser Klickpfad doch sehr schön aus.

Abschliessend habe ich das CSS noch verschönert, so das unsere Seite schon sehr ansehnlich aussieht.

Als Sahnehäubchen habe ich das ganze online gestellt, im Login-Bereich könnt ihr Euch einloggen und den Source im Gesamten betrachten, downloaden sowie die Menügrafiken herunterladen.
Loggt Euch ein mit tpworkshop / typo3 und ihr erhaltet Zugang zum internen Bereich. Wie man soetwas erstellt, zeige ich im nächsten Abschnitt.

**steffenk** · 13.03.2006, 23:23

Ihr werdet staunen, wie einfach das geht.
Wir wollen das vorbereiten. Dazu erstellen wir uns eine Seite vom Typ Sysfolder. Nun wechseln wir in dei Listenansicht und klicken auf "neuen Datensatz anlegen"
Wir wählen als Typ "Website Benutzergruppe" und tragen einen uns angenehmen Namen ein und speichern.
Fein, wir legen noch einen Datensatz an vom Typ "Website Benutzer", vergeben einen Namen und Passwort und wählen unsere eben erstellte Benutzergruppe aus, dann speichern.

Prima, wir haben alles an Vorarbeit geleistet, nein, halt ! Schnell noch die ID unseres Sysfolders mit der Maus erkunden und merken. Wir gehen in unser Root-Template und tragen diesmal unter Constants folgende Zeile ein:

Code:

styles.content.loginform.pid = 18

In meinem Fall hat der Sysfolder mit den Benutzern die ID 18.

Nun brauchen wir nur noch die Login-Box, und das ist gerade mal ein Mausklick

Wir haben ja schon eine Seite "Login" angelegt, auf die wechseln wir und legen ein Inhaltselement an "Anmeldeformular" an, speichern, fertig. Wir probieren das direkt mal im FE aus, rufen die Seite Login auf, geben Namen und Passwort ein und dürften eine Erfolgsmeldung bekommen.

Doch was nutzt uns das ? Im Moment noch nichts, wir haben ja noch keinen internen Bereich.
Das holen wir schnell nach. Wir erstellen uns im Baum "Menü links" eine Seite "Intern". Wir schauen nach unten, und sehen unter "Allgemeine Optionen" eine Selectbox "Zugriff".
Hier wählen wir unsere benutzergruppe aus und speichern. Jetzt sehen wir, das das Symbol der Seite sich geändert hat - wir sehen einen Kopf

Wir erstellen einige Unterseiten, die aber ganz normal sein können, wir brauchen keunen Zugriff setzen, da sie für allen nicht eingeloggten Besucher nicht sichtbar sein werden.

Fertig - wir haben unseren internen Bereich.

**steffenk** · 13.03.2006, 23:25

Text mit Bild

Wir haben schon fast alles zusammen, wir wollen sicher auch Bilder mit Text einfügen. Leider stellen wir fest, das die in Tabellen ausgegeben werden.
Hier haben die Autoren von css_styled_content wohl geschludert, wir wollen doch keine Design-Tabellen.
Ein findiger Autor einer Extension hat dieses Versäumnis nachgeholt und eine Extension hierfür rausgebracht. Wir gehen in den Extensionmanager und installieren die Extension cron_cssstyledimgtext
(Diese Extension ist ab version 4 Bestandteil von css_styled_content)

Da wir den langen CSS-Teil nicht als inline-Style im Dokument haben wollen, möchten wir den CSS-Teil in unser Stylesheet packen.

Wir wählen Template, die root-Seite und wählen aus der Selectbox den "Template Analyzer".
Unter "Template Hirarchy" klicken wir auf den Eintrag "EXT:cron_cssstyledimgtext/stat..." und scrollen nach unten zum Teil
"plugin.tx_croncssstyledimgtext._CSS_DEFAULT_STYLE". Wir markieren alles zwischen den Klammern { } und kopieren es. Diese Kopie fügen wir in unser CSS-File ein.
Nun können wir im Setup die Ausgabe dieser inline-Styles unterbinden mit der Zeile

Code:

plugin.tx_croncssstyledimgtext._CSS_DEFAULT_STYLE >

(Wir erinnern uns: > steht für löschen)

Wenn wir mit diesem Element "Text mit Bild" experimentieren, stellen wir etwas unangenehmes fest - die Überschrift ist nicht oben drüber, sondern im Element drin. Das erzeugt unangenehme Nebeneffekte. Glücklicherweise hat uns der Autor einen "Hack" hierfür verraten.
Wir tragen in unser Setup folgende Zeilen ein:

Code:

#Überschriften vom Block lösen (Hack)
tt_content.textpic.10.if >
tt_content.textpic.20.text.10 >

Und nun wünsche ich erstmal viel Spass beim Experimentieren. Ich sammel mal die Fragen und werde den Teil mit ein paar Feintuning-Tipps erweitern.

**steffenk** · 13.03.2006, 23:25

*** Platzhalter ***

**T:-)M** · 16.03.2006, 01:30

Hi Steffen,

prima, dass es weiter geht :-)
... muss nur leider gerade etwas basteln - freu mich aber schon drauf und werde mir in den nächsten Tagen etwas Zeit frei boxen.

Gruß

T:-)M

P.S.:
... habe gerade auf die Testseite geschaut - prima Idee :-)
... und gleich ne Frage: ich kann auf den geschützen Bereich auch ohne Passwort zugreifen wenn ich die URL weiss, z.B. http://tp.pianojazz.info/index.php?id=23
- ist es auch möglich diesen Bereich so abzusichern, dass dies nicht möglich ist oder muss ich das dann mit .htacces kombinieren?

**steffenk** · 16.03.2006, 08:59

htaccess macht keinen Sinn, da es ja kein physikalisches Verzeichnis gibt.

Einfach alle Unterseiten ebenso der Benutzergruppe zuordnen, dann gehts nicht mehr (so wie jetzt geschehen)

**flo.s** · 17.03.2006, 14:53

bin soweit.

hab die extension cron_cssstyledimgtext gleich noch mit mehreren Bildergalerien getestet. Allerdings stimmt die in der Administration angegebene Thumbnailgröße nicht mehr mit der Ausgabe überein - die Ausgabe ist jetzt weniger als 50% der eingestellten Größe. Weiß da jemand Rat?

**steffenk** · 17.03.2006, 19:45

die Frage ist - was hast Du wo konfiguriert ?
Fakt ist, das Bilder nur kleiner gerechnet werden, niemals grösser. Ein Bild von 120px Breite bleibt auch immer 120px breit, auch wenn Du 300px vorgibst.
Ansonsten werden die eingestellten Werte exakt übernommen.

**flo.s** · 17.03.2006, 23:37

Ich verwende die Standard-Bilder-Gallerie.
100px Breite für die Thumbnails sind eingegeben. Diese werden, sobald ich die Standardtabelle verwende, auch so ausgegeben.
Wenn ich die von Dir vorgestellte CSS Extension für die Bilder verwende sind die Thumbnails nur noch 12px breit.

Wenn 170px Breite vorgesehen ist sind die Thumbnails mit der CSS Extension noch 50px breit.

(eben nochmal getestet)

Hatte allerdings noch keine Zeit mich in die Einstellungen einzulesen (falls es da welche gibt ...)

Ich schaus mir morgen nochmal genauer an und sag bescheid - finde es nur komisch dass mit der Extension die eigentlichen Angaben der Seite "übergangen" werden!

**Borusse** · 18.03.2006, 14:37

Bin auch soweit. Ich muss das aber alles noch mal in Ruhe durchgehen.
Vielleicht kommt dann auch noch die ein oder andere Frage.

**maulwurf007** · 18.03.2006, 21:20

Hallo zusammen,
ich verfolge schon länger diesen Workshop. Riesen Lob an St@eff.en.
Aber ich habe jetzt auch mal eine Frage:
Wie kann man die Suche und den Login auf Deutsch umstellen? So wie man es auch im Online-Beispiel von St@eff.en sieht?

Viele Grüße,
maulwurf

**steffenk** · 19.03.2006, 14:31

Hi maulwurf,

um das in der deutschen Sprache zu bekommen, musst Du im Ext-Manager die TS Language, German installieren mit der Option "try to set as default". Die sorgt dafür, das deutsch im FE die Standardsprache ist (csh_de ist nur für das BE zuständig)

**T:-)M** · 19.03.2006, 20:01

Hi Steffen,

leider funktioniert jetzt bei mir nach den Änderungen gar nichts mehr...

Code:

  
page = PAGE
page {
	#bodyTag = <body>
	includeCSS {  
    	file1 = fileadmin/css/site.css
	}
	
	10 = TEMPLATE
	10 {
    	template = FILE
    	template.file = fileadmin/templates/template.html

    	workOnSubpart = DOKUMENT
		marks{
		
			INHALT = COA
INHALT {
10 = HMENU
10 {
special = rootline
special.range = 2|-1
1 = TMENU
1. noBlur = 1
1.wrap = <ul id="breadcrumb"> | </ul>
1.No.linkWrap = <li> | $raquo; </li>
1.No.ATagTitle.field = title
1.NO.ATagTitle.noTrimWrap = | zur Seite: |
1.CUR = 1
1.CUR {
linkWrap = <li><span class="spot5" title="Sie befinden sich auf der Seite:"> | </span></li>
doNotLinkIt = 1
}
}


20 < content.styles.get
}

			
			LOGO =
			
			TOPMENU = GMENU
			TOPMENU {
				special = directory
				special.value = 3
				1 = GMENU
				1.wrap=<ul>|</ul>
				1.noBlur = 1
				
				1.NO = 1 {
                          XY = 100,0
                          align = center
                          background = #fdcba9
                         wrap = <li>|</li>
				   
                         #Hintergrundbild
                         5 = IMAGE
                         5.file = fileadmin/images/topmenu.gif

                         #Beschriftung als Text rendern
                         10 = Text
                         10.text.field = title
                         10.fontColor = #FFFFFF
                         10.fontFile = fileadmin/fonts/MAIAN.TTF
                         10.fontSize = 14
                         10.antiAlias = 1
                         10.offset = 0,14
                         10.align = center
                         }

                     1.RO < .1.NO
                     1.RO = 1
                     1.RO.5.file = fileadmin/images/topmenu_ro.gif
                     1.RO.10.fontColor = #000000
                    
                     1.ACT< .1.NO
                     1.RO = 1
                     1.RO.5.file = fileadmin/images/topmenu_act.gif
                     1.RO.10.fontColor = #0A3754
                     }
 
			
			LINKS = HMENU
LINKS {
	special = directory
	special.value = 2
	entryLevel = 1
	
	1 = TMENU
	1.wrap= <ul>|</ul>
	1.noBlur = 1
	
	1.NO = 1
	1.NO.ATagTitle.field = title
	1.NO.linkWrap = <li>|</li>
	
	1.ACT = 1
	1.ACT < .NO
	#1.ACT.doNotLinkIt = 1
	1.ACT.linkWrap = <li id="leftnavi-aktiv">|</li> 
	
	1.ACTIFSUB < .ACT 
	1.ACTIFSUB = 1 
	1.ACTIFSUB.linkWrap = <li class="leftnavi-aktiv">|    
	
	2 < .1
	2.wrap = <ul>|</ul></li> 
	2.ACT.linkWrap = <li id="leftnavi-sub-aktiv">|</li> 

}
				
FOOTER = TEXT
FOOTER.value = Dies ist eine Site aus dem TP Typo3-Workshop - Februar 2006
			
		}
	}
}

und dazu gleich die Frage: wie bekommst du den code eingerückt - dass der so schön sauber strukturiert aussieht - Tabtaste funktioniert nicht...

Die Extension cron_cssstyledimgtext habe ich installiert sie läuft angeblich auch. Ich kann aber nicht auf sie zugreifen - sie wird nicht in der Auswahl angezeigt.

Weißt Du was da los ist?

Gruß

T:-)M

**steffenk** · 19.03.2006, 20:22

Hi,

geh mal auf Template und wähle den Template Analyzer. Danach hakst Du Syntax Highlight an und klickst in der Liste auf Dein Template. Du bekommst die beiden Fehler schön angezeigt.

Die cron_cssstyledimgtext ist eine Extension, die einen Teil der css_styled_content austauscht: Text mit Bild. Das wird jetzt mit Divs statt mit Tabellen gerendert.

@flo.s - die cron_cssstyledimgtext hat nichts mit der Galerie zu tun. Das sind alles Einstellungen der Galerie. Ich empfehle Dir aber stattdessen lz_gallery zu benutzen, die ist besser zu konfigurieren, bietet mehr Features und ist auch leicht verständlich (ins handbuch schaun!)

**flo.s** · 19.03.2006, 20:29

danke für den hinweis - hab ich mir schonmal angeschaut.
allerdings wär die typo3 Galerie genau das was wir brauchen - mehr zum konfigurieren brauchen wir nicht. Ich werds trotzdem nochmal anschaun!

Zu cron_cssstyledimgtext: Es ist nur komisch dass wenn die Extension geladen ist die Grafiken so klein dargestellt werden - sobald ich die Extension wieder deaktiviere und alles über die Tabellen von css_styled_content läuft sind die Bilder wieder so wie in den Galerieeinstellungen angegeben ... Ich spiel mich nächste Woche nochmal damit - Danke!

zur Startseite vom TP

Thema: [Workshop] Typo3-Workshop Teil V - Tuning

LinkBack

Themen-Optionen

Thema durchsuchen

[Workshop] Typo3-Workshop Teil V - Tuning

Geschützte Seiten

Feintuning

Weitere Feintuning-Tipps

LinkBacks (?)

TYPO3.net - rootline special.range Benutzung

Aktive Benutzer

Aktive Benutzer

LinkBacks (?)

TYPO3.net - rootline special.range Benutzung

Aktive Benutzer

Aktive Benutzer

Berechtigungen