Dashboard Customization Guide
You can easily customize this dashboard by modifying the CSS variables at the top of the style section:
:root {
/* ... other variables ... */
/* Customizable variables - adjust these to change the appearance */
--progress-bar-width: 400px; /* ADJUST THIS to change the width of the progress bars */
--progress-bar-height: 24px; /* ADJUST THIS to change the height of the progress bars */
--task-row-spacing: 1.5rem; /* Space between task rows */
--subtask-tag-size: 0.9rem; /* Font size for subtask tags */
--color-square-width: 16px; /* Width of the colored squares */
--grid-item-height: 36px; /* Height of each grid item */
--grid-item-gap: 1px; /* Gap between grid items */
}
To modify these values:
- Open the HTML file in a text editor
- Find the
:root section in the CSS (near the top)
- Change the values as needed:
- Increase
--progress-bar-width to make bars wider
- Increase
--progress-bar-height to make bars taller
- Adjust
--task-row-spacing to change spacing between tasks
- Modify
--subtask-tag-size to change the text size in subtask tags
- Change
--color-square-width to adjust the width of colored squares
- Change
--grid-item-height to adjust the height of each row
- Change
--grid-item-gap to adjust spacing between items
- Save the file and refresh your browser
You can also modify the JSON data at the bottom of the file to update the task information and ratings.