T3Skin CSS Naming Conventions & Iconset

Language: en

Keywords: Iconset, naming conventions

Copyright 2000-2009, Team 3 @ T3UXW 20009

This document is published under the Open Content License

available from http://www.opencontent.org/opl.shtml

The content of this document is related to TYPO3

- a GNU/GPL CMS/Framework available from www.typo3.org

Table of Contents

T3Skin CSS Naming Conventions & Iconset	1

Actions	3

actions-document	3

actions-edit	3

actions-insert	4

actions-move	4

actions-page	4

actions-selection	5

actions-system	5

actions-template	5

actions-version	6

actions-view	6

Apps	7

apps-filetree	7

apps-pagetree	7

apps-toolbar	8

apps-toolbar-menu-shortcut	8

Mimetypes	9

mimetypes	9

Status	10

status-dialog, -status & -warning	10

status-overlay	10

Suggested new filetype Icons	11

Users manual	12

FAQ	12

Is this the final version?	12

Most of the icons are referenced. The Document might be extended in future.	12

We to find other or missing icons?	12

Although we tried to replace all icons, there might be some icons missing. In this case please refer to the fam fam fam icon set: http://www.famfamfam.com/lab/icons/silk/	12

Use the most suitable referring to style and implement into the T3Skin naming conventions.	12

What is it all good for?	12

Structured naming conventions and filetrees are helping all developers to maintain and reuse the predefined T3Skin.	12

It will be more easy to find CSS classes + icons and it will be more easy to extend the current skin - or even create your own skin - relying on the basic structure of T3Skin, just by exchanging or extending the visual elements.	12

Administration	13

FAQ	13

Configuration	14

FAQ	14

Reference	14

Tutorial	15

Known problems	16

To-Do list	17

ChangeLog	18

1Important guidelines	19

HowTo update a manual to the new layout	20

Issues with Open Office documentation for TYPO3	21

Inserting images	21

Paragraph styles	21

Linking	22

Meta data and updates	22

Help by documentation.openoffice.org	22

Actions

actions-document

Icon	Usage/Info	Naming
		actions-document-close
		actions-document-duplicates-select
		actions-document-export-csv
		actions-document-export-t3d
		actions-document-history-open
		actions-document-import-t3d
		actions-document-info
		actions-document-localize
		actions-document-move
		actions-document-new
		actions-document-open
		document-open-read-only
		actions-document-paste-after
		actions-document-paste-into
		actions-document-save
		actions-document-save-close
		actions-document-save-new
		actions-document-save-view
		actions-document-select
		actions-document-view

actions-edit

Icon	Usage/Info	Naming
		actions-edit-add
		actions-edit-copy
		actions-edit-copy-release
		actions-edit-cut
		actions-edit-cut-release
		actions-edit-delete
		actions-edit-undelete
		actions-edit-hide
		actions-edit-localize-status-high
		actions-edit-localize-status-low
		actions-edit-pick-date
		actions-edit-rename
		actions-edit-undo
		actions-edit-unhide
		actions-edit-upload

actions-insert

Icon	Usage/Info	Naming
		actions-insert-record
		actions-insert-reference

actions-move

Icon	Usage/Info	Naming
		actions-move-move
		actions-edit-move-down
		actions-edit-move-left
		actions-edit-move-right
		actions-edit-move-to-bottom
		actions-edit-move-to-top
		actions-edit-move-up

actions-page

Icon	Usage/Info	Naming
		actions-edit-page-move
		actions-edit-page-new
		actions-edit-page-open

actions-selection

Icon	Usage/Info	Naming
		actions-selection-delete

actions-system

Icon	Usage/Info	Naming
		actions-system-cache-clear
		actions-system-cache-clear-impact-high
		actions-system-cache-clear-impact-low
		actions-system-cache-clear-impact-medium
		actions-system-cache-clear-rte
		actions-system-backend-user-emulate
		actions-system-backend-user-switch
		actions-system-extension-documentation
		actions-system-extension-download
		actions-system-extension-import
		actions-system-extension-install
		actions-system-extension-uninstall
		actions-system-extension-update
		actions-system-help-open
		actions-system-list-open
		actions-system-refresh
		actions-system-shortcut-new
		actions-system-tree-search-open
		actions-system-typoscript-documentation-open

