Kibana CSS changed on plugin install

[HungryHumps]

After installing the plugin, the buttons and banners will change their rendered output from default. Noticeable on the visualisations buttons, as well as error banners.

[nreese]

Can you provide some screen shots. I am not sure what you are talking about

[iamyourexpert]

I think if you change the dashboard to dark background, the viz shows a white bar.

[HungryHumps]

Hi all, sorry for late reply.

This is what I am expecting, the regular Kibana:

But after installing the plugin, the buttons change like seen in this one (banners change in a similar way too):

Additional info: ELK Stack version is 5.1.2, Running on CentOS 7 Kibana is served through a nginx reverse proxy

BTW, Love the plugin! So much better than original tile maps, “enhanced tile maps” should be the default tile map viz, if u ask me

Thanks for the support, Humphrey

On 24 Mar 2017, at 9:58 PM, Nathan Reese notifications@github.com wrote:

Can you provide some screen shots. I am not sure what you are talking about

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/nreese/enhanced_tilemap/issues/47#issuecomment-289029656, or mute the thread https://github.com/notifications/unsubscribe-auth/AGXLU3QdIwbQROuhblsdwNQp-HQf06Tyks5ro8wGgaJpZM4Mn4sF.

[nreese]

Looks like the screen shots did not make it into the issue. Can you try reposting them?

[szydan]

The issue is that your less file is declaring some classes on root level e.g: https://github.com/nreese/enhanced_tilemap/blob/master/public/vis.less#L37

To avoid messing other components styles you should make the css more specific Classes which are used in main plugin viev should all be wrapped in etm-vis class like

 .etm-vis {
    .btn-input:hover {
      color: #2D2D2D;
    }
    ... HERE REST OF THE CLASSES 

}

The same should be done for options screen https://github.com/nreese/enhanced_tilemap/blob/master/public/options.html

by wrapping the whole view in a single div with a class

<div class="etm-vis-options">
</div>

and then again in less wrap all classes used in this view like

 .etm-vis-options {
    ... HERE ALL CLASSES USED IN OPTIONS VIEW
}

In this way your css will not mess up with other plugins and kibana

[mehmetfurkanaydin]

Enhanced Tilemap plugin uses bootstrap-theme.css and this file changes default Kibana styles.

[nreese]

Closing. New releases (https://github.com/nreese/enhanced_tilemap/releases/tag/v2017-09-23 and onward) remove bootstrap CSS from plugin. The bootstrap CSS was stomping on kibana's CSS