Launchpad Theme logo & header issue

[CCWeedcontrol]

So i wanted to remove the blue logo around the application logo i am building, which i was able to do but now it seemed to have moved the header to the left and cuts off the application name. I tried adjusting the header on the app config.json but it move everything to the right include the logo. How can move just the the black header to the right of the logo?

I commented out the background-color: #3b8fc4; line in the application common.css file like below.

.claro .jimu-widget-header .logo {
    height: 0px !important;
    width: 0px;
    min-width: 50px;
    /*background-color: #3b8fc4;*/
    -webkit-border-radius: 50px;
    border-radius: 80px !important;
    position: relative;
    top: -32px !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;‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[RobertScheitlin__GISP]

Your issue is this line of your css rule:

height: 0px !important;

I would go with:

  height: 110px;
  width: 110px;‍‍

[CCWeedcontrol]

Hi Robert,

After making the changes you suggested it still looks off and where the logo use to be there is an outline.

Please the attached picture.

[RobertScheitlin__GISP · Accepted solution]

OK, so this is what I would use then:

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

[CCWeedcontrol]

I made you suggested changes and still have that outline and you can still see the header to the left of the logo.

Nothing was affected.

@import url("panels/LaunchpadPanel/style.css");

/**********About Edit Widget*************/
.jimu-widget-edit .templatePicker {
     bottom: 92px;
}

.jimu-widget-edit-infoWindow .esriAttributeInspector .dijitArrowButton.dijitDownArrowButton.dijitArrowButtonContainer {
  position: static !important;
  height: 30px !important;
}
/**********End Edit Widget*************/
.claro .jimu-widget-header .logo {
    height: 110px !important;
    width: 110px;
    min-width: 50px;
    /*background-color: #3b8fc4;*/
    -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]

You must have some other css rules that are affecting this then as you can see by my attached image the css rules I provide work fine for me:

Based on your css code above you are not making the changes in the themes\LaunchpadTheme\styles\default\css\launchpad.css file either (As I had you do in your other threads).

[CCWeedcontrol]

Oh man i feel like goof. Oh i was making changes to themes\launchpadTheme\common.css. Reobert i really appreciate your help.

I still have part of the header background showing to the left of the log...?

[DanielMunoz]

With Roberts's instructions I'm able to control everything but the height of the logo as you can see in the image, I looked in other css files for logo height control but couldn't find anything, any suggestions are welcome our logo is a circle and want to take advantage of all the area.

[RobertScheitlin__GISP]

Daniel,

  See this thread:

https://community.esri.com/thread/203362-25-logo-issue 

[DanielMunoz]

That did it! now I can control the logo entirely.

Thank you!