Make Applicaiton logo larger

2933
16
Jump to solution
02-15-2017 02:20 PM
CCWeedcontrol
Regular Contributor

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?

1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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

View solution in original post

16 Replies
RickeyFight
MVP Regular Contributor

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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
New Contributor II

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? 

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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
Regular Contributor

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;‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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 

0 Kudos
CCWeedcontrol
Regular Contributor

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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

0 Kudos
CCWeedcontrol
Regular Contributor

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