topic Re: Make Applicaiton logo larger in ArcGIS Web AppBuilder Questions

Make Applicaiton logo larger

CCWeedcontrol — Wed, 15 Feb 2017 22:20:03 GMT

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?

Re: Make Applicaiton logo larger

RickeyFight — Wed, 15 Feb 2017 23:39:32 GMT

Depending on the theme look here:

your_app_name\themes\FoldableTheme\widgets\HeaderController\css

style.css

I added

img.logo.jimu-float-leading.jimu-leading-margin1 {
height: 100px !important;
}

to make my logo larger

Re: Make Applicaiton logo larger

RobertScheitlin__GISP — Sat, 11 Dec 2021 12:02:37 GMT

Sense you are using the Launchpad theme, depending on how big could change this but here are some css rules to make the logo 50x50px.

just add these to the apps launchpadTheme/common.css

.claro .jimu-widget-header .logo {
    height: 75px !important;
    width: 75px;
    min-width: 50px;
    background-color: #3b8fc4;
    -webkit-border-radius: 50px;
    border-radius: 50px !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);
}

.claro .jimu-widget-header .logo > img {
  height: 50px !important;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Make Applicaiton logo larger

CCWeedcontrol — Sat, 11 Dec 2021 12:02:40 GMT

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.

Re: Make Applicaiton logo larger

RobertScheitlin__GISP — Sat, 11 Dec 2021 12:02:43 GMT

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

Re: Make Applicaiton logo larger

CCWeedcontrol — Thu, 16 Feb 2017 19:28:16 GMT

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

Re: Make Applicaiton logo larger

CCWeedcontrol — Thu, 16 Feb 2017 23:07:59 GMT

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"
      },

Re: Make Applicaiton logo larger

RobertScheitlin__GISP — Fri, 17 Feb 2017 00:54:24 GMT

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.

Re: Make Applicaiton logo larger

AhmedElsalloul2 — Fri, 11 Aug 2017 01:28:48 GMT

Hi Robert,

Your code was working fine with WAB 2.4 but not with version 2.5.

I think this is related to the changes in themes to support full screen mode. Any suggested workarounds?

Re: Make Applicaiton logo larger

RobertScheitlin__GISP — Sat, 11 Dec 2021 12:02:46 GMT

Ahmed,

In the Launchpad theme in 2.5. Make these changes:

themes\LaunchpadTheme\styles\default\css\launchpad.css:

