Bloggers recientes

Carlos Hernandez

Staff
2 Mensajes
24 de febrero de 2018

David H Nebinger

68 Mensajes
23 de febrero de 2018

Jonas Choi

Staff
3 Mensajes
23 de febrero de 2018

Jamie Sammons

Staff
11 Mensajes
19 de febrero de 2018

Iacopo Colonnelli

2 Mensajes
17 de febrero de 2018

Christian Klein

1 Mensajes
15 de febrero de 2018

Jose M. Navarro

Staff
8 Mensajes
14 de febrero de 2018

Maria Sanchez

Staff
18 Mensajes
13 de febrero de 2018

Sergio González

Staff
5 Mensajes
13 de febrero de 2018

Minhchau Dang

Staff
15 Mensajes
31 de enero de 2018
« Atrás

liferay-7 Themelet

Technical Blogs 9 de enero de 2018 Por 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

No hay ningún comentario aún. Sea usted el primero.