Themes in Liferay can be customized and created from scratch to meet specific design requirements, or they can be based on pre-built templates that are available from the Liferay community or commercial sources. They can also be applied to individual sites or globally to affect the appearance of the entire portal.
In addition to providing a consistent and visually appealing user interface, Liferay themes can also improve the accessibility and usability of a portal, enhance its branding and identity, and help to create a seamless and engaging user experience for visitors and users.
What is Angular Material UI and how it can help building a better UI (User Interface) ?
The library includes components for common UI elements such as buttons, forms, dialogs, navigation, and more. It also provides support for responsive design, accessibility, and internationalization.
Material UI can help to speed up the development process by providing a consistent and visually appealing set of UI components that can be easily customized to fit specific design requirements. It is also widely used and supported by a large community, with regular updates and improvements being made to the library.
Here’s an example of creating Liferay theme with Angular Material UI
1. Create an Angular application using the Angular CLI:
ng new my-app
2. Add Angular Material and the Liferay theme dependencies to the Angular project:
ng add @angular/material
npm install --save-dev liferay-theme-deps liferay-theme-tasks
3. Use the Liferay Theme Generator to generate a base Liferay theme for Angular, and select Angular Material as the UI framework:
yo liferay-theme:import --includeAngular --includeJSP --includeSass --framework=material
4. Customize the theme as needed by modifying the Angular code and using the Liferay theme configuration files. For example, you can modify the styles in the
// Define your custom theme
$liferay-theme-accent: mat-palette($mat-amber, 600, 800, A200);
$liferay-theme-theme: mat-light-theme($liferay-theme-primary, $liferay-theme-accent, $liferay-theme-warn);
// Include Material Design icons from the icon font
$md-icon-font-path: "~@angular/material/prebuilt-themes/indigo-pink/"; // adjust path to match your setup
5. Use Angular Material’s theming capabilities to customize the look and feel of the UI components. For example, you can change the color scheme of a button:
<button mat-raised-button color="primary">My Button</button>
6. Build the theme using the Liferay theme tasks and deploy it to your Liferay instance:
Note that this is just a basic example and there are many other customization options available for both Liferay and Angular Material. Also, make sure to check the official documentation and best practices for each technology to ensure proper usage.
LiferayUI blog will help you make you own theme to customize your liferay’s portal appearance and impression. With themes, you can alter the user interface completely that it becomes difficult yet impossible to identify that the site is running on Liferay.
Liferay’s theme inherits the styling, images, and templates from any of the built-in themes. This saves your time and keeps your themes smaller and less cluttered, because your theme contains only its own resources, using defaults for the rest, like Templates,Js,Images and CSS.
Theme Development in liferay is easy to create. You can start by making changes in the CSS files. When you need to customize themes more extensively, you can change the HTML Templates.
If you hope to become a Liferay theme development and customization expert, there are several technologies you should know:
- CSS: Create a new theme simply by modifying a CSS file.
- Velocity: Customize the markup generated by the theme.
- XML: Some theme settings are specified in XML.
Creating a Theme
Our theme will be named HM Blue, so the project name (without spaces) is hm-blue, and the display name (which can have spaces) is HM-Blue. Let’s create the theme using Liferay Developer Studio first, and then with the terminal (Command Prompt).
Using Developer Studio:
- Go to File → New → Liferay Project.
- Fill in HM-blue for the Project name and HM Blue for the Display name.
- Select the build type, Plugins SDK, and Liferay runtime.
Select Theme for your Plugin type.
Figure 1 : Make sure to select the Theme plugin type for your theme.
Setting a base Theme
Now you have to Select a theme parent. In Liferay you have two base theme, all themes are built on the top of it, which is assign style and unstyled. Your newly created theme is based on these by default, but they contain very limited styling. You can take advantage of an existing theme’s styling by setting the theme of your choice as the base for your theme. styled theme providing the most basic elements. When you set a different base theme, it’s added on top of styled and overrides the default styling wherever there are differences. After the base themes are added, your own custom styling is affixed on top.
Figure 1.1 : Make sure to select the Theme plugin type for your theme.
By Default it’s select _styled theme. Adding together in to the _styled theme, from the unstyled theme you can select the inherit, which includes no styling. There’s also the classic theme that has a smooth look and feel and works well. For now, select _styled as the theme parent.
Select your theme’s framework. You can select the Freemarker or Velocity template frameworks for your theme. Or you can select JSP as your theme’s framework. For now, select _Velocity framework template framework. See figure 1.1
To specify a base theme, edit the build.xml file for your theme and change _styled in to the name of any existing theme that’s installed or in your Plugins SDK. Now that your base theme is set, let’s deploy the theme to your portal instance.
If you’re already familiar with portlet deployment then theme deployment will be a piece of cake! You can deploy your theme in Developer Studio or the terminal (Command Prompt).
Deploying in Developer Studio: Click and drag your theme project onto your server.
After deploying, your server outputs messages in console to indicating your plugin is available for use.
- Reading plugin package for hm-blue-theme
- Registering themes for hm-blue-theme
- 1 theme for hm-blue-theme is available for use
Let’s apply your theme to a page:
- Go to your web browser and log in to the portal.
- Hover over Manage at the top of the page and click on Page.
- Directly underneath the words Manage Pages, select the Look and Feel tab. Click on your theme to activate it.
Now that you’ve built and redeployed a theme, let’s see the hierarchy of theme.