Make Applicaiton logo larger

[CCWeedcontrol]

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?

[RickeyFight]

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

[RobertScheitlin__GISP · Accepted solution]

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

[AhmedElsalloul2]

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? 

[RobertScheitlin__GISP]

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

[CCWeedcontrol]

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

[RobertScheitlin__GISP]

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 

[CCWeedcontrol]

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..

[RobertScheitlin__GISP]

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

[CCWeedcontrol]

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