+ Customising theme
+ +Jazzy backend theme provides a fully configurable theme settings menu.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/jazzy_backend_theme/static/description/theme_screenshot.jpg b/jazzy_backend_theme/static/description/theme_screenshot.jpg
new file mode 100644
index 000000000..f35c3509c
Binary files /dev/null and b/jazzy_backend_theme/static/description/theme_screenshot.jpg differ
diff --git a/jazzy_backend_theme/static/src/components/app_menu/menu_order.css b/jazzy_backend_theme/static/src/components/app_menu/menu_order.css
new file mode 100644
index 000000000..7aa8843c4
--- /dev/null
+++ b/jazzy_backend_theme/static/src/components/app_menu/menu_order.css
@@ -0,0 +1,254 @@
+@keyframes fadeIn{
+ 0%{
+ opacity: 0;
+ }
+ 100%{
+ opacity: 1;
+ }
+}
+o_setting_search {
+ position: relative;
+}
+.o_setting_search .searchInput {
+ height: 28px;
+ padding: 0px;
+ border: 0px;
+ box-shadow: none;
+ font-weight: 500;
+}
+.o_setting_search .searchIcon {
+ color: gray('700');
+}
+.o_kanban_renderer{
+ background-color: var(--kanban-bg-color);
+}
+.oe_kanban_global_click{
+ border-radius: 15px;
+}
+ .search-container.has-results .search-input {
+ height: 3em;
+}
+ .search-container.has-results .search-results {
+ height: calc(100% - 3em);
+ overflow: auto;
+ margin-top: 10px;
+}
+
+.o_setting_search.col-md-10{
+ padding: 20px;
+}
+.app-menu {
+ width: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ padding-left: calc((100vw - 850px) / 2);
+ padding-right: calc((100vw - 850px) / 2);
+
+}
+.o-menu-search-result.dropdown-item.col-12.ml-auto.mr-auto {
+ background-repeat: no-repeat;
+ background-size: contain;
+ padding-left: 5.5rem;
+}
+.form-control {
+ padding: 0 !important;
+}
+@media (max-width: 1371px){
+
+}
+@media (max-width:992px) {
+
+}
+@media (max-width:400px) {
+
+}
+.o_main_navbar .o_menu_brand {
+ text-decoration: none !important;
+ margin-left: 10px;
+}
+.o_navbar .o_main_navbar .dropdown-toggle .dropdown-menu .search-container {
+ padding-left: calc((100vw - 850px) / 2);
+ padding-right: calc((100vw - 850px) / 2);
+ padding-top:20px;
+ padding-bottom:20px;
+ display: table;
+}
+.o_apps_menu_opened .o_main_navbar .o_menu_brand{
+ display:none;
+}
+.app_components {
+ position: absolute;
+ height: 100vh;
+ width: 100%;
+ background: #f5f5f5f0;
+ z-index: 99;
+ top: 40px;
+ display:none;
+ background: url("../../src/img/background.jpg"), linear-gradient(to bottom, #71639e, #b0adba);
+}
+.app-menu a{
+ flex-basis: 19%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ margin-bottom: 23px;
+}
+o_setting_search {
+ position: relative;
+}
+.o_setting_search .searchInput {
+ height: 28px;
+ padding: 0px;
+ border: 0px;
+ box-shadow: none;
+ font-weight: 500;
+}
+.o_setting_search .searchIcon {
+ color: gray('700');
+}
+ .search-container.has-results .search-input {
+ height: 3em;
+ display: table;
+}
+ .search-container.has-results .search-results {
+ height: calc(100% - 3em);
+ overflow: auto;
+ margin-top: 10px;
+}
+
+.o_setting_search.col-md-10{
+ padding: 20px;
+}
+.app-menu {
+ width: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ padding-left: calc((100vw - 850px) / 2);
+ padding-right: calc((100vw - 850px) / 2);
+
+}
+
+.o-menu-search-result.dropdown-item.col-12.ml-auto.mr-auto {
+ background-repeat: no-repeat;
+ background-size: contain;
+ padding-left: 3rem;
+}
+.form-control {
+ padding: 0 !important;
+}
+@media (max-width: 1371px){
+
+}
+@media (max-width:992px) {
+
+}
+@media (max-width:400px) {
+
+}
+.o_main_navbar .o_menu_brand {
+ text-decoration: none !important;
+ margin-left: 10px;
+}
+.o_navbar .o_main_navbar .dropdown-toggle .dropdown-menu .search-container {
+ padding-left: calc((100vw - 850px) / 2);
+ padding-right: calc((100vw - 850px) / 2);
+ padding-top:20px;
+ padding-bottom:20px;
+}
+.o_apps_menu_opened .o_main_navbar .o_menu_brand{
+ display:none;
+}
+.app_components {
+ position: absolute;
+ height: 100vh;
+ width: 100%;
+ background: #f5f5f5f0;
+ z-index: 99;
+ top: 40px;
+ display:none;
+ background: url("../../img/background.jpg"), linear-gradient(to bottom, #71639e, #b0adba);
+}
+.app-menu a{
+ flex-basis: 19%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ margin-bottom: 23px;
+ cursor:pointer;
+}
+.app_components .search-input{
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.1);
+ border-radius: 4px;
+ width:100%;
+ background-color: rgba(255, 255, 255, 0.1);
+ margin-bottom:1rem;
+ text-shadow: 0 1px 0 rgb(0 0 0 / 50%);
+}
+.o_navbar .o_main_navbar .o_main-menu-button:hover{
+ background:rgba(0, 0, 0, 0.08);
+ cursor: pointer;
+}
+@media (max-width: 850px) {
+ .app_components .search-input {
+ width:90%;
+ margin:0 auto;
+ }
+ .app-menu {
+ width:90%;
+ margin:0 auto;
+ }
+}
+@media (max-width: 444px) {
+ .app-menu{
+ width:80%;
+ }
+ .app-menu a{
+ flex-basis: 25%;
+ }
+}
+ /* Container styling */
+ .search-results {
+ border-radius: 8px;
+ padding: 20px;
+ }
+
+ /* Unordered list styling */
+ .search-results ul {
+ list-style-type: none; /* Remove default bullets */
+ padding: 0; /* Remove default padding */
+ margin: 0; /* Remove default margin */
+ }
+
+ /* List item styling */
+ .search-results li {
+ margin-bottom: 10px; /* Space between items */
+ border-radius: 5px; /* Rounded corners */
+ padding: 15px; /* Inner padding */
+ cursor: pointer; /* Pointer cursor on hover */
+ transition: background 0.3s ease; /* Smooth background transition */
+ }
+
+ /* Text styling for menu name */
+ .search-results li span {
+ font-size: 16px;
+ color: var(--app-menu-font-color) !important;
+ }
+.o_main_navbar .o_menu_brand, .o_main_navbar .o_navbar_apps_menu .dropdown-toggle, .o_main_navbar .o_nav_entry, .o_main_navbar .dropdown-toggle:not(.o-dropdown-toggle-custo), .o_main_navbar .o_menu_toggle {
+ color: var(--app-menu-font-color) !important;
+}
+.o_main_navbar .o_menu_brand, .o_main_navbar .o_navbar_breadcrumbs, .o_main_navbar .o_navbar_breadcrumbs .btn {
+color: var(--app-menu-font-color) !important;
+}
+ /* Hover effect for each list item */
+ .search-results li:hover {
+ background-color: #007bff; /* Change background color on hover */
+ color: #fff; /* Change text color on hover */
+ border-color: #007bff; /* Change border color on hover */
+ }
+
+ /* Hover effect for the text inside the list item */
+ .search-results li:hover span {
+ color: #fff; /* Change text color on hover */
+ }
diff --git a/jazzy_backend_theme/static/src/components/app_menu/search_apps.js b/jazzy_backend_theme/static/src/components/app_menu/search_apps.js
new file mode 100644
index 000000000..3df97043d
--- /dev/null
+++ b/jazzy_backend_theme/static/src/components/app_menu/search_apps.js
@@ -0,0 +1,268 @@
+/** @odoo-module */
+import { NavBar } from "@web/webclient/navbar/navbar";
+import { registry } from "@web/core/registry";
+import { fuzzyLookup } from "@web/core/utils/search";
+import { computeAppsAndMenuItems } from "@web/webclient/menus/menu_helpers";
+import { useService } from "@web/core/utils/hooks";
+import { onMounted, useRef, useState} from "@odoo/owl";
+import { patch } from "@web/core/utils/patch";
+
+patch(NavBar.prototype, {
+ // To modify the Navbar properties and functions.
+ setup() {
+ super.setup()
+ this._search_def = this.createDeferred();
+ this.search_container = useRef("search-container");
+ this.search_input = useRef("search-input");
+ this.search_result = useRef("search-results");
+ this.app_menu = useRef("app-menu");
+ this.sidebar_panel = useRef("sidebar_panel");
+ this.app_components = useRef("app_components");
+ this.state = useState({...this.state, menus: [], searchQuery: ""})
+ let { apps, menuItems } = computeAppsAndMenuItems(this.menuService.getMenuAsTree("root"));
+ this._apps = apps;
+ this._searchableMenus = menuItems;
+ this.fetch_data()
+ onMounted(() => {
+ this.setClass()
+ })
+ },
+ createDeferred() {
+ let deferred = {};
+
+ deferred.promise = new Promise((resolve, reject) => {
+ deferred.resolve = resolve;
+ deferred.reject = reject;
+ });
+
+ return deferred;
+},
+ async fetch_data() {
+ // To fetch colors from database.
+ this.orm = useService("orm")
+ var result = await this.orm.call("res.config.settings", "config_color_settings", [0])
+ if (result.primary_accent !== false){
+ document.documentElement.style.setProperty("--primary-accent",result.primary_accent)
+ }
+ if (result.appbar_color !== false){
+ document.documentElement.style.setProperty("--app-bar-accent",result.appbar_color)
+ }
+ if (result.primary_hover !== false){
+ document.documentElement.style.setProperty("--primary-hover",result.primary_hover)
+ }
+ if (result.full_bg_img !== false) {
+ var imageUrl = 'url(data:image/png;base64,' + result.full_bg_img + ')';
+ var appComponentsDivs = document.getElementsByClassName('app_components');
+
+ for (var i = 0; i < appComponentsDivs.length; i++) {
+ appComponentsDivs[i].style.backgroundImage = imageUrl;
+ }
+ }
+ if (result.appbar_text !== false){
+ document.documentElement.style.setProperty("--app-menu-font-color",result.appbar_text)
+ }
+ if (result.secondary_hover !== false){
+ document.documentElement.style.setProperty("--secondary-hover",result.secondary_hover)
+ }
+ if (result.kanban_bg_color !== false) {
+ document.documentElement.style.setProperty("--kanban-bg-color", result.kanban_bg_color)
+ }
+ },
+ setClass() {
+ // Set variable for html elements.
+ this.$search_container = this.search_container;
+ this.$search_input = this.search_input;
+ this.$search_results = this.search_result;
+ this.$app_menu = this.app_menu;
+ },
+ _searchMenusSchedule() {
+ this.$search_results.el.classList.remove("o_hidden");
+ this.$app_menu.el.classList.add("o_hidden");
+ this._search_def = this.createDeferred();
+ this._searchMenus();
+ },
+ _searchMenus() {
+ // App menu search function
+ var query = this.state.searchQuery;
+ if (query === "") {
+ this.$search_container.el.classList.remove("has-results");
+ this.$search_results.el.classList.add("o_hidden")
+ this.$app_menu.el.classList.remove("o_hidden");
+ return;
+ }
+ var results = [];
+ fuzzyLookup(query, this._apps, (menu) => menu.label)
+ .forEach((menu) => {
+ results.push({
+ category: "apps",
+ name: menu.label,
+ actionID: menu.actionID,
+ id: menu.id,
+ webIconData: menu.webIconData,
+ });
+ });
+ fuzzyLookup(query, this._searchableMenus, (menu) =>
+ (menu.parents + " / " + menu.label).split("/").reverse().join("/")
+ ).forEach((menu) => {
+ results.push({
+ category: "menu_items",
+ name: menu.parents + " / " + menu.label,
+ actionID: menu.actionID,
+ id: menu.id,
+ });
+ });
+ this.state.menus = results
+ },
+ get menus() {
+ return this.state.menus
+ },
+ handleClick(menu) {
+ this.app_components.el.nextSibling.style.display = "block";
+ this.app_components.el.style.display = "none";
+
+ this.sidebar_panel.el.style.display = "block";
+ this.app_menu.el.classList.remove('o_hidden');
+
+ let children = this.app_components.el.parentElement.children;
+ let oNavbar = null;
+
+ for (let i = 0; i < children.length; i++) {
+ if (children[i].classList.contains('o_navbar')) {
+ oNavbar = children[i];
+ break;
+ }
+ }
+
+ let navChild = oNavbar.children[0].children;
+ for (let i = 0; i < navChild.length; i++) {
+ if (navChild[i].classList.contains('o_menu_brand')) {
+ navChild[i].classList.remove('d-none');
+ navChild[i].classList.add('d-block');
+ }
+ if (navChild[i].classList.contains('o_menu_sections')) {
+ navChild[i].classList.remove('d-none');
+ navChild[i].classList.add('d-block');
+ }
+ }
+
+ if (menu) {
+ this.menuService.selectMenu(menu)
+ .then(() => {
+ // Trigger page refresh after the menu is loaded
+ location.reload();
+ })
+ .catch(err => {
+ console.error('Menu navigation failed:', err);
+ });
+ }
+ },
+ OnClickMainMenu() {
+ // To show search screen
+ if (this.app_components.el.style.display === "" || this.app_components.el.style.display === "none" ) {
+ let children = this.app_components.el.parentElement.children;
+ let oNavbar = null;
+ for (let i = 0; i < children.length; i++) {
+ if (children[i].classList.contains('o_navbar')) {
+ oNavbar = children[i];
+ break;
+ }
+ }
+ let navChild = oNavbar.children[0].children
+ for (let i = 0; i < navChild.length; i++) {
+ if (navChild[i].classList.contains('o_menu_brand')) {
+ navChild[i].classList.add('d-none')
+ }
+ if (navChild[i].classList.contains('o_menu_sections')) {
+ navChild[i].classList.add('d-none')
+ }
+ }
+ this.app_components.el.style.transition = "opacity 0.25s"
+ this.app_components.el.style.opacity="1"
+ this.app_components.el.style.display = "block"
+ this.app_components.el.nextSibling.style.display = "none"
+ this.sidebar_panel.el.style.display = "none"
+ } else {
+ this.app_components.el.style.transition = "opacity 0.05s";
+ this.app_components.el.style.opacity = "0";
+ setTimeout(() => {
+ this.app_components.el.style.display = "none";
+ }, 50);
+ this.app_components.el.nextSibling.style.display = "block"
+ this.sidebar_panel.el.style.display = "block"
+ let children = this.app_components.el.parentElement.children;
+ let oNavbar = null;
+ for (let i = 0; i < children.length; i++) {
+ if (children[i].classList.contains('o_navbar')) {
+ oNavbar = children[i];
+ break;
+ }
+ }
+ let navChild = oNavbar.children[0].children
+ for (let i = 0; i < navChild.length; i++) {
+ if (navChild[i].classList.contains('o_menu_brand')) {
+ navChild[i].classList.remove('d-none')
+ }
+ if (navChild[i].classList.contains('o_menu_sections')) {
+ navChild[i].classList.remove('d-none')
+ }
+ }
+ }
+ },
+ onNavBarDropdownItemSelection(app) {
+ // To go to app menu
+ this.app_components.el.style.display = "none";
+ this.app_components.el.nextSibling.style.display = "block"
+ this.sidebar_panel.el.style.display = "block"
+ let children = this.app_components.el.parentElement.children;
+ let oNavbar = null;
+ for (let i = 0; i < children.length; i++) {
+ if (children[i].classList.contains('o_navbar')) {
+ oNavbar = children[i];
+ break;
+ }
+ }
+ let navChild = oNavbar.children[0].children
+ for (let i = 0; i < navChild.length; i++) {
+ if (navChild[i].classList.contains('o_menu_brand')) {
+ navChild[i].classList.add('d-flex')
+ navChild[i].classList.remove('d-none')
+ }
+ if (navChild[i].classList.contains('o_menu_sections')) {
+ navChild[i].classList.add('d-flex')
+ navChild[i].classList.remove('d-none')
+ }
+ }
+ if (app) {
+ this.menuService.selectMenu(app);
+
+ }
+ },
+ refreshNavBar() {
+ // Find the navbar element
+ let children = this.app_components.el.parentElement.children;
+ let oNavbar = null;
+
+ // Locate the navbar component
+ for (let i = 0; i < children.length; i++) {
+ if (children[i].classList.contains('o_navbar')) {
+ oNavbar = children[i];
+ break;
+ }
+ }
+
+ if (oNavbar) {
+ let navChild = oNavbar.children[0].children;
+ // Ensure the navbar sections are displayed correctly
+ for (let i = 0; i < navChild.length; i++) {
+ if (navChild[i].classList.contains('o_menu_brand')) {
+ navChild[i].classList.remove('d-none');
+ navChild[i].classList.add('d-block');
+ }
+ if (navChild[i].classList.contains('o_menu_sections')) {
+ navChild[i].classList.remove('d-none');
+ navChild[i].classList.add('d-block');
+ }
+ }
+ }
+ }
+})
diff --git a/jazzy_backend_theme/static/src/components/app_menu/side_menu.xml b/jazzy_backend_theme/static/src/components/app_menu/side_menu.xml
new file mode 100644
index 000000000..d88f00e80
--- /dev/null
+++ b/jazzy_backend_theme/static/src/components/app_menu/side_menu.xml
@@ -0,0 +1,120 @@
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+ 
+
+
+
+
+
+
+ Supports:
+
+
+ Community
+
+
+
+
+ Availability:
+
+
+ Odoo Online
+
+
+ Odoo.sh
+
+
+ On Premise
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Our Features
+ +info includes 300+ elements that you may need to create website without + external plugins.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Smooth navigation
+ +Easily accessible sidebar where it reveals the sidebar menu on just a click.
+
+
+
+
+
+
+
+
+
+
+ Highly responsive
+ +Critical highlights of the Jazzy backend theme is that it was genuinely responsive.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Theme Features
+
+
+
+
+
+
+
+
+
+
+ 
+ 
+
+
+
+
+
+
+
+
+
+
+
+ 
+ 
+
+
+
+
+
+
+
+
+
+ 
+ 
+
+
+
+
+
+
+ Truly
+
+
+
+ Truly
+ Responsive
+
+
+
+
+ One of the critical highlights of + the Hue backend theme is that + it was genuinely responsive; moreover, it provides + an efficient interface to manage a mobile device.
+-
+
Appealing card hover style
+ - Detailed product filtering
+
- Modernized mini basket
+
- Cutting-edge single product
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ Stunning
+
+
+
+ Stunning
+ Pages
+
+
+
+
+ Jazzy Backend Theme V18 is an Attractive Theme for Your + Odoo 18. This Theme Will Improve + Your Experience With Odoo.
+-
+
- Visually Stunning Design
+
- Customizable Layouts
+
- User-Friendly Navigation
+
+
+
+
+
+
+
+
+
+
+
+ Our Services
+
+
+
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ -
+
- + + +
+
+
+ ![]()
+ ![]()
+
+
+
+
+
+
+ -
+
-
+
+
+
+ +
+
+ Background Image
+
+
+ App Bar Background Color
+
+
+ App Menu Text Color
+
+
+ AppBar Hover Color
+
+
+ Navbar Background Color
+
+
+ Primary Button Hover
+
+
+ Kanban Background Color
+
+