Make Applicaiton logo larger

4693
16
Jump to solution
02-15-2017 02:20 PM
CCWeedcontrol
Occasional Contributor III

After making some applications i noticed that the logo is always small how do you make logo bigger.

I would image you would have to move the header and the contents to the right.  Can some one show me how to make these changes. please?

16 Replies
RobertScheitlin__GISP
MVP Emeritus

Are you using the default Launch pad theme style?

0 Kudos
CCWeedcontrol
Occasional Contributor III

I just clicked on 'Launchpad Theme' inside Web AppBuilder for ArcGIS.

I created an app (Test2), clicked on 'Launchpad Theme', Clicked on 'Attribute', changed the icon, made changes as i describe above.

See attached.

0 Kudos
CCWeedcontrol
Occasional Contributor III

Thanks to both of you. I was able to make the logo bigger and move the zoom, home and locate icons down.

I just need to move and center the header with GIS app with Web Appbuilder for ArcGIS and the Esri world geocoder. How can move this?

edits i made,

.claro .jimu-widget-header .logo {
    height: 115px !important;
    width: 115px;
    min-width: 50px;
    background-color: #3b8fc4;
    -webkit-border-radius: 50px;
    border-radius: 80px !important;
    position: relative;
    top: -12px !important;
    left: -1px !important;
    -webkit-box-shadow: 0 1px 0.5px rgba(0,0,0,0.3), 0 2px 2px rgba(0,0,0,0.2);
    box-shadow: 0 1px 0.5px rgba(0,0,0,0.3), 0 2px 2px rgba(0,0,0,0.2);
}

Thanks.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Wow that is pretty large. I guess you are not concerned about mobile then.

You would have to adjust the top properties of the header and search widgets in the main config.json:

line 5 and 19 below:

      {
        "uri": "themes/LaunchpadTheme/widgets/Header/Widget",
        "position": {
          "left": 15,
          "top": 37,
          "width": 670,
          "height": 46,
          "relativeTo": "map"
        },
        "version": "2.3",
        "id": "themes_LaunchpadTheme_widgets_Header_Widget_67",
        "icon": "themes/LaunchpadTheme/widgets/Header/images/icon.png?wab_dv=2.1",
        "name": "Header"
      },
      {
        "uri": "widgets/Search/Widget",
        "position": {
          "left": 377,
          "top": 45,
          "width": 300,
          "zIndex": 1,
          "relativeTo": "map"
        },
        "version": "2.3",
        "id": "widgets_Search_Widget_68",
        "icon": "widgets/Search/images/icon.png?wab_dv=2.1",
        "name": "Search"
      },

Also you will need to adjust the top on line 9 too:

.claro .jimu-widget-header .logo {
    height: 115px !important;
    width: 115px;
    min-width: 50px;
    background-color: #3b8fc4;
    -webkit-border-radius: 80px;
    border-radius: 80px !important;
    position: relative;
    top: -32px !important;
    left: -1px !important;
    -webkit-box-shadow: 0 1px 0.5px rgba(0,0,0,0.3), 0 2px 2px rgba(0,0,0,0.2);
    box-shadow: 0 1px 0.5px rgba(0,0,0,0.3), 0 2px 2px rgba(0,0,0,0.2);
}
CCWeedcontrol
Occasional Contributor III

I was getting close but you pointed me to the answer, you are the MAN Robert!

0 Kudos
CCWeedcontrol
Occasional Contributor III

Sorry to bug again but I am still a little off with the Esri World geocoder search. I tried adjusting the Widget Search but no luck, nothing changes. I must be missing something...

No matter what i change the "left" to nothing changes.

{
        "uri": "widgets/Search/Widget",
        "position": {
          "left": 660,
          "top": 55,
          "width": 300,
          "zIndex": 1,
          "relativeTo": "map"
        },
        "version": "2.3",
        "id": "widgets_Search_Widget_38",
        "name": "Search"
      },

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

I did not try and change the left as that was not in your original question. It make be bound in the header widget code I have not checked that.

0 Kudos