Fixing logo size

974
2
Jump to solution
02-12-2018 11:44 AM
CCWeedcontrol
Occasional Contributor III

So i am working on a app which i am trying to use the Tab theme but the logo is super small, so i tired making it larger and i had some success but it's not correct. I added the following, which mad it bigger but squished. See attached pic.

Not sure what i am missing, i tired playing with the height and width in the sytles.css but i can't get it symmetric round.

I made changes to the WebAppBuilderForArcGIS\server\apps\8\themes\TabTheme\styles\default\style.css.

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

I made changes to WebAppBuilder2.7\WebAppBuilderForArcGIS\server\apps\8\config.json.

Changed line 8 to 70.

"widgetOnScreen": {
          "widgets": [{
               "uri": "themes/TabTheme/widgets/Header/Widget",
               "position": {
                    "left": 0,
                    "top": 0,
                    "right": 0,
                    "height": 70,
                    "relativeTo": "browser"
               },

Changed line 4 to 70

"uri": "themes/TabTheme/widgets/SidebarController/Widget",
               "position": {
                    "left": 0,
                    "top": 70,
                    "bottom": 24,
                    "relativeTo": "browser"
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

CC,

   I think it is this rule that is causing you an issue. In the TabTheme/widgets/Header/css/style.css

.jimu-widget-header .logo {
    max-height: 40px;
}

You need to comment it out.

View solution in original post

0 Kudos
2 Replies
RobertScheitlin__GISP
MVP Emeritus

CC,

   I think it is this rule that is causing you an issue. In the TabTheme/widgets/Header/css/style.css

.jimu-widget-header .logo {
    max-height: 40px;
}

You need to comment it out.

0 Kudos
CCWeedcontrol
Occasional Contributor III

After i posted i found the .jimu-widget-head .log in the style.css

I changed it to 70px. It did make the logo but i will comment it out instead.

Thanks.

0 Kudos