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.

Tags: menu, typo3, typoscript

Kategorie typo3 | 0 comments

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

Tags: links

Kategorie webdesign | 0 comments

Hier ein Codesnippsel für ein Brotkrumenmenü (Breadcrumb) Menu/Navigation mit Typoscript erstellt. Dieses spezielle Menü zeigt uns an, wo wir uns gerade befinden. Hier noch einige Beispiele wie man Breadcrumb Menus Effektiv einsetzen kann.

// TYPO3 Constants
baseUrlOn = 1
baseUrl = http://www.domain.de

// TYPO3 settings
lib.breadcrumb = HMENU
lib.breadcrumb {
special = rootline
special.range = 1|-1
includeNotInMenu = 0
1 = TMENU
1 {
noBlur = 1
wrap =
<ul>
<li><a href="{$baseUrl}">Home</a> ></li>
|</ul>
NO {
linkWrap =
<li> | ></li>
ATagTitle.field = abstract // title // description
ATagTitle.noTrimWrap = | zur Seite: |
}
CUR = 1
CUR {
linkWrap =
<li> |</li>
doNotLinkIt = 1
}
}
}

includeNotInMenu = 0/1 gilt für Seiten die auf Hide in Menu gestellt sind.

Tags: menu, typo3, typoscript

Kategorie typo3 | 0 comments

Webdevelopment Links for light reading – Part 2

• Designing Drop-Down Menus: Examples and Best Practices
• Bilder: Alt-Text und/oder Title-Text? – Image-Tag Grundlagen
• 45 Apple-Inspired Photoshop Tutorials
• CSS Formatter and Optimiser
• 10 Web Analytics Tools For Tracking Your Visitors
• 10 Best jQuery Datepickers Plugins
• How to Build the Best Browser Test Suite
• Internet Explorer Collection
• 40 Outstanding CSS Techniques And Tutorials

Tags: links

Kategorie webdesign | 0 comments

Ein Kunde wünschte die Darstellung bestimmter Inhaltselemente in einem bestimmten DIV-Container auf all seinen Seiten. Nach kurzer Nachforschung im Internet fand ich heraus, dass dies sich sehr einfach per TypoScript lösen lässt. Dieser TypoScript Codesnippsel kann für TemplaVoila und Modern Template Building benützt werden.

// Typoscript
lib.sidepanel = COA
lib.sidepanel.10 = RECORDS
lib.sidepanel.10 {
tables = tt_content
source = tt_content_33
}
lib.sidepanel.20 = xxx

tt_content_33 bezieht sich auf die uid 33 des Inhaltes in der tt_content tabelle.

Tags: Modern Template Building, templavoila, typo3, typoscript

Kategorie typo3 | 0 comments