We were able to tweak the styles to make the text look more readable, but we didn't do much else. This is your chance to go wild - you can update the background color, change the text color, or do something fancy!
Colby Fayock: [0:00] These popups look pretty decent. What if I wanted to change them to look more like the theme? We can see in the HTML that each of the pop up, it's a className of Leaflet popup.
[0:07] If you look at the leaflet-popup-content-wrapper, you can see that's where it's actually getting the background color of white. We can also see that this is setting the leaflet-popup-tip, which is the bottom piece here.
[0:15] If we copy the selector and we move it into our code, we can create a new set of styles. I'm going to set a background-color to blue violet. Now, if I look on my browser, I can see that that's overriding the way and it's making it blue violet.
[0:26] That's hard to read now. How can I fix that? First, I can set the color.selector to white, which updates all the text, but I can create another selector for all the links and set those to cyan. Now, I can see my updated link color. Finally, I don't think these rounded borders fit in. I'm also going to set my border-radius to zero. Now, I have my popups with the sharp edge.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!