This article needs updating. For more information, please see Wiki - Need Updating.
This document outlines the naming conventions for specific elements in Liferay.
Folder and File Conventions for Images #
Liferay follows strict naming conventions for themes and their resources, including folder and file names. A theme's images will be located in the images folder within the theme's root directory, e.g: eggplant-theme\images. Within the images folder there are 22 sub-folders with names category names like dock, navigation, and portlet. It is important to know the proper locations for theme images and then also what to name them, and the creation of new image folders is strongly discouraged.
Image Folder Names Descriptions #
- arrows - Any images designed to mark or indicate a direction will go into this folder.
- blogs - Any images designed to highlight, indicate and/or work with/within a blog, journal, diary, any regularly updated entries, or other periodic articles system will go into this folder..
- chat - Any images designed to highlight, indicate, and/or work with/within chat, or any other interactive real-time, synchronous, communication will go into this folder.
- color_picker - Any images designed to express a range of color characteristics or color customizations of an object go into this folder.
- dock - Any images designed to exist within the Liferay Dock and/or its menu system will go into this folder.
- document_library - Any images designed to identify a particular file type or file extension such as ".bmp", ".css", ".doc" will go into this folder.
- emoticons - Any images designed to represent or express emotions will go into this folder.
- forms - Any images designed for an object or an area where the user is able to input data for processing will go into this folder.
- language - Any images designed to convey or differentiate between languages or language options will go into this folder.
- mail - Any images that are particularly or foremost designed to highlight or be used within a mail, messaging, or transmission systems will go into this folder.
- message_boards - Any images designed to highlight, indicate, and/or work with/within a virtual message board, bulletin board, or newsgroup will go into this folder.
- messages - Any images designed to alert, request, or give important messages to the user will go into this folder.
- navigation - Any images designed to work with/within a navigation menu will go into this folder.
- portlet - Any images designed to work with/within the Liferay Portlet system will go into this folder.
- progress_bar - Any images designed to convey the progress or percentage complete of a task will go into this folder.
- ratings - Any images designed to convey a rating or evaluation of an object will go into this folder.
- shadow - Any images designed to add a boundary shading to an object will go into this folder.
- shopping - Any images designed to work with/within a virtual shopping cart, goods, and other market services program will go into this folder.
- trees - Any images designed to convey or differentiate between object nodes, structures, and levels will go into this folder.
- wiki - Any images designed to work with or within a wiki resource will go into this folder.
- common - Any other non-specific, non-portlet images , typically for layout or other thematic styles, will go into this folder.
Color Schemes Image Folders #
In previous versions, Liferay has had the ability to create virtual themes-within-themes, allowing theme creators to express different color schemes that visually retain the same look and feel of original. In Liferay 4.3 and above, this concept has been expanded to allow greater flexibility to child themes / sub-themes development.
images/color_schemes/ is a virtual images differences folder for a theme with multiple color schemes, although it is no longer limited to color schemes. Since images cannot inherently have dynamic color, hue, or other visual transformations applied to them, some images may need to be replaced to express a difference in a differing color scheme / sub-theme.
images/color_schemes/theme-name/ acts as a virtual root for these necessary image replacements. More precisely, inside the color_schemes/ folder exists a series of sub-folders for each scheme (eg. blue/, green/ orange/). These sub-folders are the equivalent of the theme's root images folder ( eg. green versions of images within the images/ folder would be placed into the images/color_schemes/green/ folder. )
Other Image Names Descriptions #
- thumbnail.png - This is a small 160x120 screenshot of the theme as it should appear to the user.
- liferay.ico - This is a small icon displayed in the user's browser, typically next to the URL in the address bar.
Theme Image File Names Conventions #
Liferay follows a convention of all lowercase filenames with no dashes or spaces. What would otherwise be a space in a filename becomes an underscore (e.g. my object bg.png becomes my_object_bg.png).
- common\page_bg - Page background.
- common\banner_bg - Banner background.
- common\wrapper_bg - Content wrapper background.
- dock\menu_bar - Dock menu bar background.
- dock\menu_bg - Dock menu drop-down background.
- navigation\bg - Main navigation background. May be on a div, ul, li, a, or span tag.
- navigation\item - Individual navigation item background. May be on a li, a, or span tag.