7.3.2. Defining Content Type Icons
A significant number of content type icons are already defined. See
Table 7.1, “Content Type Icons” for an overview. Special cases, though, might not be
covered by these icons.
| Icon | CSS class |
|---|
|
| content-type-CMArticle-icon
|
|
| content-type-CMAudio-icon
|
|
| content-type-CMCSS-icon
|
|
| content-type-CMChannel-icon
|
|
| content-type-CMCollection-icon
|
|
| content-type-CMDownload-icon
|
|
| content-type-CMExternalLink-icon
|
|
| content-type-CMFavDirectory-icon
|
|
| content-type-CMFolder-icon
|
|
| content-type-CMGallery-icon
|
|
| content-type-CMHTML-icon
|
|
| content-type-CMImageMap-icon |
|
| content-type-CMInteractive-icon
|
|
| content-type-CMJavaScript-icon
|
|
| content-type-CMMedia-icon
|
|
| content-type-CMNamedDynamicList-icon
|
|
| content-type-CMObject-icon
|
|
| content-type-CMPicture-icon
|
|
| content-type-CMSettings-icon |
|
| content-type-CMSearchDirectory-icon
|
|
| content-type-CMSite-icon
|
| content-type-CMSitemap-icon
|
| content-type-CMTaxonomy-icon |
|
| content-type-CMTeaser-icon
|
|
| content-type-CMVideo-icon
|
|
| content-type-CMViewtype-icon
|
|
| content-type-Dictionary-icon
|
|
| content-type-Preferences-icon
|
|
| content-type-Query-icon
|
Table 7.1. Content Type Icons
If you want to provide custom icons, you should use black outlines (#3d4242) and
white fill (#ffffff). Instead of white, you may also use a gray gradient form
#ffffff to #b3b3b3. A gradient is actually preferred for large
icons. In order to maintain a style that is consistent with the default icons, use color
sparingly, if at all. The icons have to be placed on a transparent background. All standard
icons are strictly 2-dimensional.
You have to provide four different images. You can then add CSS rules to use your own icons as
background images of type icon HTML elements. The four images are used in the following cases:
16x16-pixel icons for use on a white background. Your CSS styles should use this image
when an element is tagged with your style class and the style class
content-type-xs.
16x16-pixel icons for use on a light gray or colored background. Unlike the other icons,
these icons should not use a white fill. Instead, use a transparent fill or a black to
transparent gradient. Your CSS styles should use this image when an element is tagged with
your style class and the style classes content-type-xs and
content-type-transparent.
64x64-pixel icons for use on a white background. As a rule of thumb, use 2-pixel outlines
instead of single pixels for 16x16 icons. Your CSS styles should use this image when an
element is tagged with your style class and the style class content-type-l.
128x128-pixel icons for use on a white background. Your CSS styles should use this image
when an element is tagged with your style class and the style class
content-type-xl.
Assuming your style class is called myIconClass, you might want to define the
following rules:
.content-type-xs.myIconClass{
background-image:url('...')!important;
}
.content-type-transparent.content-type-xs.myIconClass{
background-image:url('...')!important;
}
.content-type-l.myIconClass{
background-image:url('...')!important;
}
.content-type-xl.myIconClass{
background-image:url('...')!important;
}
If you omit the rule for the content-type-transparent class, the browser will
fall back to the first rule, showing icons with a solid fill.
If you define many content type icons, consider grouping the icons in a single sprite image,
using the background-position attribute in your CSS to select the correct icon.
If you want to show the content type icons in your Studio document tab, then
you need to include the following rules for each content type style class:
.silicium-tab .x-tab-strip-text.content-type-myIconClass{
background-image:url('.../16x16/myIcon-pos')!important;
}
.silicium-tab.x-tab-strip-active .x-tab-strip-text.content-type-myIconClass{
background-image:url('.../16x16/myIcon-neg')!important;
}
By using the rules above, the status icon (checked-out state, editing state etc.) will replace the content type icon, if applicable.
