Change pop-up colors

[AndrewNiederhauser1]

Can somebody point me in the direction of changing the pop-up title color for a particular theme and color?

I hijacked the blue style for the Foldable theme and changed it to a lighter blue for the header background but can't find where to change the title color for the pop-up. I changed the header color in the file location below.

themes\FoldableTheme\styles\blue

Note the difference in colors between the header in the top part of the image and the different pop-up title color below.

Thanks,

Andrew

[RobertScheitlin__GISP · Accepted solution]

Andrew,

   Here is the css I use (change the work black for the themes style color name you are wanting to change):

.FoldableTheme.black .jimu-on-screen-widget-panel > .jimu-panel-title,

.FoldableTheme.black .esriPopup .titlePane {

  background-color: rgb(0, 0, 0);

  background-color: rgba(0, 0, 0, 1);

}

[AndrewNiederhauser1]

Thank you Robert,

Can you share the file and path where is this information is saved?

Thanks again,

Andrew

[RobertScheitlin__GISP]

Andrew,

   Sure place it in the [install dir]\server\apps\[app number]\themes\FoldableTheme\styles\[theme color]\style.css

[AndrewNiederhauser1]

That did it! Thank you Robert.

[RobertScheitlin__GISP]

Andrew,

   Glad to help. If you will mark the question as answered it would be appreciated. To do this you need to open the thread (you can not do this from inside your inbox) by clicking on the thread title "Change pop-up colors" and then you will see a green star next to "Correct Answer" link just click that link on the thread that answered you question. This will help other find the thread that is the answer to your question and will remove this thread from the unanswered questions list.

[LindseyStone]

I did the same thing and my widget container widgets and popup stayed the original color.  Using your provided code in this thread it changed both headers, but what about the buttons??

[RobertScheitlin__GISP]

Lindsey,

   You have to add the .search-button to part of that rule:

.FoldableTheme.black .search-btn,

.FoldableTheme.black .jimu-on-screen-widget-panel > .jimu-panel-title,

.FoldableTheme.black .esriPopup .titlePane {

  background-color: rgb(0, 0, 0);

  background-color: rgba(0, 0, 0, 1);

}

[LindseyStone]

I didn't know what the exact code was for that search button.  That worked great!  Thanks Robert!