Mike,
Well this will take some effort. I will outline the step below:
1. Add the about widget to one of the widget place holders
2. Modify the apps main config.json to use bottom parameter instead of top:
{
"position": {
"left": 55,
"bottom": 45,
"relativeTo": "map"
},
"id": "About_24",
"name": "About",
"label": "About",
"version": "2.0.1",
"uri": "widgets/About/Widget",
"config": "configs/About/config_About.json",
"icon": "configs/About/icon_About.jpeg"
},
3. go into the configs/About/ folder and replace the small resized icon image with your desired size image (icon_About.jpeg in my case).
4. Next go to the [install dir]\server\apps\[app#]\jimu.js\OnScreenWidgetIcon.js and add this bold code to the postCreate function:
postCreate: function(){
this.inherited(arguments);
this.iconNode = html.create('img', {
src: this.widgetConfig.icon
}, this.domNode);
html.setAttr(this.domNode, 'title', this.widgetConfig.label);
html.setAttr(this.domNode, 'data-widget-name', this.widgetConfig.name);
this.own(on(this.domNode, 'click', lang.hitch(this, function(){
this.onClick();
})));
if(this.widgetConfig.label === "About"){
html.addClass(this.domNode, "myAbout");
}
5. Now open the [install dir]\server\apps\[app#]\jimu.js\css\jimu.css and add these new css rules bolded below to the
/*css for PreloadWidgetIcon dijit*/ section:
/*css for PreloadWidgetIcon dijit*/
.jimu-widget-onscreen-icon{
position: absolute;
cursor: pointer;
border-radius: 4px;
}
.jimu-widget-onscreen-icon img{
width: 20px;
height: 20px;
margin: 10px;
}
.jimu-widget-onscreen-icon.myAbout{
position: absolute;
cursor: pointer;
border-radius: 0;
width:150px!important;
height:75px!important;
}
.jimu-widget-onscreen-icon.myAbout img{
width: 150px;
height: 75px;
margin: 1px;
}
That should take care of it.
