topic Re: Change Font of LayerList widget in ArcGIS Web AppBuilder Questions

Change Font of LayerList widget

NanShang — Thu, 09 Jan 2020 08:16:17 GMT

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.

Re: Change Font of LayerList widget

RobertScheitlin__GISP — Sun, 12 Dec 2021 03:18:07 GMT

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;
}‍‍‍‍‍‍‍

Re: Change Font of LayerList widget

NanShang — Thu, 09 Jan 2020 17:15:04 GMT

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

Re: Change Font of LayerList widget

RobertScheitlin__GISP — Thu, 09 Jan 2020 17:28:13 GMT

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?

Re: Change Font of LayerList widget

NanShang — Thu, 09 Jan 2020 17:33:06 GMT

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

Re: Change Font of LayerList widget

RobertScheitlin__GISP — Thu, 09 Jan 2020 17:38:20 GMT

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.

Re: Change Font of LayerList widget

NanShang — Thu, 09 Jan 2020 17:52:14 GMT

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?

Re: Change Font of LayerList widget

RobertScheitlin__GISP — Thu, 09 Jan 2020 19:10:22 GMT

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?

Re: Change Font of LayerList widget

NanShang — Thu, 09 Jan 2020 19:23:42 GMT

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.

Re: Change Font of LayerList widget

RobertScheitlin__GISP — Thu, 09 Jan 2020 19:42:21 GMT

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"

Re: Change Font of LayerList widget

NanShang — Thu, 09 Jan 2020 20:14:07 GMT

Hi, Robert,

Thanks, it worked!