Your theme’s directory structure should reflect the one below when it is complete:
lunar-resort-theme/
docroot/
_diffs/
(subfolders not created by default)css/
images/
templates/
css/
-aui
- (many directories) -_aui_custom.scss
-_aui_variables.scss
-_liferay_custom.scss
application.css
aui.css
base.css
custom.css
dockbar.css
extras.css
layout.css
main.css
navigation.css
portlet.css
images/
- (many directories)
js/
main.js
templates/
init_custom.ftl
navigation.ftl
portal_normal.ftl
portal_pop_up.ftl
portlet.ftl
WEB-INF/
-liferay-look-and-feel.xml
liferay-plugin-package.properties
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
the _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 _diffs
directory.
As a best practice, all of your CSS styling should go in a custom.css
file
in the _diffs/css/
directory. Because it is loaded last, all the styles placed
in 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.
-
Right-click the
_diffs
folder in the Package Explorer and select New → Folder. -
With the
_diffs
folder selected, entercss
for the Folder name and click Finish. -
Repeat steps 1 and 2 to create the remaining
images
, andtemplates
directories. -
Copy the
custom.css
file from thedocroot/css/
directory to your_diffs/css
directory. All the changes you make to thecustom.css
file in your_diffs
directory get applied to the mirrored file. -
Copy the
_aui_variables.scss
to thediffs/css
directory. -
Copy
init_custom.ftl
,navigation.ftl
, andportal_normal.ftl
from thedocroot/templates
directory to thediffs/templates
directory.
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.
-
Open
_aui_variables.scss
and add the following variables to the top:$bkColor: #FFF; $themeMainColor: #DF5946;
-
Copy the lunar-resort-logo.png from the
/images
directory of the code folder into the_diffs/images
directory of the theme. -
Finally, install the
guestbook-portlet.war
file developed in the MVC Learning Path by copying it into your Liferay bundle’s/deploy
directory. 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
portal_normal.ftl
next.