Community

Tab Theme header Height Web App Builder Developer Edition 2.16 with 5 logos

447
2
05-07-2020 05:09 AM
Labels (1)
Labels
SumbleGhani_Shah
by
New Contributor
‎05-07-2020 05:09 AM

I have created an application using Tab theme of Web App Builder Developer Edition 2.16. i would like to increase the header height and add 3 to 4 logos within it. I am new in development, and sometimes i stuck with it and find some help through articles, videos and comments etc.

i tried to make the changes but couldn't with the relevant information regarding it;

Increase header height :

Tab themes > widgets > Header > CSS > style.css

 

.jimu-widget-header{
outline-offset: -2px !important;

// Added new
height:60px !important; 
}

 

Add 2 more logos next to default logo

Tab themes > widgets > Header > Widget.html

 

<img class="logo jimu-float-leading jimu-leading-margin1" data-dojo-attach-point="logoNode">

// Added new
<img class="logo jimu-float-leading jimu-leading-margin1" style="margin-top:5px;" src="images/1_million.png" />
<img class="logo jimu-float-leading jimu-leading-margin1" style="margin-top:5px;" src="images/committee.png" />

 

Sidebar Panel to adjust top property as per height :

Tab themes >  widgets > SidebarController > CSS

.jimu-widget-sidebar-controller .max-pane{
position: absolute;
top: 15px; // changed top property to 15
left: 0;
right: 0;
bottom: 26px;
border: 1px solid #111111;
}

 

Adjust the MapContainer(Zoom Slider, Home, Prev-Next extent button and Search widget) property as per header height :

 

Main Index.html page in style section at the end :

 

#map {
position: absolute;
background-color: rgb(238, 238, 238);
overflow: hidden;
min-width: 1px;
min-height: 1px;
left: 365px;
top: 60px !important;
right: 0px;
bottom: 24px;
width: auto;
height: auto;
padding: 0px;
margin: auto;
z-index: auto;
}

But with green highlighted portion of it, i do not know exactly, in which file where i could make changes.

Thanks

Sumble

0 Kudos
2 Replies
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎05-07-2020 05:28 AM

Sumble,

   The maps top position is controlled by the top property in the main config.json

map > position > top

  "map": {
    "3D": false,
    "2D": true,
    "position": {
      "left": 0,
      "top": 40,
      "right": 0,
      "bottom": 0
    },
...‍‍‍‍‍‍‍‍‍‍
0 Kudos
SumbleGhani_Shah
by
New Contributor
‎05-07-2020 11:51 AM

Thank you Robert for your reply.

Can you please share with me a customized tab theme with title panel, which must be great in size and is able to incorporate 4 to 5 logos for marketing purpose.

Actually I am new in development and facing lots of problem such as my webmap do not upload and web app builder developer edition 2.16 always show, that it is uploading. But it doesn't. So in that case, I have to import my downloaded application and then it works fine.

Is it possible to customize choosen tab theme with our own imported webmap? I want to upload my webmap in "Creating new app". But the new created app do not upload my webmap.

Please help me, I have no idea actually.

Get Outlook for Android<https://aka.ms/ghei36>

0 Kudos