Search code examples
pythonhtmlcsspopupfolium

Is it possible to change the popup background colour in folium?

I'm trying to change the popup window background colour. I've tried a bunch of things with no success. i suspect that i have to get into the css of leaflet to change the colour of the background based on research however i'm not sure how i can do that.

Here is the function i'm working with:

def MapCircle(data_set_index):
"""
:param data_set_index: Takes input of the index that contains the relevant data needed to plot each point on
the map.
:return: returns the plots on the map.
"""
html_popup = folium.Html(**'''
<!doctype html>
<html>

<h1 style='color: red;'>{country}
<body style='color: blue;'>
</h1>
<br/>

<h1>
Cases: {cases}
</h1>
<br/>

<h1> 
New Cases: {newcases}
</h1>
<br/>

</body>
</html>
'''**.format(country=data_set_index[3], cases=data_set_index[4],
                                               newcases=data_set_index[2]), script=True)

popup_settings = folium.Popup(html_popup, max_width=300, min_width=200)

folium.Circle(location=[data_set_index[0], data_set_index[1]],
              radius=80000, color='#C03A3A', fill=True,
              popup=popup_settings).add_to(world_map)

I've tried css strings such as, but ofcourse i can't pass that through..

<style> .leaflet-popup-content-wrapper {background-color:black; color:white} </style>

Any form of pointing me in the right direction would be much appreciated! Oh and i'm using folium in python, if that helps any questions.

enter image description here

Solution

  • Probably a bit late for you @Zeevex but incase anyone else lands here, as I did

    html_to_insert = "<style>.leaflet-popup-content-wrapper, .leaflet-popup.tip {background-color: #000 !important; }</style>"

map_.get_root().header.add_child(folium.Element(html_to_insert))