Configuring the logo of your deployed web app to be a hyperlink

03-11-2016 04:07 PM
Esri Regular Contributor

Have you noticed the default Esri Logo on the corner of your web app that you create using web appbuilder developer. You know that you can modify this logo using WAB developer interface before you download it as follows:

Attribute—Web AppBuilder for ArcGIS | ArcGIS

You click the logo icon and change it to a file from your local computer.

What if you want this logo to act as a liason to your organization website?

Some simple steps to configure this logo to make it a hyperlink to a web page.

1. Go to the deployed app on your web server.

2. Under the folder, follow the following directory: “\themes\<name-of-your-theme>\widgets\". You will find a "Header" folder or a "Header Controller" folder depending on the theme.

3. Right click on this HTML file. it might look as follows:

4. Notice line 4 - It has an <img> tag with class: logo.

5. To make this a hyperlink, just surround this <img> tag on left and right with an <a> tag or an anchor tag as follows:

Notice my second line now has a href and a target property in it.

The href points to your URL of the web page you would like the logo to point to.

The target property is optional. In absence of this property, if you click on the logo, it changes the web app into the desired web page directly. If you have this property as "_blank", it will open the web page in a new tab.

6. Save the HTML file and then refresh the web app. Your logo should now direct your user to the web page you desire.

1 Reply
MVP Esteemed Contributor