With version 4.4 of the Content Management System TYPO3, the Backend interface was undergone not only a major visual improvement. This presentation - held at the TYPO3 Developer Days 2010 in Elmshorn - shows the technical changes of the skin.

1. http://www.sxc.hu/photo/1076628
Backend-Skin in TYPO3 4.4: Inspiring people to
Technical changes under the hood share

2. Backend-Skin in TYPO3 4.4:
Technical changes under the hood
Steffen Ritter <info@steffen-ritter.net>
Steffen Gebert <steffen@steffen-gebert.de>
TYPO3 Developer Days 2010, Elmshorn
Backend-Skin in TYPO3 4.4: Inspiring people to
Technical changes under the hood share

3. Introduction
Your speakers
Steffen Ritter Steffen Gebert
Student, Freelancer Student, Freelancer
Backend-Skin in TYPO3 4.4: Inspiring people to
Technical changes under the hood share

4. TYPO3 4.4
On the surface...
t3skin in version 4.4
Backend-Skin in TYPO3 4.4: Inspiring people to
Technical changes under the hood share

5. Let‘s break
the surface!
http://www.flickr.com/photos/blackbird_hollow/3749443815/
Backend-Skin in TYPO3 4.4: Inspiring people to
Technical changes under the hood share

6. Previous state
TYPO3 4.3
without t3skin
„retroskin“ - styles of 3.x
Backend-Skin in TYPO3 4.4: Inspiring people to
Technical changes under the hood share

7. Previous state
TYPO3 4.3
with t3skin installed
styles of v4.0 - 4.3
Backend-Skin in TYPO3 4.4: Inspiring people to
Technical changes under the hood share

8. Previous state
TYPO3 4.3 „retroskin“
core t3skin
t3skin = style + styles
sheets sheets
retroskin hardcoded in core
EXT:t3skin only adds CSS to core CSS
unnecessary CSS loaded, hard to maintain
Backend-Skin in TYPO3 4.4: Inspiring people to
Technical changes under the hood share

9. TYPO3 User Experience Week 2009
Tasks of Team 3
extend skinning API
remove all CSS from core
split up CSS of t3skin
use CSS icon sprites
Fabien Udriot, Steffen Gebert, Thomas Allmer,
André Wartmann, Michael Leibenson
Backend-Skin in TYPO3 4.4: Inspiring people to
Technical changes under the hood share

10. Extend the skinning API
Backend-Skin in TYPO3 4.4: Inspiring people to
Technical changes under the hood share

