Custom themes are created by layering your customizations on top of one of Liferay’s built-in themes.
The structure of a theme separates different types of resources into easily accessible folders. Here’s the full structure of our Deep Blue theme:
_diffs/- subfolders not created by default.
- (many directories)
_diffs folder that’s created inside the
docroot directory of your theme is important; this is where you place your theme’s code. The
_diffs folder must mirror the parent theme’s directory structure. Since you’ll only customize the parts of your theme that differ from the parent theme, place only the folders and files you’ll customize there.
The other folders inside
docroot were copied over from the parent theme in your Liferay bundle when you deployed your theme. Use these files as the basis for your modifications. For example, to customize the navigation, copy
deep-blue-theme/docroot/templates/navigation.vm into the
deep-blue-theme/docroot/_diffs/templates folder (you may have to create this folder first). You can then open this file and customize it to your liking.
For custom styles, create a folder named
css inside your
_diffs folder and place a single file there called
custom.css. This is where you’ll define all your new styles. Because
custom.css is loaded last, styles defined here override any styles in the parent theme.
It’s a best practice to add your styles only to the
custom.css file. This keeps all of your changes in one place and makes future upgrades easier, because you won’t have to manually modify your templates to add support for new Liferay features.
Whenever you modify your theme in Developer Studio, redeploy it by right-clicking your theme (located underneath your server), then selecting Redeploy from the menu.
Alternatively, redeploy your theme by opening a terminal, navigating to
themes/deep-blue-theme and entering the command
Wait a few seconds until the theme deploys, then refresh your browser to see your changes.
Would you rather see your changes immediately, rather than having to redeploy to make your changes visible? Let’s talk about Liferay Developer Mode to learn how.