Recent Bloggers

David H Nebinger

67 Publications
20 février 2018

Jamie Sammons

Staff
11 Publications
19 février 2018

Iacopo Colonnelli

2 Publications
17 février 2018

Christian Klein

1 Publications
15 février 2018

Jose M. Navarro

Staff
8 Publications
14 février 2018

Sergio González

Staff
5 Publications
13 février 2018

Minhchau Dang

Staff
15 Publications
31 janvier 2018

Koen Olaerts

3 Publications
30 janvier 2018

Fabian Larroca

1 Publications
25 janvier 2018

Vitaliy Koshelenko

3 Publications
12 janvier 2018
« Retour

liferay-7 Themelet

Technical Blogs 9 janvier 2018 Par gulnaaz Shaik

Themelets are small, extendable, and reusable pieces of code. They help to avoid duplication of code. Code that can be reused in other themes can be written in themelet which can be extended to any theme. Unlike Theme in Themelets we will be including only the files in which there are code changes.

 

Here i have lr-7-theme which looks like below

I will be creating a themelet using Theme-generator to modify the look and feel of the theme.

In command prompt navigate to your workspace or wherever you want your generated themelet to be and enter  yo liferay-theme:themelet

 

Theme generator would ask for Themelet name, Themelet id, version enter the values respectively.(Refer attachment below)

The generated themelet contains a package.json file with configuraion information and a src/css directory that contains a _custom.scss file. Just like a theme, all the updated files go into the src directory.

 

Themelet needs to be installed globally so that it can be recognized by generator.

Navigate to the themelet directory which got created and run the command npm link

This creates a globally-installed symbolic link for the themelet in your npm packages directory.

 

Add the required css to the created themelet to

lr-7-themelet\src\css\_custom.scss and save the file.

 

Navigate to your theme directory, to which this themelet has to be extended and execute the command: 

gulp extend

 

Follow the prompts

 

 

 

Select the themelet you want to extend

lr-7-theme is now extended to lr-7-themelet.

Deploy the theme using command gulp deploy

Below is the changed look & feel of the page

Aucun commentaire. Soyez le premier.