Hi Feng,
Here are the answers to your questions:
1. First, you have to make the background of the header and the navigation bar transparent. To do that, you could add the following CSS rules to index.html:
<style>
/* CUSTOM CSS RULES */
#header {
background-color: transparent;
}
#nav-bar {
background-color: transparent !important;
}
</style>
Then you need to set the background image on the entire area including both the navigation bar and the header. This area is called the headerNavBarPanel. To do this, you can change the CSS I provided earlier to the following:
<style>
/* CUSTOM CSS RULES */
#headerNavBarPanel {
background-image: url("resources/banner.jpg");
background-size: 100% 100%;
}
#header {
background-color: transparent;
}
#nav-bar {
background-color: transparent !important;
}
</style>
There is actually code in the application setting the header and nav-bar colors using jQuery. This CSS overrides the styles set in the code and is easier for you to add and remove later.
2. You will have to download the source code to change the tab colors and tab text colors. It is stored in an object on line 897 of the MainView.js file. The location of the MainView.js file in the source code hierarchy is shown on the linked GitHub page. You can easily do a file search for MainView.js as well.
var colors = {
header: app.data.getWebAppData().getThemeOptions().headerColor,
tabText: '#d8d8d8',
tab: '#666',
tabTextActive: '#fff',
tabActive: '#999',
tabTextHover: '#fff',
tabHover: '#666'
};
If you replace the line:
header: app.data.getWebAppData().getThemeOptions().headerColor,
with:
header: 'transparent',
it has the same effect as:
#nav-bar {
background-color: transparent !important;
}
although it may have some other side effects I haven't researched.
3. The version of the code I am using uses a feature collection stored in the web map. Early in the process I realized that I did not want to edit the data as features in the web map. Also, I knew I wanted the description field to have HTML so that I could make the detail panel have a paragraph, a table of information, and a link to a more detailed facility web page. So, I created a feature class in a geodatabase with all of the natural data fields that I wanted to store and present. Then, I wrote a Python script that would read the features and their 19 fields, generate the HTML for the description field, and update the web map in ArcGIS Online. I had written my own library of tools for working with AGOL items, but you could do the same with the new ArcGIS API for Python,with urllib and urllib2 in Python 2.7, or manually using the ArcGIS Online Assistant. I can make changes in ArcMap to the data and republish the web map in 20 seconds and never touch any HTML.
Now, I am a little rusty on CSV files and feature collections. You should be able to delete the point layer in the web map and readd it using a CSV file with the correct fields. That would make it easier for you to type in the HTML in the CSV file. Otherwise, the Map Viewer and the App Builder, I believe, will take any HTML code you write and escape the <, >, and & characters when it stores it in the feature collection. When it displays it on the page, it will look like the code you entered, not the web page elements it represents, like images or hyperlinks. With the CSV file approach, the feature collection will store HTML and the web map and web app will render the HTML elements correctly.
Also, the latest version of the shortlist story map supports feature services, so it becomes a little easier to understand what's going on.
You can also add other supporting layers to the web map. Just add them after the story points layer.
Enjoy,
Nathan