Mit diesem TypoScript Snippsel kann man jede beliebige Lightbox im Frontend nützen. Ihr müsst dazu einfach ein Element Text w/Bild einfügen. In dem Tab Media einfach ein Bild einfügen und Click-enlarge setzen.

// Setup
tt_content.image.20.1.imageLinkWrap {
typolink >
typolink {

parameter.cObject = IMG_RESOURCE
parameter.cObject.file {
import.current = 1
width = {$styles.content.imgtext.linkWrap.width}
height = {$styles.content.imgtext.linkWrap.height}
effects = {$styles.content.imgtext.linkWrap.effects}
}

parameter.override {
field = image_link
listNum.stdWrap.data = register : IMAGE_NUM_CURRENT
}

ATagParams = rel="prettyPhoto"
ATagParams.insertData = 1
ATagParams.if.isFalse < .parameter.override

target = {$styles.content.links.target}
extTarget = {$styles.content.links.extTarget}
}
}

read more…

Mit diesem TypoScript Snippsel kann man das aktuelle Datum auf einer Website darstellen. Mit der Php Funktion strftime kann man das Datum beliebig formatieren.

// TYPO3 Setup
tmp.date = TEXT
tmp.date {
data = date : U
strftime = %A, %e. %B %Y
}

Hier eine kurze Erklärung zu strftime:
%A = Sonntag bis Samstag
%e = 1 bis 31
%B = Januar bis Dezember
%Y = Jahr: 2009

Mehr dazu findet ihr auf php.net/strftime

Die strftime-Formatangabe ‘%A, %e. %B %Y’ in diesem Beispiel erzeugt eine Ausgabe des Datums im Format ‘Freitag, 14. August 2009′.

Diesmal ein Codesnippsel für ein Grafisches Listen Menu mit Typoscript für mehrere Levels. Dieses Menu ist lauffähig und natürlich noch ausbaufähig.

// TYPO3 Setup
// mainmenu
lib.mainmenu = HMENU
lib.mainmenu {
entryLevel = 0
1 = GMENU
1 {
useLargestItemY = 1
noBlur = 1
expAll = 0
accessKey = 0
wrap =
<ul>|</ul>
NO = 1
NO {
ATagTitle.field =  subtitle // title // description
allWrap =
	<li>|</li>
XY = [10.w]+4,[10.h]+6
transparentBackground = 1
backColor = #000
10 = TEXT
10 {
text.field = title
offset = 0,16
fontColor = #ffffff
niceText = 0
align	= center
fontFile = fileadmin/templates/fonts/verdanab.ttf
fontSize = 11
}
}
RO < .NO
RO = 1
RO.10 {
fontColor = #78d200
}
ACT < .RO
ACT = 1
ACT.10 {
fontColor = #78d200
fontFile = fileadmin/templates/fonts/verdanab.ttf
}
}
2 < .1
2 = GMENU
2 {
wrap =
<ul class="level2">|</ul>
}
}

Webdevelopment Links for light reading – Part 4

• 10 HTML Tag Crimes You Really Shouldn’t Commit
• 10 Rare HTML Tags You Really Should Know
• The CSS Box Model
• 14 SEO-Fehler, die man im eigenen Blog vermeiden sollte
• All About Floats
• Understanding Action Hooks In WordPress
• 30 Must-Have Tweaks For Your Mac
• 35 Absolutely Useful Firefox Plugins For Web Designers And Developers
• 10 WordPress 2.8 Features To Look Out For

Trotz aller Verbesserungen und die recht komfortable CSS-Unterstützung für den Internet Explorer 8, kann es immer wieder Fälle geben, in denen man auf einen CSS-Hack zurückgreifen muss. Hier ist ein CSS-Hack, welcher im IE8 Standard-Modus funktioniert.

.elementORClass {
color /*\**/: blue\9
}

Dieser IE CSS-Hack ist für alle IE Versionen gültig:

.elementORClass {
color: blue\9
}

Ein Teil eines Textes vor der Google Indizierung zu schützen ist recht einfach, aber nicht jeder kennt diese Methode. Verwende einfach den folgenden HTML-Kommentar in deinem Source-Code, um einen bestimmten Satz oder Text vor der Indizierung von Google zu schützen.

Dieser Text wird von Google indiziert...
<!--googleoff: all--> ...aber dieser nicht! <!--googleon: all>

Das ist auch schon alles was ihr machen müsst. Dieser HTML-Kommentar weist den Google-Bot hin darauf das er den eingebetteten Text nicht indizieren soll.

In meiner neuen Serie werden ich euch alle Möglichen Menüs für Typo3 vorstellen. Diesmal ein Codesnippsel für ein Listen Menu mit Typoscript für mehrere Levels.

// TYPO3 settings
// mainmenu
lib.mainnavi = HMENU
lib.mainnavi {
entryLevel = 0
1 = TMENU
1 {
noBlur = 1
expAll = 1
wrap =
<ul class="mainnavi">|</ul>
NO = 1
NO {
ATagTitle.field = title // description // abstract
ATagBeforeWrap = 1
stdWrap.htmlSpecialChars = 1
wrapItemAndSub =
<li class="first"> |</li>
|*|
<li> |</li>
|*|
<li class="last"> |</li>
}
ACT = 1
ACT {
ATagTitle.field = abstract // description // title
ATagParams = class = "active"
ATagBeforeWrap = 1
stdWrap.htmlSpecialChars = 1
wrapItemAndSub =
<li class="first"> |</li>
|*|
<li> |</li>
|*|
<li class="last"> |</li>
}
}
2 < .1
2 = TMENU
2 {
wrap =
<ul class="level2">|</ul>
}
3 < .1
3 = TMENU
3 {
wrap =
<ul class="level3">|</ul>
}
4 < .1
4 = TMENU
4 {
wrap =
<ul class="level3">|</ul>
}
}

Erklärungen für das Listen Menu:
Mit wrapItemAndSub habt ihr die Möglichkeit den ersten und dem letzten li eine bestimmte CSS Klasse zuzuweisen.
Mit ATagTitle.field könnt ihr den Anchor eine Title Beschreibung die Ihr im Backend einfügt zuweisen.
Mit stdWrap.htmlSpecialChars = 1 wird darauf geachtet das die HTML-Entities richtig erstellt werden.

Webdevelopment Links for light reading – Part 3

• How To Use The Background Eraser Tool In Photoshop
• How to Override Inline CSS Styles
• Der Title aus SEO- & Usersicht
• The CSS Overflow Property
• CSS Quick-Question Edition
• 7 Quick CSS Enhancements for Better User Experience
• The Do´s & Don´ts of Modern Web Design
• 40 Outstanding CSS Techniques And Tutorials
• 25 Advanced CSS Techniques
• The Ultimate Guide to .htaccess Files