Change pop-up colors

2474
8
Jump to solution
10-23-2015 09:12 PM
Highlighted
New Contributor III

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

Tags (1)
Reply
0 Kudos
1 Solution

Accepted Solutions
Highlighted
MVP Esteemed Contributor

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);

}

View solution in original post

8 Replies
Highlighted
MVP Esteemed Contributor

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);

}

View solution in original post

Highlighted
New Contributor III

Thank you Robert,

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

Thanks again,

Andrew

Reply
0 Kudos
Highlighted
MVP Esteemed Contributor

Andrew,

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

Highlighted
New Contributor III

That did it! Thank you Robert.

Reply
0 Kudos
Highlighted
MVP Esteemed Contributor

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.

Highlighted
Occasional Contributor II

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??

Reply
0 Kudos
Highlighted
MVP Esteemed Contributor

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);

}

Highlighted
Occasional Contributor II

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

Reply
0 Kudos