Change Font of LayerList widget

[NanShang]

Hi,

I am new to the web app builder, I am trying to change the font of layerlist widget to Arial, how to do that?

Thanks.

[RobertScheitlin__GISP]

Nan,

  Adding these two css rules to the apps theme common.css file will accomplish that.

div[widgetid^="widgets_LayerList_Widget"]{
  font-family: Arial;
}

.jimu-widget-layerList .layers-section .layer-list-title {
  font-family: Arial;
}‍‍‍‍‍‍‍

[NanShang]

Hi, Robert,

Thank you for your help. So I tested adding the code in the theme commen.css file, and then refresh the server, but nothing changed at all. I am not very familiar with this, is there anything wrong?.

[RobertScheitlin__GISP]

Nan,

  Did you make the change in the particular app you are testing (i.e. [install dir]\server\apps\[app#]\themes\[theme name]\common.css?

[NanShang]

Yes, I added the code at the end of this file.

[RobertScheitlin__GISP]

Nan,

   If you made the change in the common.css in that directory then it is probably just a caching issue you need to go to the site and in your browser and click Ctrl + F5 to load the web page without using cache.

[NanShang]

Hi, Robert,

Thank you for your patience, but I cleared the cache and reload the website, still the same font. I changed the LayerList widget name from LayerList to Map Feature Selection, is it possibly related to this? If so how to change the code?

[RobertScheitlin__GISP]

Nan,

   It may be that I just don't have enough info yet. Where is the LayerList widget in your app? Is is in the header controller or on screen placeholder or in the jewelry box theme drawer?

[NanShang]

Hi, Robert,

I used the web builder app online developed my app, using Jewelry Theme, and added the LayerList widget in the right panel from the header controller.

[RobertScheitlin__GISP · Accepted solution]

Nan,

   OK. I don't work with AGOL version of WAB very often.

So in your case add those rules to the "[your app name]/themes/JewelryBoxTheme/styles/yellow/style.css"