Light Theme - BGCOLOR changes light_theme.style.css

[jeeva]

Dear Team,

I have changed .form-control{} class background color to yellow , but after changing this also am not able to see background color change in Kibana.
Could you please help me , how to change the background color in light theme.

Thanks
S.Jeeva

[rashmi (kulkarni)]

Hello,

Kibana packages up files into the root level /optimize directory before serving them to the browser. If your server isn't running in development mode, or the files in the optimize directory aren't updated, then your changes won't be visible.

https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#development-environment-setup is a good resource for getting a dev environment setup.

If you have downloaded a packaged version of Kibana (off https://www.elastic.co/downloads/kibana for example) and want to make a quick change without setting up a dev environment, deleting the contents of the optimize folder will cause the server to rebundle everything when it next starts and changes should be visible.

Hope this helps

Thanks
Rashmi

[jeeva]

Hi Rashmi,

After i deleted contents from optimize folder and restarted Elasticsearch and Kibana , but i could not see the background color change in Kibana dashboard.
Do i need to change any other css files to make Kibana background color to yellow color.

Thanks
S.Jeeva

[rashmi (kulkarni)]

You could also potentially just find the index.html file, add a custom css file of your choosing and do all of your overrides there.

Thanks
Rashmi

[jeeva]

Hi Rashmi,

Is that possible to create new theme like "light color and Dark" , i want to create 'Corporate" theme and i want to apply this custom theme to only one customers.
How to deploy my new 'Corporate' theme in Kibana and it should be visible in Kibana - Advanced Settings page.

Can you guide me to attain this requirement.

Thanks
S.Jeeva

[rashmi (kulkarni)]

For your requirement you could pretty much use our most used feature which is Kibana- spaces.
Spaces allows you to organize your dashboards, visualizations, and other saved objects into meaningful categories. Each space is independent, so objects that exist in one space don’t clutter other spaces.Rather than modifying colors in the background- this approach will give you more flexibility. And in you still want to have the color changes modifying CSS and rebuilding the packages is the only option.
check this out : https://www.elastic.co/blog/introducing-kibana-spaces-for-organization-and-security

[jeeva]

Thanks Rashmi, Spaces didn't resolved my requirements.
I have one more doubt , is there any option to change visualizations background color changes.

Thanks
S.Jeeva

[rashmi (kulkarni)]

There are many discuss posts around this if you look. ( they are old, but the steps may be same, you may want to check that - posting couple links here:)

Change the backgroundcolor of the chart

I am using the Kibana 4.5. In visualisation tab, I have created my chart and using it as an iframe. I want to change the background color of the chart as per my page(not Kibana) where this iframe fits. Any suggestions.

How to apply custom css in Kibana UI

There's not, hacks don't have an API, they just inject some script into the page. If you wanted to execute code conditionally as you navigate the app, you'd have to implement that yourself. You could, as one solution, watch for changes in the URL and react accordingly. Another way to do this is to write a plugin that simply imports your styles, and use specific CSS selectors to override colors. I believe, though have not tested this, that plugin assets get injects after the core Kibana assets, …

hope it helps
Rashmi