Frequently Asked Question

Symptom

• You want to customize globally some items (button colors, fonts...) of all N4V components for all your company.

Environment

• Need4Viz : 2024.1+
  

Resolution

You can use a CSS customization file (custom.css) that is automatically embeded in all N4V component. 

This file will help you to overload the look & feel of many items in N4V elements, defining them in one place.

The custom.css file is located in the N4VCustomElements webapp (generally hosted on your SAPBI tomcat web server), in the following folder : N4VCustomElements\res\css\custom\custom.css

In the 2025.1+ version of N4V, a sample is provided (custom_sample.css). You can try and adapt the content of this file (copy/paste it in the custom.css file) to help you defining your own custom rendering style.

In this sample, you can define 2 colors :

• The main background color of buttons & popup : use RGB component values to define your own color (as provided in example)
• The default buttons text color : use a Hexa value (as provided in example)
• All the depending colors will be automatically calculated

You don't need to restart N4V server (neither the Tomcat server). Just refresh the cache of your browser and the update will be immediately viewable.

The custom.css file is always automatically embedded in all N4V widgets but, sometime, the style of some items are overloaded by the settings you can choose in the Extended Parameters. You may need to make some test and use tricks & tips to enforce the usage of style defined in the custom.css file (for instance, you may need to add an "!important" tag to overload the style) :