nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Ajouter un en-tête (en HTML ?) à un visualiseur cartographique basique

Mohamedel_Massoudi1

Bonjour à tous,

J’aimerais ajouter un en-tête (une image avec le logo de l’organisation et un texte explicatif) à un visualiseur cartographique basique. Vous trouverez ci-dessous une maquette.

a) Est-ce possible ?

b) Si oui, comment dois-je m’y prendre ? Je suppose que je dois modifier le HTML et non le JavaScript ? Toute piste serait grandement appréciée !

Maquette (visualiseur cartographique basique et en-tête)

Trouver plus de publications taguées avec

Accepted answers

khutchins

Your best bet is to download the source code for that application from the github repository, host it on your own web server and add a header using html and css. The source code for the application you are using can be found here:

GitHub - Esri/Viewer: Viewer is a configurable application template that enables you to display an ArcGIS web map using …

Another option that might work depending on what you need in the header is to add custom css. I'll say up front that this approach will require you to fiddle around with the css to get it right and is fairly limited in what it can do but if all you need is text and an image in the header then it may work. To use this approach you'll need to modify the path to the image (see line 2) and the text to display (line 6) in the css below and then paste all the css into the Custom css text box that you can find at the bottom of the Theme tab when you configure the basic viewer then save the app and test.

<SPAN class="selector token">#panelTitle</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">background-image</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="url token"><SPAN>url(</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fwww.google.com%2Flogos%2Fdoodles%2F2017%2Foskar-fischingers-117th-birthday-5635181101711360.2-s.png" target="_blank">https://www.google.com/logos/doodles/2017/oskar-fischingers-117th-birthday-5635181101711360.2-s.png</A><SPAN>)</SPAN></SPAN> <SPAN class="important token">!important</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">background-repeat</SPAN><SPAN class="punctuation token">:</SPAN> no-repeat <SPAN class="important token">!important</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="selector token">div#panelTitle:before</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">content</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"CityLab010 Initiatives on the map"</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">overflow</SPAN><SPAN class="punctuation token">:</SPAN> hidden<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">font-size</SPAN><SPAN class="punctuation token">:</SPAN> 20px<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">padding-left</SPAN><SPAN class="punctuation token">:</SPAN> 130px<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="selector token">#panelTop</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">height</SPAN><SPAN class="punctuation token">:</SPAN> 125px<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN> 100%<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="selector token">#panelContent</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">top</SPAN><SPAN class="punctuation token">:</SPAN> 125px<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="selector token">.esriSimpleSliderTL</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">top</SPAN><SPAN class="punctuation token">:</SPAN> 45px<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">z-index</SPAN><SPAN class="punctuation token">:</SPAN> 99 <SPAN class="important token">!important</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">background</SPAN><SPAN class="punctuation token">:</SPAN> transparent <SPAN class="important token">!important</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="selector token">#panelTop</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">left</SPAN><SPAN class="punctuation token">:</SPAN> 0<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">white-space</SPAN><SPAN class="punctuation token">:</SPAN> nowrap<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="selector token">#panelTools</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">position</SPAN><SPAN class="punctuation token">:</SPAN> absolute<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">bottom</SPAN><SPAN class="punctuation token">:</SPAN> 4px<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">left</SPAN><SPAN class="punctuation token">:</SPAN> 30px<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">background</SPAN><SPAN class="punctuation token">:</SPAN> transparent <SPAN class="important token">!important</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="selector token">#panelSearch</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">position</SPAN><SPAN class="punctuation token">:</SPAN> absolute<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">right</SPAN><SPAN class="punctuation token">:</SPAN> 5px<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">top</SPAN><SPAN class="punctuation token">:</SPAN> 45px<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="selector token">#title</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">float</SPAN><SPAN class="punctuation token">:</SPAN> left<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="selector token">#title.nosubtitle</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">height</SPAN><SPAN class="punctuation token">:</SPAN> 120px<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="selector token">#panelText</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">position</SPAN><SPAN class="punctuation token">:</SPAN> absolute<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">left</SPAN><SPAN class="punctuation token">:</SPAN> 30px<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">top</SPAN><SPAN class="punctuation token">:</SPAN> 40px<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="selector token">#panelTitle</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">background</SPAN><SPAN class="punctuation token">:</SPAN> #fff<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN> 100% <SPAN class="important token">!important</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">color</SPAN><SPAN class="punctuation token">:</SPAN> #333<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>‍</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>

Here's a link to a test app where I applied the custom css above to insert a header with text and an image.

http://www.arcgis.com/apps/View/index.html?appid=2bcdc686ee50413c97db9619373bd7c7

Note: I haven't tested this across browsers so you may run into some browser specific issues.

All comments

khutchins

GitHub - Esri/Viewer: Viewer is a configurable application template that enables you to display an ArcGIS web map using …

