Technical Architecture

How the Theme works

This app does not modify any core Frappe files. Instead, it uses the hooks.py injection method to load its own CSS file on top of the standard Desk.

1. The Hook

In hooks.py, the following line injects our stylesheet into the Desk header:

app_include_css = "/assets/business_theme_v14/css/business_theme_v14.css"

2. CSS Overrides

The file public/css/business_theme_v14.css contains approximately 300 lines of CSS. It uses high-specificity selectors and !important flags to override Bootstrap defaults.

Example Override:

/* Forces the navbar to be Slate Blue */
.navbar {
    background: var(--background-color) !important;
}

/* Customizes the focus glow on inputs */
.form-control:focus {
    border: 1px solid var(--primary-color);
    box-shadow: none;
}

3. File Structure

• hooks.py: Configuration entry point.
• public/css/: Contains the master stylesheet.
• public/js/: (Currently unused/commented out) reserved for future JS logic.