Change font size for group layer in LayerList widget

Question

Hi

I would like to change the font size for the group layer name (service) in the layer list widget in order to make them stand out more. I have looked at the CSS file for the widget but cant work out how to do this. Is this possible at all?

Many thanks

Mark

RobertScheitlin__GISP · Accepted Answer

Mark, Here is what you will need to change. 1. In the LayerList widgets style.css. Add this new css rule. .jimu-widget-layerList .div-content.layer-is-group{ font-size: 12px; font-weight:bolder; }‍‍‍‍ 2. In the LayerListView.js: lines 95 - 98 are additions and line 101 is a change. addLayerNode: function(layerInfo, level, toTableNode, position) { var layerTrNode, layerTdNode, ckSelectDiv, ckSelect, imageNoLegendDiv, handle, imageNoLegendNode, popupMenuNode, i, imageShowLegendDiv, divLabel; var rootLayerInfo = layerInfo.getRootLayerInfo(); // if(!this._layerNodeHandles[rootLayerInfo.id]) { // this._layerNodeHandles[rootLayerInfo.id] = []; // } // init _layerDomNodeStorage for rootLayerInfo. if(layerInfo.isRootLayer() || layerInfo.isTable) { this._layerDomNodeStorage[layerInfo.getObjectId()] = { layerTrNode: null, layerContentTrNode: null, layerNodeEventHandles: [], layerNodeReferredDijits: [] }; } var layerTrNodeClass = "layer-tr-node-" + layerInfo.id; layerTrNode = domConstruct.create('tr', { 'class': 'jimu-widget-row layer-row ' + ( /*visible*/ false ? 'jimu-widget-row-selected ' : ' ') + layerTrNodeClass, 'layerTrNodeId': layerInfo.id }); domConstruct.place(layerTrNode, toTableNode, position); layerTdNode = domConstruct.create('td', { 'class': 'col col1' }, layerTrNode); for (i = 0; i < level; i++) { domConstruct.create('div', { 'class': 'begin-blank-div jimu-float-leading', 'innerHTML': '' }, layerTdNode); } imageShowLegendDiv = domConstruct.create('div', { 'class': 'showLegend-div jimu-float-leading', 'imageShowLegendDivId': layerInfo.id }, layerTdNode); ckSelectDiv = domConstruct.create('div', { 'class': 'div-select jimu-float-leading' }, layerTdNode); ckSelect = new CheckBox({ checked: layerInfo.isVisible(), //layerInfo.visible 'class': "visible-checkbox-" + layerInfo.id }); domConstruct.place(ckSelect.domNode, ckSelectDiv); imageNoLegendDiv = domConstruct.create('div', { 'class': 'noLegend-div jimu-float-leading' }, layerTdNode); var imageName; if (layerInfo.isTable) { imageName = 'images/table.png'; } else { imageName = 'images/noLegend.png'; } imageNoLegendNode = domConstruct.create('img', { 'class': 'noLegend-image', 'src': this.layerListWidget.folderUrl + imageName, 'alt': 'l' }, imageNoLegendDiv); if (layerInfo.isTiled || layerInfo.isTable) { domStyle.set(imageShowLegendDiv, 'display', 'none'); domStyle.set(ckSelectDiv, 'display', 'none'); domStyle.set(imageNoLegendDiv, 'display', 'block'); } // set tdNode width domStyle.set(layerTdNode, 'width', level * 12 + 40 + 'px'); var layerTitleTdNode = domConstruct.create('td', { 'class': 'col col2' }, layerTrNode); var grayedTitleClass = ''; try { if (!layerInfo.isInScale()) { grayedTitleClass = 'grayed-title'; } } catch (err) { console.warn(err.message); } var layerTitleDivIdClass = 'layer-title-div-' + layerInfo.id; var layerGroupClass = ''; if(layerInfo.getSubLayers().length > 0){ layerGroupClass = 'layer-is-group '; } divLabel = domConstruct.create('div', { 'innerHTML': layerInfo.title, 'class': layerGroupClass + layerTitleDivIdClass + ' div-content jimu-float-leading ' + grayedTitleClass }, layerTitleTdNode); ....‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