{"id":2744,"date":"2022-08-11T16:17:02","date_gmt":"2022-08-11T21:17:02","guid":{"rendered":"https:\/\/xlinesoft.com\/blog\/?p=2744"},"modified":"2026-08-20T17:09:34","modified_gmt":"2026-08-20T22:09:34","slug":"how-to-create-a-beautiful-dashboard-theme","status":"publish","type":"post","link":"https:\/\/xlinesoft.com\/blog\/2022\/08\/11\/how-to-create-a-beautiful-dashboard-theme\/","title":{"rendered":"How to Create a Custom Dashboard Theme in PHPRunner"},"content":{"rendered":"

You do not need to import an entire third-party website theme to reproduce its look in PHPRunner. A dashboard can be styled by combining Page Designer settings, fonts, chart options, code snippets and a small amount of CSS while keeping the generated application structure intact.<\/p>\n

The example below starts with an existing dashboard design as inspiration and recreates the important visual ideas inside PHPRunner.<\/p>\n

For inspiration, we will use the Material Dashboard<\/a> design by Creative Tim. Here is the original design:<\/p>\n

\n
\n\"Material
\n<\/a>\n<\/p>\n

Before you start<\/h2>\n

When recreating a design, identify the few elements that make the biggest visual difference first: page width, spacing, typography, card and background treatment, and chart colors. Reproducing those elements usually gets you most of the way to the desired look without adding a large amount of custom CSS.<\/p>\n

If you are starting a new project, also review the current built-in PHPRunner themes before creating a heavily customized theme from scratch. For example, the newer Harbor theme<\/a> provides a more modern starting point for many applications.<\/p>\n

1. Create a dashboard<\/h2>\n

Start by creating a dashboard with three rows and adding dashboard elements to them. In this example, the first two rows contain charts and code snippets, while the last row contains grids.<\/p>\n

Use the Colors<\/strong> settings to customize the appearance of the dashboard elements. Here are the color settings used for the charts:<\/p>\n

\n
\n\"PHPRunner
\n<\/a>\n<\/p>\n

For code snippets, choose the Left icon<\/strong> style. The background color can be different for each snippet.<\/p>\n

\n
\n\"PHPRunner
\n<\/a>\n<\/p>\n

Here are the corresponding color settings for the grids. In this example, different grids use different header background colors.<\/p>\n

\n
\n\"PHPRunner
\n<\/a>\n<\/p>\n

2. Add code snippets<\/h2>\n

Code snippets can be used for dashboard cards that display summary information. Here is the code used for the first snippet:<\/p>\n

\n