**Customizing a Dashboard Web Application using CSS**

In this tutorial, we will learn how to customize a dashboard web application using CSS. The dashboard is built using Streamlit, a popular open-source data science platform.

**Changing the Layout of the Heat Map**

To change the layout of the heat map, we can use the `c1` and `c2` columns in the HTML code. By setting these columns to display the heat map and bar chart, respectively, we can control the placement of these visualizations on the dashboard.

```html

```

By changing the `c1` and `c2` columns, we can display the heat map on one column and the bar chart on another. This allows us to create a customized layout for our dashboard.

**Using CSS to Style the Dashboard**

To customize the appearance of the dashboard, we can use CSS code. In this case, we will remove the `style.css` file that was previously used to style the dashboard.

```css

/* Remove style.css */

```

By removing the `style.css` file, the dashboard will default to a plain layout with no background color or padding. We can then add our own CSS code to customize the appearance of the dashboard.

**Customizing the Appearance using CSS**

To customize the appearance of the dashboard, we can use various CSS properties such as color, font size, and padding. For example, we can set the background color of the boxes to be a light gray color using the `background-color` property.

```css

/* Set background color to light gray */

.box {

background-color: #f7f7f7;

}

```

We can also add padding to the boxes using the `padding` property. For example, we can set the top and bottom padding to three percent using the `padding-top` and `padding-bottom` properties.

```css

/* Add padding to boxes */

.box {

padding-top: 3%;

padding-bottom: 3%;

}

```

By customizing the appearance of the dashboard using CSS, we can create a visually appealing layout that is consistent with our branding guidelines.

**Styling the Streamlet Logo**

To style the Streamlet logo, we can use various CSS properties such as font size and color. For example, we can set the font size of the logo to be larger than the default font size using the `font-size` property.

```css

/* Set font size of Streamlet logo */

.streamlet-logo {

font-size: 24px;

}

```

We can also change the color of the logo using the `color` property. For example, we can set the text color of the logo to be black using the `color` property.

```css

/* Set text color of Streamlet logo */

.streamlet-logo {

color: #000000;

}

```

By customizing the appearance of the Streamlet logo using CSS, we can create a consistent visual identity for our dashboard.

**Adding Custom CSS Code**

To customize the appearance of the dashboard further, we can add our own CSS code. For example, we can use various CSS properties such as margin and border to create custom layouts.

```css

/* Add margin to boxes */

.box {

margin: 10px;

}

/* Set border to boxes */

.box {

border: 1px solid #000000;

}

```

By adding our own CSS code, we can create a customized layout that is consistent with our branding guidelines.

**Testing the Customized Dashboard**

To test the customized dashboard, we can save the changes and refresh the page. By doing so, we can see how the changes affect the appearance of the dashboard.

```html

```

By customizing the appearance of the dashboard using CSS, we can create a visually appealing layout that is consistent with our branding guidelines.

