Platinum sponsors
Core Documentation
TYPO3 implements a well known principle for accessing options for elements (database records / files) in the interface; the Context Sensitive Menu. When users click an icon of a database record or a file in most TYPO3 backend modules they can access options for the element in a layer that pops up:
Notice: Users have to left-click (normal click) the elements rather than right-click than they can do in normal GUI applications. This is due to browser limitations that we have not been able to overcome yet.
User TSconfig offers configuration options for the menu. Here are some examples:
options.contextMenu.options.leftIcons = 1
If set, the icons in the clickmenu appear to the left instead of right.
options.contextMenu.pageTree.disableItems = view, edit
This would disable the "Show" and "Edit" items in the CSM when showed in the page tree.
There are more options described in the document "TSconfig".
The CSM is displayed as a DHTML layer made by a <div> block. Scripts that implement CSM for any element has to output two blank <div> blocks with certain id values (contentMenu0/1) inside their HTML body. They provide a placeholder for level 1 and 2 of the CSM.
The <div> blocks are empty by default. The content will be written dynamically to the layers from the top frame where the element specific content is compiled. When a user clicks an icon with a CSM link they actually load a document (alt_clickmenu.php with GET parameters) into the top frame which will create the HTML for the menu layer and then write it back through JavaScript to the <div> layers in the calling document.
This solution means that CSMs don't have any significant performance footprint on the script that implements a CSM. All that is needed is some JavaScript in the <head> of the HTML document and the two <div> layers for the dynamic menu HTML.
The fact that the top frame is used for generating the CSM can be seen in browsers that does not support writing content dynamically to the <div> layers in the calling document. For those browsers the top frame will show the menu items in a horizontal order:
You can also enable this to happen even if the CSM HTML is also written to the <div> layers. Just set this "User TSconfig":
options.contextMenu.options.alwaysShowClickMenuInTopFrame = 1
For details on the API for adding elements, please see "TYPO3 Core API".
The basic engine behind copying and moving elements around in TYPO3 is the clipboard (t3lib/class.t3lib_clipboard.php). The clipboard simply registers a reference to the element(s) (file or database record) put on the clipboard. The clipboard is saved in the session data and normally lasts for the login session.
The clipboard content can be seen in the Web>List module if you enable "Show clipboard":
The clipboard has multiple "pads", a "Normal" pad an a series of "numeric pads" named "Clipboard #xxx".
The "Normal" pad can contain one element at a time. The element is registered for "copy" or "cut" operation (depending on the function that selected it for the clipboard). The "Normal" pad is always used from the CSM (Context Sensitive Menu) elements.The "Normal" pad is used for most standard copy/cut/paste operations you need.
The numeric pads can contain multiple elements, even mixed between database elements and files/folders. Registering elements to a numeric pad is done from the Web>List or File>Filelist modules when they are in the "Extended view" mode and a numeric pad is enabled. "Copy" or "Cut" mode is toggled for the whole selection by a button on the clipboard.The "Numeric pads" are used for advanced needs where typically many elements has to be copied/moved in one operation.
When you are using the CSMs to copy/cut/paste elements around you will automatically use the Normal pad on the clipboard. Internally that is where TYPO3 registers the element.
In the CSM you always have a "Cut" and "Copy" option and depending on the context you might also have "Paste into" and "Paste after".
"Paste into" equals the normal "Paste" operation from a file system; it will paste the element into the file folder / page you pointed to.
"Paste after" is special for TYPO3s page tree or record lists where elements might be arranged in a special order. In that case you need a function like "Paste after" which can insert an element below the element you clicked in a list of manually ordered items.
In the screenshot above you can see the clipboard related options from the CSM of a page in the page tree.
Below you can see how the File>Filelist module looks when a file is selected on the clipboard. First of all you will get a visual response from the "copy" icon if the current element is the one already selected. You can deselect by selecting "Copy" again. Also you will see that the File>Filelist module (as well as the Web>List module) provides copy/cut/paste icons directly in the list. Finally, notice the clipboard which is opened in the bottom of the list. It shows the selected element and which mode ("Copy" or "Cut") it is selected in.
To select elements to the numeric pads you have to use the File>Filelist or Web>List modules, enable the clipboard and select one of the numeric pads. In the file or record lists you can now tick off which elements to select and click the "Select" icon to move the selection to the clipboard:
The screen will be reloaded and the selected elements shown in both the list and the open clipboard:
Paste operations are done by the paste icons provided in the list.
Notice that in this case three files are also on the same pad. This is allowed but obviously they will not be possible to paste where database records can be pasted - an vice versa.
In the File>Filelist module you will see that the files are the active elements if you go there:
The clipboard has controls to enable thumbnail display for image files:
You can also switch between "Copy" and "Cut" modes. This is necessary particularly when operating on the numeric pads:
In "TYPO3 Core API" there is an example of how you can access elements registered on the clipboard.
With TYPO3 3.6.0 it is possible to create skins for TYPO3 which will affect not only the CSS styles used in the backend but also provide alternatives for all icons in the interface. The result is an interface with a totally different look but maintaining the same structure:
This screenshot is from the skin extension “skin360” which is an example of how skins can be made. The “skin360” extension is therefore a good place to start to look if you want to create your own skins.
In “TYPO3 Core API” you can find a section which documents the API for TYPO3 skins. Use this section in conjunction with example extensions like “skin360”.
Skins make it possible to personalize TYPO3 for your own purposes. For instance you can insert a customers logo or your own companys logo and style. However it is very important that you do not go so far that you effectively rebrand TYPO3!
Rebranding TYPO3 is illegal (by default copyright and trademark laws, see details here). Rebranding means that you give the TYPO3 CMS "another name", presumably to sell “your product” to a customer. So never try to brand TYPO3 as if it was your own product to which you have the copyright. Always make sure your custom is aware that they get TYPO3 which is free under the GPL license.
But how far can you go then? Well, with skinning you can actually change all graphics of the application, including the login screen logo and logo in the top left corner of the backend. As long as these logos do not give the impression that the CMS is something else than TYPO3 you can personalize these logos as much as you like. You can name them after the company to which you sell the solution so it feels personal for them. Or you could mix TYPO3s logo with your companys logo, stating something like “My Company proudly uses TYPO3 blablabla” or whatever.
The main reason why you can change these logos is that the official TYPO3 logo and name is included in the copyright notice of the login screen and “About Modules” screen. This notice must never be changed by you and must display "as is". This is what ultimately identifies to the user that the underlying CMS is in fact TYPO3, not something else.
On this screenshot below you can see it in effect: The top logo (#1) could be the one of your company or customer, adding a personal touch to the login screen. In the bottom (#2) you will see the TYPO3 logo and product name in the copyright notice. This must not be changed.
Notice, that the bottom message (#2) is not something we have made up ourselves but required by the GPL license according to this part of the license:
...
If the program is interactive, make it output a short notice like this
when it starts in an interactive mode:
Gnomovision version 69, Copyright (C) year name of author
Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
This is free software, and you are welcome to redistribute it
under certain conditions; type `show c' for details.
...
(The GPL license can be found in the file “GPL.txt” inside the TYPO3 source code)
