Introduction:
Creating a theme sometimes becomes time-consuming and challenging to provide a consistent look and feel across all the pages of a Liferay portal. What if we make a website look cool without using our own created Liferay theme but using Liferay’s by default classic theme?
Let’s dive into Liferay’s out-of-the-box functionality and discover new ways to elevate the aesthetics of our portal. By thinking outside the box, we can create a unique and captivating user experience that breaks free from the traditional approach of making a Liferay theme.
Prerequisites:
- Liferay 7.4
Steps to be taken to create a website:
Here are the steps to create a website without using a Liferay theme:
- Create a CSS file in any code editor, such as Visual Studio Code.
- Upload your CSS file in Document and Media by selecting “File Upload.”
![Document and media | Utilizing the no-code concept for Liferay website branding Document and media](https://www.ignek.com/wp-content/uploads/2024/04/Document-and-media.webp)
- Copy the link address of your CSS file.
![Copy link address | Utilizing the no-code concept for Liferay website branding Copy link address](https://www.ignek.com/wp-content/uploads/2024/04/Copy-link-address.webp)
- Go to Client Extensions from Applications.
![Location of client | Utilizing the no-code concept for Liferay website branding Location of client extension](https://www.ignek.com/wp-content/uploads/2024/04/Location-of-client-extension.webp)
- Add your CSS file by selecting “Add CSS.”
![Add CSS in client | Utilizing the no-code concept for Liferay website branding Add CSS in client extension](https://www.ignek.com/wp-content/uploads/2024/04/Add-CSS-in-client-extension.webp)
- Give a name and paste the copied link address in the CSS URL in a way that the below image shows, and publish it.
![Create the client | Utilizing the no-code concept for Liferay website branding Create the client extension](https://www.ignek.com/wp-content/uploads/2024/04/Create-the-client-extension.webp)
- Go to Pages from the site builder and click the setting icon.
![Pages setting | Utilizing the no-code concept for Liferay website branding Pages setting](https://www.ignek.com/wp-content/uploads/2024/04/Pages-setting.webp)
- Add CSS client extensions and save them.
![Add client | Utilizing the no-code concept for Liferay website branding Add client extension](https://www.ignek.com/wp-content/uploads/2024/04/Add-client-extension.webp)
- Select the file that you want to upload to the website.
![Upload client | Utilizing the no-code concept for Liferay website branding Upload client extension](https://www.ignek.com/wp-content/uploads/2024/04/Upload-client-extension.webp)
- Now whatever CSS code you wrote on that file will be loaded on the Liferay page.