actions-template

Icon	Usage/Info	Naming
		actions-template-new

actions-version

Icon	Usage/Info	Naming
		actions-version-document-remove
		actions-version-page-open
		actions-version-swap-version
		actions-version-swap-workspace

actions-view

Icon	Usage/Info	Naming
		actions-view-go-back
		actions-view-go-down
		actions-view-go-forward
		actions-view-go-up
		actions-view-list-collapse
		actions-view-list-expand
		actions-view-table-collapse
		actions-view-table-expand
		actions-view-window-open
		actions-view-paging-first
		actions-view-paging-first-disabled
		actions-view-paging-last
		actions-view-paging-last-disabled
		actions-view-paging-next
		actions-view-paging-next-disabled
		actions-view-paging-previous
		actions-view-paging-previous-disabled

Apps

apps-clipboard

Icon	Usage/Info	Naming
		apps-clipboard-images
		apps-clipboard-list

apps-filetree

Icon	Usage/Info	Naming
	Filetree root	apps-filetree-root
	Filemount	apps-filetree-mount
	Default Folder	apps-filetree-folder-default
	Add	apps-filetree-folder-add
	Temporary	apps-filetree-folder-temp
	Locked	apps-filetree-folder-locked
	List	apps-filetree-folder-list
	Media	apps-filetree-folder-media
	News	apps-filetree-folder-news
	User	apps-filetree-folder-user

apps-pagetree

Icon	Usage/Info	Naming
	Pagetree root	apps-pagetree-root
	Domain	apps-pagetree-page-domain
	Default page	apps-pagetree-page-default
	Not in menu	apps-pagetree-page-not-in-menu
	Advanced page	apps-pagetree-page-advanced
	Restricted page	apps-pagetree-page-frontend-user
	FE user group	apps-pagetree-page-frontend-users
	BE user	apps-pagetree-page-backend-user
	BE user group	apps-pagetree-page-backend-users
	Shortcut internal	apps-pagetree-page-shortcut
	Mountpoint	apps-pagetree-page-mountpoint
	No icon Found	apps-pagetree-page-no-icon-found
	Shortcut external	apps-pagetree-page-shortcut-external
	SysFolder	apps-pagetree-folder-default
	Spacer	apps-pagetree-spacer
		apps-pagetree-drag-move-between
		apps-pagetree-drag-move-into
		apps-pagetree-drag-new-between
		apps-pagetree-drag-new-inside
		apps-pagetree-drag-place-denied

apps-toolbar

Icon	Usage/Info	Naming
		apps-toolbar-menu-shortcut
		apps-toolbar-menu-workspace

Mimetypes

mimetypes

Icon	Usage/Info	Naming
		mimetypes-text-csv
		mimetypes-x-content-divider
		mimetypes-x-content-form
		mimetypes-x-content-form-search
		mimetypes-x-content-header
		mimetypes-x-content-html
		mimetypes-x-content-image
		mimetypes-x-content-link
		mimetypes-x-content-list-bullets
		mimetypes-x-content-list-files
		mimetypes-x-content-login
		mimetypes-x-content-menu
		mimetypes-x-content-multimedia
		mimetypes-x-content-plugin
		mimetypes-x-content-script
		mimetypes-x-content-table
		mimetypes-x-content-template
		mimetypes-x-content-template-static
		mimetypes-x-content-text
		mimetypes-x-content-text-picture

Status

status-dialog, -status & -warning

Icon	Usage/Info	Naming
		status-dialog-error
		status-dialog-information
		status-dialog-notification
		status-dialog-ok
		status-dialog-warning
		status-status-icon-missing
		status-status-checked
		status-status-current
		status-status-edit-read-only
		status-status-icon-missing
		status-warning-in-use
		status-status-locked
		status-status-permission-denied
		status-status-permission-granted
		status-status-reference-hard
		status-status-reference-soft
		status-status-workspace-draft
		status-system-extension-required
		status-warning-lock

status-overlay

