Select to view content in your preferred language

change on-screen icon size

6743
19
Jump to solution
01-22-2016 09:57 AM
DaveOrlando
Occasional Contributor III

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;
}

DOM_Explorer.jpg

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

0 Kudos
19 Replies
CCWeedcontrol
Regular Contributor

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?

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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

0 Kudos
CCWeedcontrol
Regular Contributor

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
0 Kudos
RobertScheitlin__GISP
MVP Emeritus

I have not attempted this with the launchpad theme.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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.

0 Kudos
StephanieKölker
New Contributor

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
Occasional Contributor III

which file does this occur in?

0 Kudos
StephanieKölker
New Contributor

Hi George,

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

Does this answer your question?

CCWeedcontrol
Regular Contributor

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.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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