<SPAN class="selector token">#panelTitle</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">background-image</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="url token"><SPAN>url(</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fwww.google.com%2Flogos%2Fdoodles%2F2017%2Foskar-fischingers-117th-birthday-5635181101711360.2-s.png" target="_blank">https://www.google.com/logos/doodles/2017/oskar-fischingers-117th-birthday-5635181101711360.2-s.png</A><SPAN>)</SPAN></SPAN> <SPAN class="important token">!important</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">background-repeat</SPAN><SPAN class="punctuation token">:</SPAN> no-repeat <SPAN class="important token">!important</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="selector token">div#panelTitle:before</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">content</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"CityLab010 Initiatives on the map"</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">overflow</SPAN><SPAN class="punctuation token">:</SPAN> hidden<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">font-size</SPAN><SPAN class="punctuation token">:</SPAN> 20px<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">padding-left</SPAN><SPAN class="punctuation token">:</SPAN> 130px<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="selector token">#panelTop</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">height</SPAN><SPAN class="punctuation token">:</SPAN> 125px<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN> 100%<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="selector token">#panelContent</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">top</SPAN><SPAN class="punctuation token">:</SPAN> 125px<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="selector token">.esriSimpleSliderTL</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">top</SPAN><SPAN class="punctuation token">:</SPAN> 45px<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">z-index</SPAN><SPAN class="punctuation token">:</SPAN> 99 <SPAN class="important token">!important</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">background</SPAN><SPAN class="punctuation token">:</SPAN> transparent <SPAN class="important token">!important</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="selector token">#panelTop</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">left</SPAN><SPAN class="punctuation token">:</SPAN> 0<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">white-space</SPAN><SPAN class="punctuation token">:</SPAN> nowrap<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="selector token">#panelTools</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">position</SPAN><SPAN class="punctuation token">:</SPAN> absolute<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">bottom</SPAN><SPAN class="punctuation token">:</SPAN> 4px<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">left</SPAN><SPAN class="punctuation token">:</SPAN> 30px<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">background</SPAN><SPAN class="punctuation token">:</SPAN> transparent <SPAN class="important token">!important</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="selector token">#panelSearch</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">position</SPAN><SPAN class="punctuation token">:</SPAN> absolute<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">right</SPAN><SPAN class="punctuation token">:</SPAN> 5px<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">top</SPAN><SPAN class="punctuation token">:</SPAN> 45px<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="selector token">#title</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">float</SPAN><SPAN class="punctuation token">:</SPAN> left<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="selector token">#title.nosubtitle</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">height</SPAN><SPAN class="punctuation token">:</SPAN> 120px<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="selector token">#panelText</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">position</SPAN><SPAN class="punctuation token">:</SPAN> absolute<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">left</SPAN><SPAN class="punctuation token">:</SPAN> 30px<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">top</SPAN><SPAN class="punctuation token">:</SPAN> 40px<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="selector token">#panelTitle</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">background</SPAN><SPAN class="punctuation token">:</SPAN> #fff<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN> 100% <SPAN class="important token">!important</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">color</SPAN><SPAN class="punctuation token">:</SPAN> #333<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>‍</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>

Here's a link to a test app where I applied the custom css above to insert a header with text and an image.

http://www.arcgis.com/apps/View/index.html?appid=2bcdc686ee50413c97db9619373bd7c7

Note: I haven't tested this across browsers so you may run into some browser specific issues.

Mohamedel_Massoudi1

Hi Kelly, many thanks!!!

Additional query: is one of the limitations of option 2 that the banner size is very limited? Say if I want to double it in size in the dummy you've used?

(I've fiddled with the px's of #Panel10 (row11) )

PS re: option1, my company does not allow hosting external sources, so need to find another solution first)

khutchins

Sure you can make the header bigger you'll just need to modify the numbers. Here's an example:

http://www.arcgis.com/apps/View/index.html?appid=2bcdc686ee50413c97db9619373bd7c7

And here's the css I used - I added a few comments on where you can make modifications to change the size and location of various elements.

