topic Re: Launchpad Theme logo & header issue in Web AppBuilder Custom Widgets Questions

Launchpad Theme logo & header issue

CCWeedcontrol — Sun, 12 Dec 2021 10:50:42 GMT

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

Re: Launchpad Theme logo & header issue

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:50:45 GMT

Your issue is this line of your css rule:

height: 0px !important;

I would go with:

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

Re: Launchpad Theme logo & header issue

CCWeedcontrol — Fri, 04 Aug 2017 21:32:32 GMT

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.

Re: Launchpad Theme logo & header issue

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:50:48 GMT

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

Re: Launchpad Theme logo & header issue

CCWeedcontrol — Sun, 12 Dec 2021 10:50:51 GMT

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

Re: Launchpad Theme logo & header issue

RobertScheitlin__GISP — Mon, 07 Aug 2017 16:10:36 GMT

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

Re: Launchpad Theme logo & header issue

CCWeedcontrol — Mon, 07 Aug 2017 21:40:13 GMT

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

Re: Launchpad Theme logo & header issue

DanielMunoz — Thu, 26 Oct 2017 20:04:06 GMT

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.

Re: Launchpad Theme logo & header issue

RobertScheitlin__GISP — Thu, 26 Oct 2017 20:16:30 GMT

Daniel,

See this thread:

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

Re: Launchpad Theme logo & header issue

DanielMunoz — Fri, 27 Oct 2017 12:03:56 GMT

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

Thank you!