Change Font of LayerList widget

1088
10
Jump to solution
01-09-2020 12:16 AM
NanShang
New Contributor

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.

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

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"

View solution in original post

10 Replies
RobertScheitlin__GISP
MVP Emeritus

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;
}
0 Kudos
NanShang
New Contributor

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

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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?

0 Kudos
NanShang
New Contributor

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

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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.

0 Kudos
NanShang
New Contributor

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?

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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?

0 Kudos
NanShang
New Contributor

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.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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"