Popup title text Color ?

260
4
Jump to solution
01-16-2020 12:06 AM
Highlighted
Occasional Contributor

Hi,

I set up Web App Builder Developer Edition 2.14 created app using TabTheme, applied custom color (#88165b) for my application and deployed on IIS server.

I am trying to change text color of popup title to white but it doesn't change.

I tried inspect using developer tools, made changes to default.css, common.css, dojo-override.css ...

Where should I put below css to change the title color of Popup 

.esriPopup .titlePane {

    color:white;

}

Thanks,

Mayur

Tags (1)
Reply
0 Kudos
1 Solution

Accepted Solutions
Highlighted
MVP Esteemed Contributor

Mayur,

   The fix for this is to remove all your css changes that you have attempted and comment out some lines in the LayoutManager.js file in the _getFixedThemeStyles function. Lines 4 - 8 below in the function I have commented out.

    _getFixedThemeStyles: function(theme){
//fix popup
var cssText = '.esriPopup .titlePane {background-color: ${mainBackgroundColor} !important;}';
// if(theme.customStyles.mainBackgroundColor && utils.isLightColor(theme.customStyles.mainBackgroundColor)){
// var imageUrl = require.toUrl('jimu') + '/css/images/api_popup_light.png';
// cssText += '.esriPopup .titleButton {background: url(' + imageUrl + ') no-repeat}';
// cssText += '.esriPopup .titlePane {color: black}';
// }
if(theme.name === 'PlateauTheme'){
....

View solution in original post

Reply
0 Kudos
4 Replies
Highlighted
MVP Esteemed Contributor

Mayur,

  In WAB popup the title does not appear in the titlebar it is the first thing in the popups content. In the image below "Traffic Camera:Sherman Minton Br." is the popups title.

Reply
0 Kudos
Highlighted
Occasional Contributor

Hi Robert,

Sorry for confusion, I mean Record Number, Previous - Next , Maximize and close button in Popup title bar.

I tried put css in /jimu.js/css but it doesn't change the color

popup.css

dojo-override.css

You have idea where should I change to make those title bar button color in white ?

Thanks,

Mayur

Reply
0 Kudos
Highlighted
MVP Esteemed Contributor

Mayur,

   The fix for this is to remove all your css changes that you have attempted and comment out some lines in the LayoutManager.js file in the _getFixedThemeStyles function. Lines 4 - 8 below in the function I have commented out.

    _getFixedThemeStyles: function(theme){
//fix popup
var cssText = '.esriPopup .titlePane {background-color: ${mainBackgroundColor} !important;}';
// if(theme.customStyles.mainBackgroundColor && utils.isLightColor(theme.customStyles.mainBackgroundColor)){
// var imageUrl = require.toUrl('jimu') + '/css/images/api_popup_light.png';
// cssText += '.esriPopup .titleButton {background: url(' + imageUrl + ') no-repeat}';
// cssText += '.esriPopup .titlePane {color: black}';
// }
if(theme.name === 'PlateauTheme'){
....

View solution in original post

Reply
0 Kudos
Highlighted
Occasional Contributor

Hi Robert,

That's perfect! Now I can see the buttons in white color.

Thank you so much.

Thanks,

Mayur

Reply
0 Kudos