cancel
Showing results for 
Search instead for 
Did you mean: 

Info Box in Product Cockpit

former_member638588
Participant
0 Kudos

Hi

Is there way to move the Info box in the product cockpit to move upwards,

As show in the screenshot

Accepted Solutions (1)

Accepted Solutions (1)

Former Member
0 Kudos

Hi Yashwanth,

I believe that there's no ootb configuration that allow you to move the info box upwards. But If you really need to do that then I'd suggest start investigation from de.hybris.platform.cockpit.components.navigationarea.NavigationAreaComponent.NavigationAreaComponent() and de.hybris.platform.cockpit.components.navigationarea.renderer.InfoBoxRenderer.render(Component parent)

former_member638588
Participant
0 Kudos

Hi,

Can you please tell me how can i override the class NavigationAreaComponent

Former Member
0 Kudos

Hi Yashwanth,

Your custom NavigationAreaComponent should be replaced in /productcockpit/web/webroot/cockpit/baseNavigation.zul which in its turn can be overridden using ant buildcallbacks, here's a similar question with replacing ootb css files in cs cockpit - How do I override css definition in cscockpit?, it will be similar to zul.

But I like Tobias' solution more, seems that you accepted my answer too soon:)

Answers (1)

Answers (1)

Former Member
0 Kudos

Hi Yashwanth, If you only want to move the info box, you can do it easily with pure CSS. If you're able to extend or override the CSS files (see themeConfig in productcockpit-web-spring.xml) you can add the following lines in order to move the info box (navigation_area_south) to the top and move the navigation area a bit to the bottom. Given the fact that all these elements are positioned absolute, it's natural to move them.

 /* step 1: move info to the top */
 .navigation_area_south {
     top:95px;
     bottom:inherit;
 }
 
 /* step 2: move the main navigation a little down to make space for the info box */
 .navigation_center {
     top:120px;
     bottom:0;
 }

If you like to test the result, you can go into your browser code inspector and change/add the css rules properties directly. Or add the above rules temporarily to your productcockpit.css file.

former_member638588
Participant
0 Kudos

Thank you for the information.