"WEBVTTKind: captionsLanguage: enwelcome back to the data professor youtube channel in this video i'm going to show you how you can build a dashboard web application in python using the streamlight library and let's get started alright and so the first thing that you want to do is fire up your visual code or any text editor of your choice and as you can see here the dashboard working directory is comprised of the following contents so we have a dot streamlet folder which will contain the configurations for the streamlet web application and for example we have here the background color and the text color and this font type and if we move further we have the requirements where it's going to specify which python library we need to install when we deploy the application we have the streamlit app.py which is the contents of the web application we have the streamlit logo or you could replace this with a logo of your choice we have the style.css file which will provide the necessary styling in order to customize the layout the font type size and the locations of various elements of the web application so before proceeding further let's run the streamlit app.py and so in order to do that i'm going to activate my own content environment so on my own computer i have it in the streamlit environment so i'll activate that let's list the contents of the folder and we're going to run the stringlet app.py so in order to run it we type in streamlit run streamlit underscoreapp.py enter and there you go it loads up okay so it appears that i haven't yet installed plus so let me do that pip install plus the plus is a data visualization library which allows you to create data visualization easily instrument and now we have already installed it we're going to run it again there you go this is the dashboard that we're going to build today and as you can see here the hamburger menu that are normally displayed in the streamlet application on the top right hand corner is currently hidden and the made by streamlet is also hidden as well the logo but we we keep this right here and so let's get started so you're going to notice here that we have a total of three rows and for each row we're going to have different number of columns so the first row will comprise of three columns and we're using the ft.metric function in order to display all of these metric values and then the third row we have the plus data visualization elements such as the heat map and also the bar chart as shown here so let's minimize this a bit and go back to the code and so let's explain the contents of the stringlet app.py file so at a high level here you have less than 50 lines of code so we have here 47 lines of code and so the first five lines here we're going to import the necessary libraries so we have streamlight imported sst import pandas spd import numpy as np import the plot library for the data visualization and then from pill we're going to import the image function so here we're going to set the page layout to be wide so you'll notice that it will expand to the width of the page and then we're going to read in the style.css file right here dio.css file and we're going to read in some example data for the bottom third row here where we display the heat map and the bar charts so the example data sets will be read in on lines 14 and 15. so we do that using the pandas read csv function and the data are hosted on github and so here you're going to see that we have rows abc which corresponds to here rows a rows b row c so lines 18 to 21 we're going to display the contents of row a so you're going to notice that we have a logo of streamlit here which is going to be right here so as you can see we have st columns in order to create three columns on the first row and we're going to call the first column to be a1 second column to be a2 third column to be a3 so in a1 we're going to show the logo so we're going to use the image open and then the png file of the logo and then in column a2 which is here we're going to use the metric function and then we're going to display the corresponding values so you can see here that we have win which is the first line nine miles per hour which is the second line and then we have a minus eight percent which is shown here and then in the third column we have contents to be humidity 864 percent as shown here and in row b we also made use of the sc.metric function to display the various metrics as shown here and so you could replace this with values from variables that you choose and it could be dynamically pulled in from a data source that are hosted on the cloud so that your dashboard will be updated automatically in real time when the data is updated and then in row c we're going to display the two data visualization plots here so let's have a look so you're going to notice that in the heat map column here we have a wider plot and the bar chart will occupy a smaller portion so notice that we created the columns to have about seventy percent of the page width and about thirty percent of the width and therefore this is seventy percent of the pace width and this is thirty percent so if we change this to be five five then you're going to see that they're going to be widely equal like here they're going to be equal so we make it seven to three so that the heat map will be displayed wider here and we're going to have the heat map to be on columns c1 and then we'll have the bar chart to be in column c2 which is here so column c1 we're going to use with c1 and then we have indented code blocks here which will display the plus data visualization plot using the plot time hist function and then the bar chart or it's actually not the bar chart but it's the doughnut chart we're going to use the plus doughnut chart function here let's change that to donut chart press it there you go and so let me show you what happens if we don't have the style.css let's cut it out and save it you're going to see that the dashboard will look like this and so a notable visual appearance difference is that it doesn't have a background color for the boxes here and the alignment of the tabs is to the left whereas in before we have the text to be centered inside the box and then the streamlet logo is also bigger here but then in the prior is centered and it's a bit smaller so we have padding to the left to the right to the top to the bottom of each of the boxes so let's apply the css styling save it reload it and there you go this is the dashboard that we have styled using the css code so as you can see here we have a couple of lines that are used to hide the hamburger menu and the footer and how did i figure out to use this particular code here well that was done by doing like this let me show you i will click on view i will go to developer mode and i will click on the inspect elements as you highlight the various elements here you're going to get to see the exact name or id of the element in dcss so here we have 1 r 6 s l b 0 dot e 1 t z i n 5 v 2. let's have a look at the code on row 1 it's going to be this one this right here this one is the div of this as you can see when we highlight it in green and currently we set the background color to be a light gray color you see if we make it a darker gray using the code color here let's save it and now you're gonna see that it's a bit darker gray color now okay what if we make it black save it now it's black color okay and then we could change it back to the light gray color and so here we also added the padding of the spaces to three percent so what happens if we don't have it let's cut it out and save it refresh and then you're going to notice that the let me let me close this you're going to notice that the spacing around the element is less than this one so this one has spacing here to the top to the bottom to the left to the right it's centered inside the box right this one has it but this one doesn't have it so let's add it back save it refresh it okay there you go okay so there are various other css elements that i've added so that we could control the relative positioning of the container here so let me show you right here the margin is currently set at zero so if i have it zero minus three em you're gonna notice that let me try again refresh work okay and so the other css code that you can see here was added in order to customize other aspects of the dashboard as well and if you're feeling like customizing it further i would recommend to just google css code and then the specific styling that you want to do and then you just add it to this particular file and then you will be able to see whether it causes any changes to your web application so let me know in the comments section how you would intend to customize this dashboard web application further and so the code used in this tutorial will be shared on github and i'll provide you the link in the video description and let me know in the comments section how you would intend to modify this dashboard web application further and feel free to share some of your links to the dashboard that you have created share it on twitter linkedin and tag me on twitter my twitter id is thedataprof and you can find all of the links to my social media profiles in the video description thank you for watching until the end of the video please drop a star emoji so that i know that you watched this far and smash the like button if you're enjoying the content subscribe if you haven't already hit on notifications if you want to be notified of the latest video and as always the best way to learn data science is to do data science and please enjoy the journeywelcome back to the data professor youtube channel in this video i'm going to show you how you can build a dashboard web application in python using the streamlight library and let's get started alright and so the first thing that you want to do is fire up your visual code or any text editor of your choice and as you can see here the dashboard working directory is comprised of the following contents so we have a dot streamlet folder which will contain the configurations for the streamlet web application and for example we have here the background color and the text color and this font type and if we move further we have the requirements where it's going to specify which python library we need to install when we deploy the application we have the streamlit app.py which is the contents of the web application we have the streamlit logo or you could replace this with a logo of your choice we have the style.css file which will provide the necessary styling in order to customize the layout the font type size and the locations of various elements of the web application so before proceeding further let's run the streamlit app.py and so in order to do that i'm going to activate my own content environment so on my own computer i have it in the streamlit environment so i'll activate that let's list the contents of the folder and we're going to run the stringlet app.py so in order to run it we type in streamlit run streamlit underscoreapp.py enter and there you go it loads up okay so it appears that i haven't yet installed plus so let me do that pip install plus the plus is a data visualization library which allows you to create data visualization easily instrument and now we have already installed it we're going to run it again there you go this is the dashboard that we're going to build today and as you can see here the hamburger menu that are normally displayed in the streamlet application on the top right hand corner is currently hidden and the made by streamlet is also hidden as well the logo but we we keep this right here and so let's get started so you're going to notice here that we have a total of three rows and for each row we're going to have different number of columns so the first row will comprise of three columns and we're using the ft.metric function in order to display all of these metric values and then the third row we have the plus data visualization elements such as the heat map and also the bar chart as shown here so let's minimize this a bit and go back to the code and so let's explain the contents of the stringlet app.py file so at a high level here you have less than 50 lines of code so we have here 47 lines of code and so the first five lines here we're going to import the necessary libraries so we have streamlight imported sst import pandas spd import numpy as np import the plot library for the data visualization and then from pill we're going to import the image function so here we're going to set the page layout to be wide so you'll notice that it will expand to the width of the page and then we're going to read in the style.css file right here dio.css file and we're going to read in some example data for the bottom third row here where we display the heat map and the bar charts so the example data sets will be read in on lines 14 and 15. so we do that using the pandas read csv function and the data are hosted on github and so here you're going to see that we have rows abc which corresponds to here rows a rows b row c so lines 18 to 21 we're going to display the contents of row a so you're going to notice that we have a logo of streamlit here which is going to be right here so as you can see we have st columns in order to create three columns on the first row and we're going to call the first column to be a1 second column to be a2 third column to be a3 so in a1 we're going to show the logo so we're going to use the image open and then the png file of the logo and then in column a2 which is here we're going to use the metric function and then we're going to display the corresponding values so you can see here that we have win which is the first line nine miles per hour which is the second line and then we have a minus eight percent which is shown here and then in the third column we have contents to be humidity 864 percent as shown here and in row b we also made use of the sc.metric function to display the various metrics as shown here and so you could replace this with values from variables that you choose and it could be dynamically pulled in from a data source that are hosted on the cloud so that your dashboard will be updated automatically in real time when the data is updated and then in row c we're going to display the two data visualization plots here so let's have a look so you're going to notice that in the heat map column here we have a wider plot and the bar chart will occupy a smaller portion so notice that we created the columns to have about seventy percent of the page width and about thirty percent of the width and therefore this is seventy percent of the pace width and this is thirty percent so if we change this to be five five then you're going to see that they're going to be widely equal like here they're going to be equal so we make it seven to three so that the heat map will be displayed wider here and we're going to have the heat map to be on columns c1 and then we'll have the bar chart to be in column c2 which is here so column c1 we're going to use with c1 and then we have indented code blocks here which will display the plus data visualization plot using the plot time hist function and then the bar chart or it's actually not the bar chart but it's the doughnut chart we're going to use the plus doughnut chart function here let's change that to donut chart press it there you go and so let me show you what happens if we don't have the style.css let's cut it out and save it you're going to see that the dashboard will look like this and so a notable visual appearance difference is that it doesn't have a background color for the boxes here and the alignment of the tabs is to the left whereas in before we have the text to be centered inside the box and then the streamlet logo is also bigger here but then in the prior is centered and it's a bit smaller so we have padding to the left to the right to the top to the bottom of each of the boxes so let's apply the css styling save it reload it and there you go this is the dashboard that we have styled using the css code so as you can see here we have a couple of lines that are used to hide the hamburger menu and the footer and how did i figure out to use this particular code here well that was done by doing like this let me show you i will click on view i will go to developer mode and i will click on the inspect elements as you highlight the various elements here you're going to get to see the exact name or id of the element in dcss so here we have 1 r 6 s l b 0 dot e 1 t z i n 5 v 2. let's have a look at the code on row 1 it's going to be this one this right here this one is the div of this as you can see when we highlight it in green and currently we set the background color to be a light gray color you see if we make it a darker gray using the code color here let's save it and now you're gonna see that it's a bit darker gray color now okay what if we make it black save it now it's black color okay and then we could change it back to the light gray color and so here we also added the padding of the spaces to three percent so what happens if we don't have it let's cut it out and save it refresh and then you're going to notice that the let me let me close this you're going to notice that the spacing around the element is less than this one so this one has spacing here to the top to the bottom to the left to the right it's centered inside the box right this one has it but this one doesn't have it so let's add it back save it refresh it okay there you go okay so there are various other css elements that i've added so that we could control the relative positioning of the container here so let me show you right here the margin is currently set at zero so if i have it zero minus three em you're gonna notice that let me try again refresh work okay and so the other css code that you can see here was added in order to customize other aspects of the dashboard as well and if you're feeling like customizing it further i would recommend to just google css code and then the specific styling that you want to do and then you just add it to this particular file and then you will be able to see whether it causes any changes to your web application so let me know in the comments section how you would intend to customize this dashboard web application further and so the code used in this tutorial will be shared on github and i'll provide you the link in the video description and let me know in the comments section how you would intend to modify this dashboard web application further and feel free to share some of your links to the dashboard that you have created share it on twitter linkedin and tag me on twitter my twitter id is thedataprof and you can find all of the links to my social media profiles in the video description thank you for watching until the end of the video please drop a star emoji so that i know that you watched this far and smash the like button if you're enjoying the content subscribe if you haven't already hit on notifications if you want to be notified of the latest video and as always the best way to learn data science is to do data science and please enjoy the journey\n"