.claro .jimu-widget-header .logo {
  height: 110px !important;
  width: 110px;
  min-width: 50px;
  -webkit-border-radius: 50px;
  border-radius: 80px !important;
  position: relative;
  top: -40px !important;
  left: -3px !important;
}
.claro .jimu-widget-header .logo img {
  height: 110px !important;
  margin: 0 auto;
  display: block;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

And in the main config.json make these changes:

      {
        "uri": "themes/LaunchpadTheme/widgets/Header/Widget",
        "position": {
          "left": 15,
          "top": 37,
          "width": 670,
          "height": 46,
          "relativeTo": "map"
        },
        "version": "2.5",
        "id": "themes_LaunchpadTheme_widgets_Header_Widget_21",
        "name": "Header"
      },
      {
        "uri": "widgets/Search/Widget",
        "position": {
          "left": 377,
          "top": 45,
          "width": 300,
          "zIndex": 1,
          "relativeTo": "map"
        },
        "version": "2.5",
        "id": "widgets_Search_Widget_22",
        "name": "Search"
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Make Applicaiton logo larger

CCWeedcontrol — Sat, 11 Dec 2021 12:02:49 GMT

Robert,

So i made the update to WAB 2.5 and was trying to the logo bigger on my new apps and followed your suggestion for 2.5 but my logo is still small. any thoughts as to what i am doing wrong?

I am editing \server\apps\2\themes\LaunchpadTheme\styles\default\css\launchpad.css.

a,
a:visited {
  color: #3b8fc4;
  text-decoration: none;
}
a:hover,
a:visited:hover {
  text-decoration: underline;
}
.claro .jimu-widget-header {
  background-color: rgba(51,51,51,0.9);
  -webkit-border-radius: 25px;
  border-radius: 25px;
  -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);
  -webkit-transition: width ease-in 0.1s;
  -moz-transition: width ease-in 0.1s;
  -o-transition: width ease-in 0.1s;
  -ms-transition: width ease-in 0.1s;
  transition: width ease-in 0.1s;
}
.claro .jimu-widget-header .logo {
  height: 110px !important;
  width: 110px;
  min-width: 50px;
  -webkit-border-radius: 50px;
  border-radius: 80px !important;
  position: relative;
  top: -40px !important;
  left: -3px !important;

}
.claro .jimu-widget-header .logo img {
  height: 110px !important;
  margin: 0 auto;
  display: block;‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Make Applicaiton logo larger

RobertScheitlin__GISP — Fri, 06 Oct 2017 17:47:44 GMT

Looks like you only forgot to make the changes in the apps main config.json file then as I outlined here:

https://community.esri.com/thread/190393-make-applicaiton-logo-larger#comment-707482

Re: Make Applicaiton logo larger

CCWeedcontrol — Fri, 06 Oct 2017 18:08:57 GMT

sorry i forgot to mention that I did make the changes to the main config.json in the apps folder as well.

\server\apps\3\config.json.

I created a new app and just added the logo to that app and followed the directions https://community.esri.com/thread/190393-make-applicaiton-logo-larger#comment-707482

but i still get the same results..

Re: Make Applicaiton logo larger

RobertScheitlin__GISP — Fri, 06 Oct 2017 18:13:39 GMT

I'm not seeing what you are missing then. I have it working fine in 2.5 Launchpad.

Re: Make Applicaiton logo larger

CCWeedcontrol — Sat, 11 Dec 2021 12:02:52 GMT

So i uninstalled WAB 2.5 and reinstalled. Made the following edits but still the logo is small.

Edits to

C:\arcgis_web_appbuilder_2.5\WebAppBuilderForArcGIS\apps\2\themes\LaunchpadTheme\styles\default\css\launchpad.css

a,
a:visited {
  color: #3b8fc4;
  text-decoration: none;
}
a:hover,
a:visited:hover {
  text-decoration: underline;
}
.claro .jimu-widget-header {
  background-color: rgba(51,51,51,0.9);
  -webkit-border-radius: 25px;
  border-radius: 25px;
  -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);
  -webkit-transition: width ease-in 0.1s;
  -moz-transition: width ease-in 0.1s;
  -o-transition: width ease-in 0.1s;
  -ms-transition: width ease-in 0.1s;
  transition: width ease-in 0.1s;
}
.claro .jimu-widget-header .logo {
  height: 110px !important;
  width: 110px;
  min-width: 50px;
  -webkit-border-radius: 50px;
  border-radius: 80px !important;
  position: relative;
  top: -40px !important;
  left: -3px !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);
}
.claro .jimu-widget-header .logo img {
  height: 110px !important;
  margin: 0 auto;
  display: block;
}
.claro .jimu-widget-header .links-icon {
  background-color: #262626;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  color: #3b8fc4;
}
.claro .jimu-widget-header .links {
  margin-top: 5px;
  -webkit-box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2);
  box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2);
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

made edits to

C:\arcgis_web_appbuilder_2.5\WebAppBuilderForArcGIS\server\apps\2\config.json

"widgets": [
      {
        "uri": "themes/LaunchpadTheme/widgets/AnchorBarController/Widget",
        "position": {
          "bottom": 10,
          "height": 40,
          "relativeTo": "map",
          "zIndex": 0
        },
        "version": "2.5",
        "id": "themes_LaunchpadTheme_widgets_AnchorBarController_Widget_20",
        "name": "AnchorBarController"
      },
      {
        "uri": "themes/LaunchpadTheme/widgets/Header/Widget",
        "position": {
          "left": 15,
          "top": 37,
          "width": 670,
          "height": 46,
          "relativeTo": "map"
        },
        "version": "2.5",
        "id": "themes_LaunchpadTheme_widgets_Header_Widget_21",
        "name": "Header"
      },
      {
        "uri": "widgets/Search/Widget",
        "position": {
          "left": 377,
          "top": 45,
          "width": 300,
          "zIndex": 1,
          "relativeTo": "map"
        },
        "version": "2.5",
        "id": "widgets_Search_Widget_22",
        "name": "Search"
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Make Applicaiton logo larger

RobertScheitlin__GISP — Fri, 06 Oct 2017 20:48:44 GMT

Are you using the default Launch pad theme style?

Re: Make Applicaiton logo larger

CCWeedcontrol — Fri, 06 Oct 2017 21:16:16 GMT

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.