change on-screen icon size

[DaveOrlando]

hello,

I'm sure the developers are probably tired of us mucking in their code, but I really want to make my on-screen icons bigger.

I found where to change the size of the image within the icon, but not the icon itself, it gets overwritten from the 'Inline style'

this is in ~\jimu.js\css\jimu.css

/*css for PreloadWidgetIcon dijit*/
.jimu-widget-onscreen-icon{
  width: 105px; /*added*/
  height: 105px; /*added*/
  position: absolute;
  cursor: pointer;
  border-radius: 4px;
}
.jimu-widget-onscreen-icon img{
  width: 80px; /*changed*/
  height: 80px; /*changed*/
  margin: 10px;
}

if there is some easy code to change, please let me know, thanks.

[CCWeedcontrol]

I am editing the \server\apps\6\jimu.js\css.

Would it have something to do with the fact that two icons are not original WAB icons?

[RobertScheitlin__GISP]

You have completed the other steps outlined in this thread beside the css portion right?

[CCWeedcontrol]

I didn't not complete the other outlined steps. I didn't because i am not sure where excellently i need to edit the Main Config.json file of the application or of WAB 2.4? I do not see anything "lef": 145 in my app Config.json file. I am using the launch pad theme.

This is to move the second and third icons over

• Main config.json
  • Change left to 145 and 235 to the second and third

[RobertScheitlin__GISP]

I have not attempted this with the launchpad theme.

[RobertScheitlin__GISP]

CC Weedcontrol,

   For the launchpad the css location and numbers are different, along with the main config.json being "right" not "left"

The css file to change is [instal dir]\server\apps\[app #]\themes\LaunchpadTheme\styles\default\css\jimu-override.css (same css rule).

You will have to play with the numbers yourself.

[StephanieKölker]

For WAB 2.5 the custimization of On-Screen-Widgets gets a little bit easier, I would suggust. I did the following steps:

• jimu.js/css/jimu.css
• .jimu-widget-onscreen-icon img{
    width: [yourWidgetSize];
    height: [yourWidgetSize];
    margin: [yourWidgetSize];
  }
• BaseLayoutManager:
  • _createOnScreenWidgetIcon: funktion() -> Change jimuUtils.getPositionStyle({}) - Submethod with:
    • width: [yourWidgetSize];
    • height:  [yourWidgetSize];

Kind Regards

Stephanie

[GeorgeKatsambas]

which file does this occur in?

[StephanieKölker]

Hi George,

the files are in the jimu.js folder. The BaseLayoutManager is in the folder layoutManagers.

Does this answer your question?

[CCWeedcontrol]

I've tried lots of times to increase the icon size on multiple apps but i've never been successful. Stephanie, I tried your recommendation but i get the same results. The icon shadow size goes bigger but the actual icon picture stays the same. I am currently testing this on WAB 2.7.

[RobertScheitlin__GISP]

Start a new question and I will show you how to do this in 2.7