After making some applications i noticed that the logo is always small how do you make logo bigger.
I would image you would have to move the header and the contents to the right. Can some one show me how to make these changes. please?
Sense you are using the Launchpad theme, depending on how big could change this but here are some css rules to make the logo 50x50px.
just add these to the apps launchpadTheme/common.css
<SPAN class="selector token">.claro .jimu-widget-header .logo</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="property token">height</SPAN><SPAN class="punctuation token">:</SPAN> 75px <SPAN class="important token">!important</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN> 75px<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">min-width</SPAN><SPAN class="punctuation token">:</SPAN> 50px<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">background-color</SPAN><SPAN class="punctuation token">:</SPAN> #3b8fc4<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">-webkit-border-radius</SPAN><SPAN class="punctuation token">:</SPAN> 50px<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">border-radius</SPAN><SPAN class="punctuation token">:</SPAN> 50px <SPAN class="important token">!important</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="property token">position</SPAN><SPAN class="punctuation token">:</SPAN> relative<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">top</SPAN><SPAN class="punctuation token">:</SPAN> -12px <SPAN class="important token">!important</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="property token">left</SPAN><SPAN class="punctuation token">:</SPAN> -1px <SPAN class="important token">!important</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="property token">-webkit-box-shadow</SPAN><SPAN class="punctuation token">:</SPAN> 0 1px 0.5px <SPAN class="token function">rgba</SPAN><SPAN class="punctuation token">(</SPAN>0,0,0,0.3<SPAN class="punctuation token">)</SPAN>, 0 2px 2px <SPAN class="token function">rgba</SPAN><SPAN class="punctuation token">(</SPAN>0,0,0,0.2<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="property token">box-shadow</SPAN><SPAN class="punctuation token">:</SPAN> 0 1px 0.5px <SPAN class="token function">rgba</SPAN><SPAN class="punctuation token">(</SPAN>0,0,0,0.3<SPAN class="punctuation token">)</SPAN>, 0 2px 2px <SPAN class="token function">rgba</SPAN><SPAN class="punctuation token">(</SPAN>0,0,0,0.2<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="selector token">.claro .jimu-widget-header .logo > img</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="property token">height</SPAN><SPAN class="punctuation token">:</SPAN> 50px <SPAN class="important token">!important</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
Robert,
So i made the update to WAB 2.5 and was trying to the logo bigger on my new apps and followed your suggestion for 2.5 but my logo is still small. any thoughts as to what i am doing wrong?
I am editing \server\apps\2\themes\LaunchpadTheme\styles\default\css\launchpad.css.
a, a:visited { color: #3b8fc4; text-decoration: none; } a:hover, a:visited:hover { text-decoration: underline; } .claro .jimu-widget-header { background-color: rgba(51,51,51,0.9); -webkit-border-radius: 25px; border-radius: 25px; -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); -webkit-transition: width ease-in 0.1s; -moz-transition: width ease-in 0.1s; -o-transition: width ease-in 0.1s; -ms-transition: width ease-in 0.1s; transition: width ease-in 0.1s; } .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;<SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
Ahmed,
In the Launchpad theme in 2.5. Make these changes:
themes\LaunchpadTheme\styles\default\css\launchpad.css:
<SPAN class="selector token">.claro .jimu-widget-header .logo</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="property token">height</SPAN><SPAN class="punctuation token">:</SPAN> 110px <SPAN class="important token">!important</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN> 110px<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">min-width</SPAN><SPAN class="punctuation token">:</SPAN> 50px<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">-webkit-border-radius</SPAN><SPAN class="punctuation token">:</SPAN> 50px<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">border-radius</SPAN><SPAN class="punctuation token">:</SPAN> 80px <SPAN class="important token">!important</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="property token">position</SPAN><SPAN class="punctuation token">:</SPAN> relative<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">top</SPAN><SPAN class="punctuation token">:</SPAN> -40px <SPAN class="important token">!important</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="property token">left</SPAN><SPAN class="punctuation token">:</SPAN> -3px <SPAN class="important token">!important</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="selector token">.claro .jimu-widget-header .logo img</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="property token">height</SPAN><SPAN class="punctuation token">:</SPAN> 110px <SPAN class="important token">!important</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="property token">margin</SPAN><SPAN class="punctuation token">:</SPAN> 0 auto<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">display</SPAN><SPAN class="punctuation token">:</SPAN> block<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
And in the main config.json make these changes:
<SPAN class="punctuation token">{</SPAN> <SPAN class="string token">"uri"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"themes/LaunchpadTheme/widgets/Header/Widget"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"position"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="string token">"left"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="number token">15</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"top"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="number token">37</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"width"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="number token">670</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"height"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="number token">46</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"relativeTo"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"map"</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"version"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"2.5"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"id"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"themes_LaunchpadTheme_widgets_Header_Widget_21"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"name"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Header"</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="string token">"uri"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"widgets/Search/Widget"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"position"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="string token">"left"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="number token">377</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"top"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="number token">45</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"width"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="number token">300</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"zIndex"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"relativeTo"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"map"</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"version"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"2.5"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"id"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"widgets_Search_Widget_22"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"name"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Search"</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
Hi Robert,
Your code was working fine with WAB 2.4 but not with version 2.5.
I think this is related to the changes in themes to support full screen mode. Any suggested workarounds?
I did not try and change the left as that was not in your original question. It make be bound in the header widget code I have not checked that.
Sorry to bug again but I am still a little off with the Esri World geocoder search. I tried adjusting the Widget Search but no luck, nothing changes. I must be missing something...
No matter what i change the "left" to nothing changes.
{ "uri": "widgets/Search/Widget", "position": { "left": 660, "top": 55, "width": 300, "zIndex": 1, "relativeTo": "map" }, "version": "2.3", "id": "widgets_Search_Widget_38", "name": "Search" },
I was getting close but you pointed me to the answer, you are the MAN Robert!
Wow that is pretty large. I guess you are not concerned about mobile then.
You would have to adjust the top properties of the header and search widgets in the main config.json:
line 5 and 19 below:
<SPAN class="punctuation token">{</SPAN> <SPAN class="string token">"uri"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"themes/LaunchpadTheme/widgets/Header/Widget"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"position"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="string token">"left"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="number token">15</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"top"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="number token">37</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"width"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="number token">670</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"height"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="number token">46</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"relativeTo"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"map"</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"version"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"2.3"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"id"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"themes_LaunchpadTheme_widgets_Header_Widget_67"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"icon"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"themes/LaunchpadTheme/widgets/Header/images/icon.png?wab_dv=2.1"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"name"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Header"</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="string token">"uri"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"widgets/Search/Widget"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"position"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="string token">"left"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="number token">377</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"top"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="number token">45</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"width"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="number token">300</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"zIndex"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"relativeTo"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"map"</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"version"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"2.3"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"id"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"widgets_Search_Widget_68"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"icon"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"widgets/Search/images/icon.png?wab_dv=2.1"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"name"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Search"</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
Also you will need to adjust the top on line 9 too:
<SPAN class="selector token">.claro .jimu-widget-header .logo</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="property token">height</SPAN><SPAN class="punctuation token">:</SPAN> 115px <SPAN class="important token">!important</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN> 115px<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">min-width</SPAN><SPAN class="punctuation token">:</SPAN> 50px<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">background-color</SPAN><SPAN class="punctuation token">:</SPAN> #3b8fc4<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">-webkit-border-radius</SPAN><SPAN class="punctuation token">:</SPAN> 80px<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">border-radius</SPAN><SPAN class="punctuation token">:</SPAN> 80px <SPAN class="important token">!important</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="property token">position</SPAN><SPAN class="punctuation token">:</SPAN> relative<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">top</SPAN><SPAN class="punctuation token">:</SPAN> -32px <SPAN class="important token">!important</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="property token">left</SPAN><SPAN class="punctuation token">:</SPAN> -1px <SPAN class="important token">!important</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="property token">-webkit-box-shadow</SPAN><SPAN class="punctuation token">:</SPAN> 0 1px 0.5px <SPAN class="token function">rgba</SPAN><SPAN class="punctuation token">(</SPAN>0,0,0,0.3<SPAN class="punctuation token">)</SPAN>, 0 2px 2px <SPAN class="token function">rgba</SPAN><SPAN class="punctuation token">(</SPAN>0,0,0,0.2<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="property token">box-shadow</SPAN><SPAN class="punctuation token">:</SPAN> 0 1px 0.5px <SPAN class="token function">rgba</SPAN><SPAN class="punctuation token">(</SPAN>0,0,0,0.3<SPAN class="punctuation token">)</SPAN>, 0 2px 2px <SPAN class="token function">rgba</SPAN><SPAN class="punctuation token">(</SPAN>0,0,0,0.2<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
Thanks to both of you. I was able to make the logo bigger and move the zoom, home and locate icons down.
I just need to move and center the header with GIS app with Web Appbuilder for ArcGIS and the Esri world geocoder. How can move this?
edits i made,
.claro .jimu-widget-header .logo { height: 115px !important; width: 115px; min-width: 50px; background-color: #3b8fc4; -webkit-border-radius: 50px; border-radius: 80px !important; position: relative; top: -12px !important; left: -1px !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); }<SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
Thanks.
Depending on the theme look here:
your_app_name\themes\FoldableTheme\widgets\HeaderController\css
style.css
I added
img.logo.jimu-float-leading.jimu-leading-margin1 { height: 100px !important;}
to make my logo larger
Signed in members can post, follow updates, and more. New here? Register a free account.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
