Use Ant Customize command in Hybris

Hybris Logo

1. Overview

In Hybris, there are two types of files and directories :

  • Custom files : The source code that we write, change and commit (eg. custom extensions).
  • Read only files : The binary files that we can’t/shouldn’t change (eg. platform).

However, you may need to replace some read only binary files, eg. customize HMc css style.

To do so, you have to :

  1. Copy the original file that you want to customize inside the ${HYBRIS_CONFIG_DIR}/customize directory.
  2. Update and customize the file.
  3. Run ant customize.

In this article, I will show you how to use ant customize command.

2. Ant customize in action

For example, to customize the CSS style of the HMc, you need to replace the hmc.css file located in the ${HYBRIS_BIN_DIR}/ext-platform-optional/hmc/web/webroot/css directory.

2.1. Copy original file

Copy the hmc.css file inside inside the ${HYBRIS_CONFIG_DIR}/customize.

You have to keep the same folder structure, which mean  ${HYBRIS_CONFIG_DIR}/customize/ext-platform-optional/hmc/web/webroot/css/hmc.css.

2.2. Update/Customize file

For this example, I will change the HMc header color.

/*** ... ***/

.page-header {
   height: 71px;
   background-color: red;
   color: #ffffff;
   vertical-align:top;
   text-align:left;
   white-space:nowrap;
   color: #ffffff;
   font-size: 10px;
}

/*** ... ***/

Update only the block you want to customize and keep the rest of the file.

2.3. Run ant customize

The ant customize command, will replace the customized files with original ones.

Start the Hybris server (run ant all if it’s needed) and see your changes.

Change hmc css style in Hybris

 

7
Leave a Reply

avatar
3 Comment threads
4 Thread replies
2 Followers
 
Most reacted comment
Hottest comment thread
3 Comment authors
NickMouad EL FakirNupur Gupta Recent comment authors

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
newest oldest most voted
Notify of
Nupur Gupta
Guest
Nupur Gupta

Hi
But if i want to change some classes of ext-commerce extension and i perform same steps then it will create a problem during git versioning because i cannot push my files present in config folder

Nick
Guest
Nick

Hey Mouad!
I am really sorry for the off-topic question, but I haven’t managed to find the answer on the Internet.
The thing is that in the docs it is stated that setting autocreate to false on the item type level should cause build failure in case the item type is a new one.
Let’s say I create my new own type:

The build is successful, which is strange

Thank you in advance!

Nupur Gupta
Guest
Nupur Gupta

Hi Mouad,

I have a question on above post, let suppose i need to customise some UI for browser area of csmcockpit by adding some new buttons and functionality let say big customisation then it will involve lots of file changes from different dependant extension and to copy them in config is it recommendable.

Main thing is , is it recommendable to do big customisations?

Thanks in advance