Icon	Usage/Info	Naming
	BE user	status-overlay-access-restrited
	Deleted	status-overlay-deleted
	Hidden	status-overlay-hidden
	Locked	status-overlay-locked
	No icon found	status-overlay-icon-missing
	Subsections	status-overlay-includes-subpages
	Timed object	status-overlay-scheduled
	Language	status-overlay-translated

status-user

Icon	Usage/Info	Naming
		status-user-admin
		status-user-backend
		status-user-frontend
		status-user-group-backend
		status-user-group-frontend

Suggested new filetype Icons

Icon	Usage/Info	Files
	Audio	
	Video	
	Images	
	TYPO3	
	Sourcecode	
	Database	
	3DCAD	
	Compressed	
	Executables	
	Office	
	Web	
	Other	

Users manual

Documentation of how to use the Iconset properly, how it works, how to apply CSS and naming conventions

Examples: For the "News" plugin this would be a manual showing how to create the news-items, explaining the options etc.

Target group: Users, Administrators or Developers in that priority. Depends on the extension.

FAQ

Is this the final version?

Most of the icons are referenced. The Document might be extended in future.

We to find other or missing icons?

Although we tried to replace all icons, there might be some icons missing. In this case please refer to the fam fam fam icon set: http://www.famfamfam.com/lab/icons/silk/

Use the most suitable referring to style and implement into the T3Skin naming conventions.

What is it all good for?

Structured naming conventions and filetrees are helping all developers to maintain and reuse the predefined T3Skin.

It will be more easy to find CSS classes + icons and it will be more easy to extend the current skin - or even create your own skin - relying on the basic structure of T3Skin, just by exchanging or extending the visual elements.

Administration

Describes how to manage the extension from a superuser point of view. That relates to Page/User TSconfig, permissions, configuration etc. which administrator level users have access to.

language should be non/semi-technical, explaining, using small examples.

Target group: Administrators

FAQ

Possible subsections: FAQ

Configuration

Technical information; Installation, Reference of TypoScript, configuration options on system level, how to extend it, the technical details, how to debug it.

language should be technical, assuming developer knowledge of TYPO3. Small examples/visuals are always encouraged.

Target group: Developers

FAQ

Possible subsections: FAQ

Subheadlines

You can produce subheadlines in a section using “Heading 4” or “Heading 5” (normally used for “Examples”)

Reference

Possible subsections: Reference (TypoScript)

