Adding header (in HTML? ) to basic mapviewer

[Mohamedel_Massoudi1]

Hello everybody, 

I'd like to add a header (image with organisation logo, explainer) to a basic mapviewer. See below for a mockup.

a) is this possible?

b) If yes, how do I go about doing this?  I assume I have to change the html and not the Javascript? Any lead would be geatly appreciated!

[KellyHutchins · Accepted solution]

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

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.

#panelTitle {
    background-image: url(https://www.google.com/logos/doodles/2017/oskar-fischingers-117th-birthday-5635181101711360.2-s.png) !important;
    background-repeat: no-repeat !important;
}
div#panelTitle:before {
    content: "CityLab010 Initiatives on the map";
    overflow: hidden;
    font-size: 20px;
    padding-left: 130px;
}
#panelTop {
    height: 125px;
    width: 100%;
}
#panelContent {
    top: 125px;
}
.esriSimpleSliderTL {
    top: 45px;
    z-index: 99 !important;
    background: transparent !important;
}
#panelTop {
    left: 0;
    white-space: nowrap;
}
#panelTools {
    position: absolute;
    bottom: 4px;
    left: 30px;
    background: transparent !important;
}
#panelSearch {
    position: absolute;
    right: 5px;
    top: 45px;
}
#title {
    float: left;
}
#title.nosubtitle {
    height: 120px;
}
#panelText {
    position: absolute;
    left: 30px;
    top: 40px;
}
#panelTitle {
    background: #fff;
    width: 100% !important;
    color: #333;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

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)

[KellyHutchins]

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. 

/*background-size 165 is the width of the image and 100% says to take up the full height*/
#panelTitle{
    background-image: url(https://www.google.com/logos/doodles/2017/oskar-fischingers-117th-birthday-5635181101711360.2-s.png) !important;
    background-repeat: no-repeat !important;
    background-size: 165px 100% !important;
}
/*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*/
div#panelTitle:before {
    content: "CityLab010 Initiatives on the map";
    overflow:hidden;
    font-size: 20px;
    padding-left: 170px;
}
/*Here 165 is the total height of the complete header area include the tools, title and search*/
#panelTop{
    height:165px;  
    width:100%;
}
/*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*/
#panelContent{
    top:165px;
}
/*The top value sets the position in the header of the zoom controls.*/
.esriSimpleSliderTL{
    top:85px;
    z-index:99 !important;
    background:transparent !important;
}
#panelTop{
    left:0;
    white-space:nowrap;
}
/*Set the toolbar to be 4 pixels up from the bottom of the header area*/
#panelTools{
    position:absolute;
    bottom:4px;
    left:30px;
    background:transparent !important;
}
/*Set the search to be 5 pixels up from the bottom of the header area*/
#panelSearch{
    position:absolute;
    right:5px;
    bottom:5px;
}

#title{
 float:left;
}
/* Set the title (Atafu coral inslets in example) to be 25 pixels from the bottom of the header*/
#panelText{
    position:absolute;
    left:30px;
    bottom:25px;
}
#panelTitle{
    background:#fff;
    width:100% !important;
    color:#333;
    height:85px;
    line-height:85px;
}
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[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?) 

[KellyHutchins]

Nope its not a limitation you should be able to get the image to look the way you want. Perhaps something in the css is being overwritten or a rule is missing? Is your app live? If so can you send a link and i'll take a look? 

If not send me all the custom css that you paste into your app and I'll see if I can reproduce. 

[Mohamedel_Massoudi1]

Hi Kelly, here's one of the attempts I've made:  http://rotterdam.maps.arcgis.com/apps/View/index.html?appid=db74633140f248beb8c093cf9f7779a6  

[KellyHutchins]

Your new design is actually a little bit simpler to add than the old one because we can set the logo using the config panel options then just resize it and move a few other things around.  Here's a revised version of your app: 

http://www.arcgis.com/apps/View/index.html?appid=690e9760b7794fc99783891562a6573f 

Try this: 

1. Set your image to be the 'Title logo' using the App tab of the config panel 

2. Then paste in the following custom css. 

#panelTop{width:100% !important; height:250px; background-color:#fff !important; left:0 !important;}
@media only screen and (min-width: 720px){
#panelSearch {
     margin: 7px 4px 10px 4px !important; 
}    
}
.pageBody{
    top:175px;
    background:#fff !important;
}
#title{
    display:none;
}
#panelLogo, #panelLogo img{
    max-width:100% !important;
    max-height:200px !important;
    height:200px !important;
    width:700px !important;

}
#panelTools{
    position:absolute;
    bottom:10px;
    padding-left:30px;
}
.esriSimpleSliderTL{
    background:#fff !important; 
    top:170px;
    z-index: 100 !important;
}
#panelSearch{
    position:absolute;
    bottom:0;
    right:4px;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[Mohamedel_Massoudi1]

Hi Kelly, this turned out great! See dummy http://arcg.is/1G8OzK 

Many many thanks!!!

Now I can work on the proper publication