We’ve recently installed two new Liferay themes to our 6.1 Liferay instances that are immediately at your use. The first one is based on Initializr2 theme by Wasim Shaikh. We just made it more easily customizable by adding support for custom css you can include and customizable header and footer web content articles. All you need to do is create the CSS template in web content and set the id in theme settings. Same thing applies for the web content articles. The second theme is called Minimal and that it truly is. It is based on _styled theme that is the base theme used in Liferay plugins sdk and we added the same extensions as with the Initializr2 theme so you can easily add your custom css and some custom html to both header and footer of the theme. You can preview both themes in the theme gallery page.
So how do you create custom css for these themes. It’s actually pretty simple:
- Go to Control Panel -> Web Content on the site you want to use the theme.
- Open Templates and Click Add Template.
- Select template language CSS as indicated below and then click Launch Editor
- Remove anything in the editor and place your CSS and hit update
- Now give the template a name and hit save.
- Then we need to take note of the template id as indicated below
- Now all we need to do is set the css template id to the theme settings. You can find those under Site Pages -> Look and Feel
- Now just place the css template id from step 6 and place it in css-template-id field and hit save
Now you are ready to customize either theme and create a beautiful site.