Your theme’s directory structure should reflect the one below when it is complete:
_diffs/(subfolders not created by default)
aui- (many directories) -
- (many directories)
Themes are based on differences from the themes they are based on. When you created the project, you selected the _styled theme. A copy of this theme’s code, therefore, exists in most of these folders. This ensures that you have default styling for all elements of the page. As you write your theme, you’ll define only the differences between what you want and what the underlying theme already provides.
Your edits should be made to the files in the
_diffs directory, which then
transfer to the files in the parent directory. For this reason, the directory in
_diffs folder must mirror the parent directory. If the structures do not
match, the changes you make will not be applied. To keep the base files
unaltered, you should only add the files you want to edit to the
As a best practice, all of your CSS styling should go in a
_diffs/css/ directory. Because it is loaded last, all the styles placed
custom.css override styles in the parent base theme. By keeping all your
styles in one file, maintenance becomes an easier process.
Now that you’re familiar with the theme structure and development workflow, you can begin working on your theme.
_diffsfolder in the Package Explorer and select New → Folder.
_diffsfolder selected, enter
cssfor the Folder name and click Finish.
Repeat steps 1 and 2 to create the remaining
custom.cssfile from the
docroot/css/directory to your
_diffs/cssdirectory. All the changes you make to the
custom.cssfile in your
_diffsdirectory get applied to the mirrored file.
docroot/templatesdirectory to the
You now have the starting point for your theme. There are a few additional housekeeping items to take care of before you move on to the next section.
_aui_variables.scssand add the following variables to the top:
$bkColor: #FFF; $themeMainColor: #DF5946;
Copy the lunar-resort-logo.png from the
/imagesdirectory of the code folder into the
_diffs/imagesdirectory of the theme.
Finally, install the
guestbook-portlet.warfile developed in the MVC Learning Path by copying it into your Liferay bundle’s
/deploydirectory. You can download this WAR file from this directory in GitHub.
If you haven’t gone through the MVC Learning Path, you should check it out if you are interested in developing applications for Liferay.
Now that the housekeeping is finished, you can examine the HTML for