nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

myTheme esriPopupMobile color

TracySchloss

I made my own theme from the blue FoldableTheme and called it myblue. I notice that although the popups are styled with my blue color, the mobile popups are not. I tried adding this to the myblue/style.css, but it didn't work:

.esriPopupMobile .titlePane {

background-color: #CBDDEB;

}

I added important to the color, but it didn't make any difference. I'm confused why I was able to easily override esri.Popup .titlePane with my own color, but adding .esriPopupMobile .titlePane had no effect.

Encuentra más publicaciones etiquetadas con

Accepted answers

RobertScheitlin__GISP

Tracy,

OK that is where your testing and mine differ. I am not sure where you are making this change (i.e. which .css file), but I am making the change in my apps theme/FoldableTheme/styles/olive/style.css which take priority over most other .css files.

Now "olive" is my custom style color in the FoldableTheme.

All comments

RobertScheitlin__GISP

Tracy,

When you are done configuring the app you go to the home screen in WAB and click on the ... icon and choose download. From there is minifies/uglifies some of the code and packages it into a zip. So yes. You can see what the app# is for the app you are working on by looking in the browsers address bar when configuring the app.

TracySchloss

So this is all bundled together then, when I export it to move to the server? I find it confusing that everything just has an app number and no names. Then again, I've only been messing with this a few days, so it will take time to get the hang of it.

TracySchloss

I'm trying to change it in my stemapp/themes/FoldableTheme/styles/myblue/style.css.

If I change the color on the server, yes, it is the right blue color. I'm trying to understand if I always have to make these changes here, or if I can go back to stemapp , so I don't always have to make these modification per app.

The other thing I don't understand is that if I'm in the Design environment, where you're doing all your configurations, if you click 'Launch' the popups are almost all of the mobile style. On the one that I deployed (copied to my server), the popups are more likely to be the more standard looking popup. I am in the same brower, just a different tab.

RobertScheitlin__GISP

Tracy,

Now "olive" is my custom style color in the FoldableTheme.

TracySchloss

Good catch, but no that didn't do it. If I do an 'inspect element' while debugging, I see that the style is coming from esri.css. I wonder if that makes a difference compared to having it come from myblue/style.css I would have thought the styles from my own theme would take precedence.

If I change the background while inspecting the element, it is changed on the map. It doesn't work if I put a line in stylesheet.

RobertScheitlin__GISP

Tracy,

Change it to:

.esriPopupMobile .titlePane {
  background: #5a6b4d;
}

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

Todas las Comunidades
Publicaciones Recientes
Contenido Seguido
Ayuda de la Comunidad

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.