How to change erp logo styles through custom app

Dhanya_K · May 10, 2024, 5:05am

Abdeali · May 10, 2024, 6:24am

by hooks.

See hooks.py

app_logo_url = "PATH_TO_IMAGE"
website_context = {
    "favicon": "PATH_TO_IMAGE",
    "splash_image": "PATH_TO_IMAGE",
}

Dhanya_K · May 10, 2024, 7:02am

how to write css code for increase height and padding for erpnext logo.

Abdeali · May 10, 2024, 7:10am

Frappe Reference :

github.com

frappe/frappe/blob/2c0b77bf819c898d67057ecd6a9cdf9aecaf7083/frappe/public/scss/desk/global.scss#L595


      
          		.layout-side-section {
          			display: none;
          		}
          
          		.layout-main-section-wrapper {
          			width: 100% !important;
          		}
          	}
          }
          
          .app-logo {
          	width: 24px;
          	h4 {
          		margin-top: 0;
          	}
          }
          
          .alt-pressed .alt-underline {
          	text-decoration: underline;
          }

github.com

frappe/frappe/blob/2c0b77bf819c898d67057ecd6a9cdf9aecaf7083/frappe/public/js/frappe/ui/toolbar/navbar.html#L4


      
          <div class="sticky-top">
          	<header class="navbar navbar-expand" role="navigation">
          		<div class="container">
          			<a class="navbar-brand navbar-home" href="/app">
          				<img
          					class="app-logo"
          					src="{{ frappe.boot.app_logo_url }}"
          					alt="{{ __("App Logo") }}"
          				>
          			</a>
          			<ul class="nav navbar-nav d-none d-sm-flex" id="navbar-breadcrumbs"></ul>
          			<div class="collapse navbar-collapse justify-content-end">
          				<form class="form-inline fill-width justify-content-end" role="search" onsubmit="return false;">
          					{% if (frappe.boot.read_only) { %}

Create SCSS/CSS in your custom app and override it.

Dhanya_K · May 10, 2024, 7:19am

.navbar {
height: 78px !important;
border-bottom: 1px solid black;
padding: 0;
}

.navbar .navbar-brand {
margin-right: 0 !important;
}

.navbar-home img {
max-height: 65px !important;
width: auto;
}
this css file I added in custom app css folder.but style not reflecting in UI.

Dhanya_K · May 10, 2024, 7:28am

ok.thanks

Dhanya_K · May 10, 2024, 7:39am

After these steps i can’t change erpnext logo height.

Abdeali · May 10, 2024, 7:41am

Can you share image and code? and css file is accessible?

Dhanya_K · May 10, 2024, 7:47am

css file
.navbar {
height: 78px !important;
border-bottom: 1px solid black;
padding: 0;
}

.navbar .navbar-brand {
margin-right: 0 !important;
}

.navbar-home img {
max-height: 65px !important;
width: auto;
}

hooks.py
web_include_css = [ “/assets/demo_app/css/logoStyling.css”]

logo size not changed

Abdeali · May 10, 2024, 7:51am

Sorry instead of

app_include_css = "/assets/css/YOUR_APP_NAME.min.css"

do

app_include_css = "YOUR_APP_NAME.bundle.css"

and add YOUR_APP_NAME.bundle.css to public/css/

Dhanya_K · May 10, 2024, 7:54am

ok.Thank you.