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
Solved! Go to Solution.
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);
....
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);
....
Absolutely perfect. Thank you Sir!