Anatomy of Theme

When we create a new theme it has the following structure

• docroot
  
  • _diffs
  • css
  • images
  • js
  • META-INF
  • templates
  • WEB-INF
    
    • lib
    • liferay-look-and-feel.xml
    • liferay-plugin-pacakage.properties

_diffs : It stands for differences.The files in this directory will override the portal default styles
css : It has sub folders and sub files.Each of the files have some particular specification as follows

File Name	Purpose	Example
application.css	This file defines the stylesheets for general use of all the servlets and portlet applications	Search results table .results-header
base.css	Style definitions for browser normalization and customized styles for HTML Elements	Ul,li
custom.css	This file is empty by default.We should customize the styles which are defined in _style theme
dockbar.css	Styles for the dockbar portlets
extra.css	Newly added style definitions
forms.css	Styling for form input elements
layout.css	Css classes used for the layout templates
navigation.css	Specific classes related to navigation bar in a theme
portlet.css	Styling specific to portlet	Portlet  title bar,portlet content,portlet border
main.css	Imports the rest of css files.Open this file and observe.

images : It contains all the images of the portal in a segregated manner. You can find the respective images in a respective folders by name itself.
js : It has only one file i.e main.js.It contains the javascript  code related to theme
templates : It contains the velocity or free marker template files.

File Name	Purpose
Init_custom.ftl	To initialize custom velocity variables.
Navigation.ftl	For two level menu style in creating theme
Portal_noraml.ftl	It generates whole HTML file and send it to the browser
Portal_pop_up.ftl	For rendering of a popup window in Liferay portal
Portlet.ftl	For rendering portlet

 
WEB-INF : It contains liferay-look-and-feel.xml and liferay-plugin-package.properties
   liferay-look-and-feel.xml: It contains the themeId and theme settings and to get the color scheme
   liferay-plugin-package.properties : It contains the information about the theme name,licences
   and version