11. Skinning API
Improvements
Skins have to register:
$TBE_STYLES[skins][extKey] = array();
Automatic inclusion from every skin:
stylesheets/structure/*.css
stylesheets/visual/*.css
Add further directories:
$TBE_STYLES[skins][extKey][stylesheetDirectories]
Backend-Skin in TYPO3 4.4: Inspiring people to
Technical changes under the hood share

12. Skinning API
CSS for your backend module
Do not misuse skinning API for modules!
No need for hacks:
// Mis-using JScode to insert CSS _after_ skin.
$this->doc->JScode = '<link rel="stylesheet" href="my.css" />'
Use instead:
$this->doc = t3lib_div::makeInstance('bigDoc');
$this->doc->getPageRenderer()->addCssFile();
Available since TYPO3 4.3
Backend-Skin in TYPO3 4.4: Inspiring people to
Technical changes under the hood share

13. Remove all CSS from core
Backend-Skin in TYPO3 4.4: Inspiring people to
Technical changes under the hood share

14. Remove core CSS
TYPO3 4.4
t3skin
t3skin = styles
sheets
Backend-Skin in TYPO3 4.4: Inspiring people to
Technical changes under the hood share

15. Remove core CSS
TYPO3 4.4
without t3skin
„naked“ skin
Backend-Skin in TYPO3 4.4: Inspiring people to
Technical changes under the hood share

16. Remove core CSS
„naked“ skin
benefits:
no unneeded CSS transferred
clean CSS as base for skins
only demand:
be able to install any skin
Backend-Skin in TYPO3 4.4: Inspiring people to
Technical changes under the hood share

17. Split up t3skin CSS
Backend-Skin in TYPO3 4.4: Inspiring people to
Technical changes under the hood share

18. CSS separation
Criteria
structure & visual
by context
Backend-Skin in TYPO3 4.4: Inspiring people to
Technical changes under the hood share

19. CSS separation
Criteria
structure visual
width, height background
position border
top, right color
margin, padding font
Backend-Skin in TYPO3 4.4: Inspiring people to
Technical changes under the hood share

20. CSS separation
Conclusion
Benefit:
better structure
know what is defined where
Drawback:
enormous amount of HTTP-Requests
Backend-Skin in TYPO3 4.4: Inspiring people to
Technical changes under the hood share

21. t3lib_compressor
Features
takes care of JS and CSS
you have to
concatenation
enable it!
minification
gzip compression
Backend-Skin in TYPO3 4.4: Inspiring people to
Technical changes under the hood share

22. t3lib_compressor
gzip compression
$TYPO3_CONF_VARS[BE][compressionLevel] = 5
has always been there
now also used for CSS/JS resources
needs .htaccess rules: <FilesMatch ".js.gzip$">
AddType "text/javascript" .gzip
otherwise: naked BE </FilesMatch>
<FilesMatch ".css.gzip$">
AddType "text/css" .gzip
</FilesMatch>
AddEncoding gzip .gzip
Example:
ext-all.js reduced from 642K to176K
Backend-Skin in TYPO3 4.4: Inspiring people to
Technical changes under the hood share

23. Sprite Icons
Backend-Skin in TYPO3 4.4: Inspiring people to
Technical changes under the hood share

24. Sprite Icons
<img> is
Sprites? history ;-)
many icons combined into one image
inclusion as background-image using CSS
background-position to select proper icon
.t3-icon {
height: 16px;
width: 16px;
}
.t3-icon-actions {
background-image: url("t3-icon-actions.png");
}
.t3-icon-actions.t3-icon-document-open {
background-position: 0 -672px;
}
Backend-Skin in TYPO3 4.4: Inspiring people to
Technical changes under the hood share

25. Backend optimizations
Speedup
Task:
Log in and open List module
1700 170 2200
850 85 1100
0 0
KByte HTTP Requests 0 IP-Packets
v 4.3 v. 4.4
Backend-Skin in TYPO3 4.4: Inspiring people to
Technical changes under the hood share

26. Icons and Graphics
new strategy - new technique
Backend-Skin in TYPO3 4.4: Inspiring people to
Technical changes under the hood share

27. Icons and Graphics
TYPO3 4.3
Icons in typo3/gfx/ and typo3/sysext/t3skin/gfx/
unstructured folders, chaotic filenames
no overview
no streamlined look
many HTTP requests
hardcoded <img>-tags in php classes
Backend-Skin in TYPO3 4.4: Inspiring people to
Technical changes under the hood share

28. Icons and Graphics
whishes and aims
new iconset, streamlined look and feel
structured filestructure for saving icons in fs
reduce http requests on each BE call
remove as much hardcoded html in BE-php classes
easy use of TYPO3 icons in own modules
fancy technical solution
==> implement an public to use sprite-icon-API
Backend-Skin in TYPO3 4.4: Inspiring people to
Technical changes under the hood share

29. Icons and Graphics
Problems arising?
old functionality in t3lib_iconWorks not usable anymore
all icons used in core have to be changed in php code
(hardcoded image tags and sizes)
sprites and controlling CSS have to be maintained
Backend-Skin in TYPO3 4.4: Inspiring people to
Technical changes under the hood share

30. Icons and Graphics
TYPO3 4.4
changed file structure
clear naming scheme
sprite icon API in t3lib_iconWorks (inclusion)
manager API in t3lib_SpriteManager (handling)
available icons, managing CSS and generating sprites
no misuse of icons in wrong context
Backend-Skin in TYPO3 4.4: Inspiring people to
Technical changes under the hood share

31. Icons and Graphics
TYPO3 4.4
File structures / naming scheme
moving icons to images/icons
clear folder structure / naming
adopted from freedesktop.org
COPY an Icon and rename it matching your task
instead of just using the icon dedicated to another action
Backend-Skin in TYPO3 4.4: Inspiring people to
Technical changes under the hood share

32. Icons and Graphics
Using sprites
New API in t3lib_iconWorks for sprite usage
t3lib_iconWorks::getSpriteIcon()
replacing <img src= t3skin_iconWorks::skinImg>
t3lib_iconWorks::getSpriteIconForRecord()
replacing t3skin_iconWorks::getIconImage()
t3lib_iconWorks::getSpriteIconForFile()
Backend-Skin in TYPO3 4.4: Inspiring people to
Technical changes under the hood share

33. Icons and Graphics
registering icons at SpriteManager
addIconSprite(array $icons, $styleSheetFile)
addSingleIcons(array $icons, $extKey = '')
addTcaTypeIcon($table, $type, $iconFile)
=> all Icon-references should be relative to PATH_site
Backend-Skin in TYPO3 4.4: Inspiring people to
Technical changes under the hood share

34. Icons and Graphics
Using sprites
Old function are
"deprecated"
make sure to adapt your
extensions and BE-modules
Backend-Skin in TYPO3 4.4: Inspiring people to
Technical changes under the hood share

35. Sprite API/Manager internals
Backend-Skin in TYPO3 4.4: Inspiring people to
Technical changes under the hood share

36. Sprite API/Manager internals
Using Sprites - How it works
Sprite Icon Api (t3lib_iconWorks)
(find iconname for file or record)
is requested icon present?
generate „bunch“ of CSS classes
wrap it into HTML
action-document-open
t3-icon t3-icon-action t3-icon-document-open
Backend-Skin in TYPO3 4.4: Inspiring people to
Technical changes under the hood share

37. Sprite API/Manager internals
Icon available?
requesting icon name <=> fileName
how to know if an sprite icon is present?
All icons present in the CURRENT system are placed in
$TBE_STYLES['spriteIconApi']['iconsAvailable']
Backend-Skin in TYPO3 4.4: Inspiring people to
Technical changes under the hood share

38. Sprite API/Manager internals
Overlays
overlays are not generated anymore
every overlay is an sprite icon itself
only most important status overlay is automatically rendered
every „normal“ icon can be overlayed
Backend-Skin in TYPO3 4.4: Inspiring people to
Technical changes under the hood share

39. Sprite API/Manager internals
SpriteManager
generates cache of icons available
provides static API to register
own icon sprites,
own single icons
type-icons
is meant to generate sprites of unsprited icons
Backend-Skin in TYPO3 4.4: Inspiring people to
Technical changes under the hood share

40. Sprite API/Manager internals
SpriteApi vs. SpriteManager
Sprite API Sprite Manager
• finding iconnames for files • manages all icons from
• finding iconnames for records extensions and core
• finding/building overlays • build cache and „available
• building tags and css classes icon“ list
• registers type-Icons for
extending TCA
• register single icons to be used
=> the actual „icon output“ • builds sprites and css from
registered icons
Backend-Skin in TYPO3 4.4: Inspiring people to
Technical changes under the hood share

41. Sprite API/Manager internals
spriteIconGenerator_handler
Interface t3lib_SpriteManager instanciates
responsible to „rebuild“ all sprite-related caches.
CSS files and one php-cache file
may/should generate sprites used in the generated css file
TYPO3 4.4: t3lib_spritemanager_SimpleHandler
--> non spriting implementation
Backend-Skin in TYPO3 4.4: Inspiring people to
Technical changes under the hood share

42. How To? In depth studies...
Demonstrating the simplicity of the new technique
Backend-Skin in TYPO3 4.4: Inspiring people to
Technical changes under the hood share

43. How To? In depth studies
In depth Studies - How to...
Adapting Page - Module to repesent your FE Layout
Exchanging TYPO3 iconset
Icons in own extensions:
Own tables with TCA - Icons and TypeIcons
New Types or Modules (Pages) in CoreTables
Using own and core icons in BE-Modules
Backend-Skin in TYPO3 4.4: Inspiring people to
Technical changes under the hood share

44. How To? In depth studies
Adapting Page-Module to repesent your FE Layout
create a new empty extension
create folder structure as mentioned
register your Extensions as skin
write your CSS for page module
EXT: pagemodulecss
Backend-Skin in TYPO3 4.4: Inspiring people to
Technical changes under the hood share

45. How To? In depth studies
Exchanging TYPO3 iconset
create a new empty extension - as always :-)
copy t3skin/images/icons/ to you extension
replace all icons with the one you prefer
optional: create sprites of your icons
create CSS files mapping every icon to it‘s class
last two points will be supported by extdeveval soon
Backend-Skin in TYPO3 4.4: Inspiring people to
Technical changes under the hood share

46. How To? In depth studies
Exchanging TYPO3 iconset
unregister t3skin icons (extTables.php)
unset(
$TBE_STYLES[skins][t3skin][stylesheetDirectories][sprites]
);
register yourself as a skin extension
$TBE_STYLES['skins']['pagemodulecss'] =array();
$TBE_STYLES['skins']['myskin']['name']= myskin;
Have fun with your new icons
Backend-Skin in TYPO3 4.4: Inspiring people to
Technical changes under the hood share

47. How To? In depth studies
Own Extensions - TYPE-Icon
Uses Cases:
Own PageType,
Own „Contains Module“ in Pages,
new Type for tt_content ....
NEED to Update your Extension for v4.4
add following code to extTables.php
t3lib_SpriteManager::addTcaTypeIcon($table, $type,
t3lib_extMgm::extRelPath($EXT_KEY) . /path/to/my/icon.png)
Example:
t3lib_spriteManager::addTcaTypeIcon('pages',
'contains-news' , $pathToNewNewsIcon);
Backend-Skin in TYPO3 4.4: Inspiring people to
Technical changes under the hood share

48. Further reading
Web resources
doc_core_skinning (work in progress)
http://forge.typo3.org/projects/show/typo3v4-doc_core_skinning
EXT:pagemodulecss
http://forge.typo3.org/projects/show/extension-pagemodulecss
slides will be available on slideshare.net
Backend-Skin in TYPO3 4.4: Inspiring people to
Technical changes under the hood share

49. ?????
??
?
??
??
?
Backend-Skin in TYPO3 4.4: Inspiring people to
Technical changes under the hood share

50. inspiring people to share.