Property:	Data type:	Description:	Default:
allWrap /+stdWrap	wrap	Wraps the whole item	
wrapItemAndSub	wrap	Wraps the whole item and any submenu concatenated to it.	
subst_elementUid	boolean	If set, all appearances of the string '{elementUid}' in the total element html-code (after wrapped in .allWrap} is substituted with the uid number of the menu item. This is useful if you want to insert an identification code in the HTML in order to manipulate properties with JavaScript.	
RO_chBgColor	string	If property RO is set (see below) then you can set this property to a certain set of parameters which will allow you to change the background color of eg. the tablecell when the mouse rolls over you text-link. Syntax: [over-color] | [out-color] | [id-prefix] Example: page = PAGE page.typeNum = 0 page.10 = HMENU page.10.wrap = <table border=1>|</table> page.10.1 = TMENU page.10.1.NO { allWrap = <tr><td valign=top id="1tmenu{elementUid}" style="background:#eeeeee;">|</td></tr> subst_elementUid = 1 RO_chBgColor = #cccccc | #eeeeee | 1tmenu RO = 1 } This example will start out with the table cells in #eeeeee and change them to #cccccc (and back) when rolled over. The “1tmenu” string is a unique id for the menu items. You may not need it (unless the same menu items are more than once on a page), but the important thing is that the id of the table cell has the exact same label before the {elementUid} (red marks). The other important thing is that you DO set a default background color for the cell with the style-attribute (blue marking). If you do not, Mozilla browsers will behave a little strange by not capturing the mouseout event the first time it's triggered.	

[tsref:(cObject).TEST]

Example

Here you would show an example of the stuff from the reference or so:

page = PAGE

page.typeNum = 0

page.10 = TEXT

page.10.value = HELLO WORLD

Tutorial

A full point-a-to-b-to-c walk-through of an application of the extension. Include screendumps.

Language: As tutorials are...

Target group: Whatever fits.

Known problems

Use this section for important warnings about bugs, problems or performance issues. This is where you should explain shortcomings of the extension, so people are properly warned. Be honest.

Target group: Mostly Developers

To-Do list

A wish list of things you want to add or fix. This includes smaller problems/bugs which are best described as a todo item.

Visions for what the extension could become with more development.

ChangeLog

Create a file "ChangeLog" (see e.g. the extension "cal" as example) to inform about changes or

Use this section to document all the changes through the versions.

Important guidelines

HowTo update a manual to the new layout

With these steps you get it very fast:

Copy everything from your old manual except the title page and the table of contents

Delete contents from new manual but leave the title page and the table of contents there

Paste your content and check that formatting is correct and images are in place

Update the page properties with your extension key, e-mail-address, name, language, tagging.
In the moment the language- and tagging-properties are not in use by the TER, but findable by search.

Reload the table of content (right click update index table)

Insert your extension key below the document title

Ready.

Hint: When the header-styles are still in the old layout then clear and re-assign the new style. Get help from http://documentation.openoffice.org

Issues with Open Office documentation for TYPO3

There are a few important points to make about writing documentation for TYPO3 in Open Office. Please makes sure to follow these.

Inserting images

When you insert images you can either:

Make a copy/paste from eg. Photoshop, but it's REALLY IMPORTANT that you insert the image into Open Office by the menu “Edit > Paste Special” and then select “Bitmap”. If you don't do it in this way the image cannot be shown (since it will not be stored as a PNG internally in the SXW file)

Alternatively you can use the traditional way “Insert > Graphics > From file” and insert an image from your harddrive. In particular use this if the image is photographic (JPG) since the internal storage as PNG is not good for photographs.

Generally please use copy/paste only for screendumps with large areas of similar color (good png-compression) and JPG-files for photographic images. Go for small images, 72 dpi, medium quality.

Paragraph styles

Use the paragraph style “Text body” for bodytext

Use “Heading 1” to “Heading 5” for headers. “Heading 1-3” will be recognized as “sections” on typo3.org. “Heading 4-5” is subheaders, where “Heading 5” is preferrably for “Examples”.

For code listings, use the style “Preformatted Text” (found under “HTML Styles”). For codelistings in tables there is a custom style called “Table Contents/PRE”.

This screenshot shows the only paragraph styles allowed in the documents. The ones grayed out are paragraph styles that are used by default for such as the index table or the footer. The others are the ones you are allowed to use.

Linking

You can make hyperlinks in the documents as absolute URLs. Use menu “Insert > Hyperlink”

Meta data and updates

There are three fields of meta-data you have to fill in. First of all go to “File > Properties...”.

In the “Description” screen you enter the title of the document. Extension manuals are prefixed “EXT: [extension title]”

In the “User defined” screen you enter your email address as the first field (named “Email” / ”Info 1”)

In the “User defined” screen you enter your full name as the second field (named “Author” / ”Info 2”)

Finally you should also insert the correct extension key in the text below the document title, but this is not a meta-data field, just regular text.

Help by documentation.openoffice.org

See the international portal for help: http://documentation.openoffice.org

EXT: Readable name of your extension - extensionkey	Issues with Open Office documentation for TYPO3

22

EXT: Readable name of your extension

extensionkey

keywords comma-separated

The keywords help with categorizing and tagging of the manuals. You can combine two or more keywords and add additional keywords yourself. Please use at least one keyword from both lists.
If your manual is NOT in english, see next tab "language"
----
forEditors (use this for editors / german "Redakteure")
forAdmins (use this for Administrators)
forDevelopers (use this for Developers)
forBeginners (manuals covering TYPO3 basics)
forIntermediates (manuals going into more depth)
forAdvanced (covering the most advanced TYPO3 topics)
see more: http://wiki.typo3.org/doc_template#tags
----

Kasper Skårhøj

2002-11-01T00:32:00

André Wartmann

Kasper Skårhøj