AnsweredAssumed Answered

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

Question asked by GISadmin@Pak on May 7, 2020
Latest reply on May 7, 2020 by GISadmin@Pak

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

Outcomes