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

user_10138963 0
Viewed 1290

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

folium popup css html python
2 Answers

Very far from being the ultimate solution, but as a workaround you could use the power of IFrame():

import folium

m = folium.Map(location=[-25.274398, 133.775136],
               zoom_start=4)

html = '''<body style="background-color:pink;"><p style="color:red;">Australia</p>
<p>Cases: 8,886</p>
<p>New Cases: +131</p></body>'''

iframe = folium.IFrame(html,
                       width=200,
                       height=120)

popup = folium.Popup(iframe)

marker = folium.Marker([-25.274398, 133.775136],
                       popup=popup).add_to(m)
m

and you get:

enter image description here

user_103376300

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))
user_89174960
Related