Share

Cloning of Classic Theme / Creating a Theme

What theme is comprises of?
  • Dockbar
  • Company Logo
  • Navigation Bar
  • Footer
By default Liferay comes with four themes and those are
  • _styled
  • _ unstyled
  • classic
  • control_panel
The above themes have some hierarchy i.e



1. In eclipse Liferay  IDE File | New | Liferay Plugin Project
2. A Dialogue box will be shown to you to enter the Project Name as CustomTheme then
    automatically display name become CustomTheme
3. Keep the default values for Liferay Plugins SDK and Liferay Portal Runtime
4. Select the Theme in Plugin Type Selection area.
5. Click on Finish
A theme will be appear in the Project Explorer


If you observe the created theme folder structure by default it comes with a some set of folders and set of files inside it.If you want to know about each and every file then go through the this link.

6. Now run the ant-deploy of theme.

Checking theme is deployed or not / Apply the theme to a page

1. Login as Administrator
2. Navigate to Add|Page and give the page name as CustomTheme
3. Click on the AddPage and page will be created with the given name
4. Goto the newly created page then click on the edit icon of the page in the leftside icons navigation menu


5. In the Edit Page menu you can find the Look and Feel subsection if you scroll down
6. Click on the radio button for Define a specific look and feel for this page.


7. You will find a our theme "CustomTheme" under Available themes whose Thumbnail is missing
8. Click on the Radio button of that theme and click on the SAVE button.The page will be refreshed and theme will be applied to the page.The screen looks as follows


How to set the Thumbnail image for Theme

1. Take one image
2. Resize it as per requirements
3. Name it as a "thumbnail.png"
4. Paste it in CustomTheme/docroot/images
5. Run the ant-deploy
6. Now observe the screen.The theme shows the thumbnail  image as follows


When we create a theme by default it inherits _styled.So if you observe above screen ,It is applied our CustomTheme and not yet styled.
1. To know that one open build.xml of theme and you can find that theme.parent value as "_styled"
2. Change the that value as "classic"
3. Run ant-deploy
4. Create a new page name as "ClassicCustomTheme" and  applied our theme  CustomTheme.

The above process is also called Cloning of Classic Theme

No comments:

Post a Comment