Creating deeply customized pages

Now, let’s move back to the code, taking care of the title and icon marked in red in Figure 14.3:

Figure 14.7: The set_page_config method

On line 3, immediately after import streamlit as st, we set the page configuration using the st.set_page_config method. In this way, we can customize the page title and icon (an emoji or even a PNG or an ICO file is supported), set the layout of the content in the main section (it can be wide or centered), and decide whether the sidebar is expanded or collapsed at start time.

The result, with the configuration reported in Figure 14.7, is as follows:

Figure 14.8: A customized page

It is up to you to try different settings while using all the available parameters.

With the set_page_config method, we can do even more. In fact, by adding the few lines of code shown in Figure 14.9, we can modify the three points menu and the About section:

Figure 14.9: Full customization with set_page_config

Here’s a breakdown of what we did in the preceding code:

On lines 9 and 10, we added two voices to the three points menu called Get Help and Report a bug. They direct the users to the Streamlit website and GitHub, respectively. You can insert any kind of URL you wish here.
On line 11, we added a note that will be shown in the About option of the menu; this note supports the standard Markdown syntax.

Figure 14.10 shows the new three points menu and the customized About section side by side:

Figure 14.10: The customized three points menu and About section

Next, referring to the footer shown in Figure 14.3, let’s learn how to remove it with a very short instruction:

Figure 14.11: Instruction to remove the footer

Here’s what we are doing in the preceding code:

On line 19, we added very simple html code to set the footer’s visibility to hidden
On line 25, as usual, using st.markdown with unsafe_allow_html, we used that html code

It is quite interesting that just by adding another line of code before the footer row, we can easily remove the three point menu as well. The final code is as follows:

Figure 14.12: The instruction to remove the footer and main menu

The web application looks as follows:

Figure 14.13: The web app without a footer and main menu

In this section, we learned how to customize our pages by leveraging the set_page_config instruction. Moreover, we learned how to remove the footer row and the three points menu from our Streamlit pages. In the next section, we’ll learn how to work on themes.