Change color of font of pop up

487
3
01-13-2023 08:05 AM
KARIMLABIDI
Occasional Contributor

Hello , 

I would like to change my pop up style and I'll trying to change the font and it doesn't work. I'll working with the sassy theme. 

Like you can see, the background color change but not the center and I don't know how to change the font. I didn't find the font color option.

Thank you for your help!

.sassy-theme .esri-widget
      .sassy-theme .esri-widget--button,
      .sassy-theme .esri-menu,

      .sassy-theme .esri-popup,
     .sassy-theme .esri-popup__main-container{
        background-color: rgb(27, 27, 9);
      }
      
.sassy-theme .esri-widget.esri-search,
      .sassy-theme .esri-search .esri-widget--button ,
      .sassy-theme .esri-widget .esri-menu
      {
        background-color: rgb(198, 198, 63);
        color: rgb(121, 5, 50);
        font-size:larger;
        font-family: 'Montserrat';
      }
     .sassy-theme .esri-attribution
     .sassy-theme .esri-attribution a
    
     .sassy-theme .esri-popup .esri-attribution
     
      .sassy-theme .esri-popup .esri-popup__pointer-direction,
      .sassy-theme .esri-popup .esri-popup__button,
      .sassy-theme .esri-button,
      .sassy-theme .esri-input,
      .sassy-theme .esri-widget a

KARIMLABIDI_0-1673625835248.png

 

0 Kudos
3 Replies
DavidSolari
Occasional Contributor III

For what it's worth, here's what the selectors look like after I ran the CSS through a formatter:

.sassy-theme .esri-widget .sassy-theme .esri-widget--button, .sassy-theme .esri-menu, .sassy-theme .esri-popup, .sassy-theme .esri-popup__main-container{
     background-color: rgb(27, 27, 9);
}
 .sassy-theme .esri-widget.esri-search, .sassy-theme .esri-search .esri-widget--button , .sassy-theme .esri-widget .esri-menu {
     background-color: rgb(198, 198, 63);
     color: rgb(121, 5, 50);
     font-size:larger;
     font-family: 'Montserrat';
}
 .sassy-theme .esri-attribution .sassy-theme .esri-attribution a .sassy-theme .esri-popup .esri-attribution .sassy-theme .esri-popup .esri-popup__pointer-direction, .sassy-theme .esri-popup .esri-popup__button, .sassy-theme .esri-button, .sassy-theme .esri-input, .sassy-theme .esri-widget a

The formatter flagged the last line as an error, maybe the extra definitions are conflicting with something? If it's not that, crack open your dev tools and look at the cascade order on those text elements. You might have to select a more specific element, maybe something related to tables.

0 Kudos
KARIMLABIDI
Occasional Contributor

Thank you @DavidSolari . With the link https://github.com/Esri/arcgis-js-api/blob/4master/assets/esri/themes/base/widgets/_Popup.scss, I found solutions. Now, I miss the border, i didn't find for now. I 'm still searching...

KARIMLABIDI_0-1673883321882.png

 

0 Kudos
KARIMLABIDI
Occasional Contributor

So, unfortunetaly, I didn't find antyhing about theses borders. 

KARIMLABIDI_0-1673905907494.png

It's possible to fit the content but it doesn't work  like I Want !

KARIMLABIDI_1-1673905991847.png

If someone knows about these things, it would be very nice 🙂

Thank you!

 

0 Kudos