<SPAN class="comment token">/*background-size 165 is the width of the image and 100% says to take up the full height*/</SPAN>
<SPAN class="selector token">#panelTitle</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">background-image</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="url token"><SPAN>url(</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fwww.google.com%2Flogos%2Fdoodles%2F2017%2Foskar-fischingers-117th-birthday-5635181101711360.2-s.png" target="_blank">https://www.google.com/logos/doodles/2017/oskar-fischingers-117th-birthday-5635181101711360.2-s.png</A><SPAN>)</SPAN></SPAN> <SPAN class="important token">!important</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">background-repeat</SPAN><SPAN class="punctuation token">:</SPAN> no-repeat <SPAN class="important token">!important</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">background-size</SPAN><SPAN class="punctuation token">:</SPAN> 165px 100% <SPAN class="important token">!important</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="comment token">/*This is the text to display on the header. If you make the image wider you'll want to 
increase the value for padding-left*/</SPAN>
<SPAN class="selector token">div#panelTitle:before</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">content</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"CityLab010 Initiatives on the map"</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">overflow</SPAN><SPAN class="punctuation token">:</SPAN>hidden<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">font-size</SPAN><SPAN class="punctuation token">:</SPAN> 20px<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">padding-left</SPAN><SPAN class="punctuation token">:</SPAN> 170px<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="comment token">/*Here 165 is the total height of the complete header area include the tools, title and search*/</SPAN>
<SPAN class="selector token">#panelTop</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">height</SPAN><SPAN class="punctuation token">:</SPAN>165px<SPAN class="punctuation token">;</SPAN>&nbsp; 
&nbsp;&nbsp;&nbsp; <SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN>100%<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="comment token">/*When you open a tool the panel for the tool's info appears below the toolbar. If 
you make the panelTop height larger make sure you set the top value to match*/</SPAN>
<SPAN class="selector token">#panelContent</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">top</SPAN><SPAN class="punctuation token">:</SPAN>165px<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="comment token">/*The top value sets the position in the header of the zoom controls.*/</SPAN>
<SPAN class="selector token">.esriSimpleSliderTL</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">top</SPAN><SPAN class="punctuation token">:</SPAN>85px<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">z-index</SPAN><SPAN class="punctuation token">:</SPAN>99 <SPAN class="important token">!important</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">background</SPAN><SPAN class="punctuation token">:</SPAN>transparent <SPAN class="important token">!important</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="selector token">#panelTop</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">left</SPAN><SPAN class="punctuation token">:</SPAN>0<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">white-space</SPAN><SPAN class="punctuation token">:</SPAN>nowrap<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="comment token">/*Set the toolbar to be 4 pixels up from the bottom of the header area*/</SPAN>
<SPAN class="selector token">#panelTools</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">position</SPAN><SPAN class="punctuation token">:</SPAN>absolute<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">bottom</SPAN><SPAN class="punctuation token">:</SPAN>4px<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">left</SPAN><SPAN class="punctuation token">:</SPAN>30px<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">background</SPAN><SPAN class="punctuation token">:</SPAN>transparent <SPAN class="important token">!important</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="comment token">/*Set the search to be 5 pixels up from the bottom of the header area*/</SPAN>
<SPAN class="selector token">#panelSearch</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">position</SPAN><SPAN class="punctuation token">:</SPAN>absolute<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">right</SPAN><SPAN class="punctuation token">:</SPAN>5px<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">bottom</SPAN><SPAN class="punctuation token">:</SPAN>5px<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>

<SPAN class="selector token">#title</SPAN><SPAN class="punctuation token">{</SPAN>
 <SPAN class="property token">float</SPAN><SPAN class="punctuation token">:</SPAN>left<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="comment token">/* Set the title (Atafu coral inslets in example) to be 25 pixels from the bottom of the header*/</SPAN>
<SPAN class="selector token">#panelText</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">position</SPAN><SPAN class="punctuation token">:</SPAN>absolute<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">left</SPAN><SPAN class="punctuation token">:</SPAN>30px<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">bottom</SPAN><SPAN class="punctuation token">:</SPAN>25px<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="selector token">#panelTitle</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">background</SPAN><SPAN class="punctuation token">:</SPAN>#fff<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN>100% <SPAN class="important token">!important</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">color</SPAN><SPAN class="punctuation token">:</SPAN>#333<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">height</SPAN><SPAN class="punctuation token">:</SPAN>85px<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">line-height</SPAN><SPAN class="punctuation token">:</SPAN>85px<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>‍</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>

Mohamedel_Massoudi1

Many many Thanks Kelly!!! This works for me! Thank you so much for taking time with that explainer for dummies like me

Mohamedel_Massoudi1

Hi Kelly,

A follow-up question on your previous guidance: I've been fiddeling with the image (decided on a different design), which meant having an image as the entire banner.

It seems that this is better done in the source code than in Custom CSS?

For example in HTML I could get the image to this size and quality:

Here I adjusted the following:

#panelTitle {
background: #fff;
width: 100% !important;
color: #333;
height: 200px;
line-height: 200px;

Plus:

#panelTitle {
background-image: url(http://rotterdam.maps.arcgis.com/sharing/rest/content/items/35c4d63247264ff7974a904d35c9ca92/data) !important;
background-repeat: no-repeat !important;
background-size: 1050px 100% !important;

However when adding these values to your CSS sheet, the image becomes vague/warped.

Is this one of the limitations of working with Custom CSS, i.e. should rather work this out in the source code? (as you mentioned at the start of your first answer?)

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.