CINXE.COM
How to Customize Workspace Look and Feel - ERPNext - Frappe Forum
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>How to Customize Workspace Look and Feel - ERPNext - Frappe Forum</title> <meta name="description" content="Hi , V15 is a great release but seems quite a number of users find the UI not very appealing (which apparently is a serious issue in this generation :grinning: ) Is there any way to make little changes (background colo&hellip;"> <meta name="generator" content="Discourse 3.2.0 - https://github.com/discourse/discourse version 968b1a57e474be2d20bfaccca9ef724b5725711f"> <link rel="icon" type="image/png" href="https://discuss.frappe.io/uploads/default/optimized/3X/a/5/a5e946e67fbe05a61d1c33d08894876d4d9dea7a_2_32x32.png"> <link rel="apple-touch-icon" type="image/png" href="https://discuss.frappe.io/uploads/default/optimized/3X/a/5/a5e946e67fbe05a61d1c33d08894876d4d9dea7a_2_180x180.png"> <meta name="theme-color" media="all" content="#ffffff"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=yes, viewport-fit=cover"> <link rel="canonical" href="https://discuss.frappe.io/t/how-to-customize-workspace-look-and-feel/119911" /> <link rel="search" type="application/opensearchdescription+xml" href="https://discuss.frappe.io/opensearch.xml" title="Frappe Forum Search"> <link href="/stylesheets/color_definitions_base__12_d23c3e42599b195aaea7215ae1cd13ea7eeceef9.css?__ws=discuss.frappe.io" media="all" rel="stylesheet" class="light-scheme"/> <link href="/stylesheets/desktop_39bfbf9dbfdadf1590104ac1d70ac2e42296b66f.css?__ws=discuss.frappe.io" media="all" rel="stylesheet" data-target="desktop" /> <link href="/stylesheets/checklist_39bfbf9dbfdadf1590104ac1d70ac2e42296b66f.css?__ws=discuss.frappe.io" media="all" rel="stylesheet" data-target="checklist" /> <link href="/stylesheets/discourse-details_39bfbf9dbfdadf1590104ac1d70ac2e42296b66f.css?__ws=discuss.frappe.io" media="all" rel="stylesheet" data-target="discourse-details" /> <link href="/stylesheets/discourse-lazy-videos_39bfbf9dbfdadf1590104ac1d70ac2e42296b66f.css?__ws=discuss.frappe.io" media="all" rel="stylesheet" data-target="discourse-lazy-videos" /> <link href="/stylesheets/discourse-local-dates_39bfbf9dbfdadf1590104ac1d70ac2e42296b66f.css?__ws=discuss.frappe.io" media="all" rel="stylesheet" data-target="discourse-local-dates" /> <link href="/stylesheets/discourse-narrative-bot_39bfbf9dbfdadf1590104ac1d70ac2e42296b66f.css?__ws=discuss.frappe.io" media="all" rel="stylesheet" data-target="discourse-narrative-bot" /> <link href="/stylesheets/discourse-presence_39bfbf9dbfdadf1590104ac1d70ac2e42296b66f.css?__ws=discuss.frappe.io" media="all" rel="stylesheet" data-target="discourse-presence" /> <link href="/stylesheets/discourse-solved_39bfbf9dbfdadf1590104ac1d70ac2e42296b66f.css?__ws=discuss.frappe.io" media="all" rel="stylesheet" data-target="discourse-solved" /> <link href="/stylesheets/docker_manager_39bfbf9dbfdadf1590104ac1d70ac2e42296b66f.css?__ws=discuss.frappe.io" media="all" rel="stylesheet" data-target="docker_manager" /> <link href="/stylesheets/footnote_39bfbf9dbfdadf1590104ac1d70ac2e42296b66f.css?__ws=discuss.frappe.io" media="all" rel="stylesheet" data-target="footnote" /> <link href="/stylesheets/poll_39bfbf9dbfdadf1590104ac1d70ac2e42296b66f.css?__ws=discuss.frappe.io" media="all" rel="stylesheet" data-target="poll" /> <link href="/stylesheets/spoiler-alert_39bfbf9dbfdadf1590104ac1d70ac2e42296b66f.css?__ws=discuss.frappe.io" media="all" rel="stylesheet" data-target="spoiler-alert" /> <link href="/stylesheets/poll_desktop_39bfbf9dbfdadf1590104ac1d70ac2e42296b66f.css?__ws=discuss.frappe.io" media="all" rel="stylesheet" data-target="poll_desktop" /> <link href="/stylesheets/desktop_theme_12_caa86d7e8db01422e5957498ebcdaac890fe2996.css?__ws=discuss.frappe.io" media="all" rel="stylesheet" data-target="desktop_theme" data-theme-id="12" data-theme-name="erpnext"/> <link rel="alternate nofollow" type="application/rss+xml" title="RSS feed of 'How to Customize Workspace Look and Feel'" href="https://discuss.frappe.io/t/how-to-customize-workspace-look-and-feel/119911.rss" /> <meta property="og:site_name" content="Frappe Forum" /> <meta property="og:type" content="website" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:image" content="https://discuss.frappe.io/uploads/default/original/3X/0/b/0b28794440eb26973e11119effb9e80dcb726e09.png" /> <meta property="og:image" content="https://discuss.frappe.io/uploads/default/original/3X/0/b/0b28794440eb26973e11119effb9e80dcb726e09.png" /> <meta property="og:url" content="https://discuss.frappe.io/t/how-to-customize-workspace-look-and-feel/119911" /> <meta name="twitter:url" content="https://discuss.frappe.io/t/how-to-customize-workspace-look-and-feel/119911" /> <meta property="og:title" content="How to Customize Workspace Look and Feel" /> <meta name="twitter:title" content="How to Customize Workspace Look and Feel" /> <meta property="og:description" content="Hi , V15 is a great release but seems quite a number of users find the UI not very appealing (which apparently is a serious issue in this generation 😀 ) Is there any way to make little changes (background color, button color/size etc) to the UI without tampering with core code ? Kind regards" /> <meta name="twitter:description" content="Hi , V15 is a great release but seems quite a number of users find the UI not very appealing (which apparently is a serious issue in this generation 😀 ) Is there any way to make little changes (background color, button color/size etc) to the UI without tampering with core code ? Kind regards" /> <meta property="og:article:section" content="ERPNext" /> <meta property="og:article:section:color" content="BF1E2E" /> <meta name="twitter:label1" value="Reading time" /> <meta name="twitter:data1" value="1 mins 🕑" /> <meta name="twitter:label2" value="Likes" /> <meta name="twitter:data2" value="1 ❤" /> <meta property="article:published_time" content="2024-03-27T11:55:09+00:00" /> <meta property="og:ignore_canonical" content="true" /> <script type="application/ld+json">{"@context":"http://schema.org","@type":"QAPage","name":"How to Customize Workspace Look and Feel","mainEntity":{"@type":"Question","name":"How to Customize Workspace Look and Feel","text":"Hi ,\n\nV15 is a great release but seems quite a number of users find the UI not very appealing (which apparently is a serious issue in this generation :grinning: )\n\nIs there any way to make little changes (background color, button color/size etc) to the UI without tampering with core code ?\n\nKind reg…","upvoteCount":0,"answerCount":0,"dateCreated":"2024-03-27T11:55:09.443Z","author":{"@type":"Person","name":"Wale"}}}</script> </head> <body class="crawler browser-update"> <div class="erpnext-header"> <a href="https://frappe.io" target="_blank">Frappe.io</a> <a href="https://frappecloud.com" target="_blank">Frappe Cloud</a> <a href="https://docs.frappe.io/" target="_blank">Documentation</a> <a href="https://frappe.io/partners" target="_blank">Partners</a> <a href="https://frappe.school" target="_blank">Frappe School</a> <a href="https://frappecloud.com/marketplace" target="_blank">Marketplace</a> <a href="https://t.me/erpnext_public" target="_blank">Public Chat</a> </div> <header> <a href="/"> Frappe Forum </a> </header> <div id="main-outlet" class="wrap" role="main"> <div id="topic-title"> <h1> <a href="/t/how-to-customize-workspace-look-and-feel/119911">How to Customize Workspace Look and Feel</a> </h1> <div class="topic-category" itemscope itemtype="http://schema.org/BreadcrumbList"> <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a href="/c/erpnext/6" class="badge-wrapper bullet" itemprop="item"> <span class='badge-category-bg' style='background-color: #BF1E2E'></span> <span class='badge-category clear-badge'> <span class='category-name' itemprop='name'>ERPNext</span> </span> </a> <meta itemprop="position" content="1" /> </span> </div> </div> <div itemscope itemtype='http://schema.org/DiscussionForumPosting'> <meta itemprop='headline' content='How to Customize Workspace Look and Feel'> <link itemprop='url' href='https://discuss.frappe.io/t/how-to-customize-workspace-look-and-feel/119911'> <meta itemprop='datePublished' content='2024-03-27T11:55:09Z'> <meta itemprop='articleSection' content='ERPNext'> <meta itemprop='keywords' content=''> <div itemprop='publisher' itemscope itemtype="http://schema.org/Organization"> <meta itemprop='name' content='Frappe'> <div itemprop='logo' itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop='url' content='https://discuss.frappe.io/uploads/default/original/3X/e/1/e1295d1f76ba489dd58f8c9b55eee88286fc9a31.png'> </div> </div> <div id='post_1' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" href='https://discuss.frappe.io/u/wale'><span itemprop='name'>wale</span></a> </span> <link itemprop="mainEntityOfPage" href="https://discuss.frappe.io/t/how-to-customize-workspace-look-and-feel/119911"> <span class="crawler-post-infos"> <time datetime='2024-03-27T11:55:09Z' class='post-time'> March 27, 2024, 11:55am </time> <meta itemprop='dateModified' content='2024-03-27T11:55:09Z'> <span itemprop='position'>1</span> </span> </div> <div class='post' itemprop='text'> <p>Hi ,</p> <p>V15 is a great release but seems quite a number of users find the UI not very appealing (which apparently is a serious issue in this generation <img src="https://discuss.frappe.io/images/emoji/twitter/grinning.png?v=12" title=":grinning:" class="emoji" alt=":grinning:" loading="lazy" width="20" height="20"> )</p> <p>Is there any way to make little changes (background color, button color/size etc) to the UI without tampering with core code ?</p> <p>Kind regards</p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="0" /> <span class='post-likes'></span> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/CommentAction"/> <meta itemprop="userInteractionCount" content="0" /> </div> </div> <div id='post_2' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" href='https://discuss.frappe.io/u/Pheakdey_Tes'><span itemprop='name'>Pheakdey_Tes</span></a> </span> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2024-03-27T13:55:51Z' class='post-time'> March 27, 2024, 1:55pm </time> <meta itemprop='dateModified' content='2024-03-27T13:55:51Z'> <span itemprop='position'>2</span> </span> </div> <div class='post' itemprop='text'> <p>I customise desk UI background colour and button size by just create my own custom app and create a CSS file map it in my app hooks.py</p> <p>It not affected to core file.<br> At first I think it hard, but trust me it very easy to achieve this.</p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="1" /> <span class='post-likes'>1 Like</span> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/CommentAction"/> <meta itemprop="userInteractionCount" content="2" /> </div> </div> <div id='post_3' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" href='https://discuss.frappe.io/u/wale'><span itemprop='name'>wale</span></a> </span> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2024-03-28T08:41:30Z' class='post-time'> March 28, 2024, 8:41am </time> <meta itemprop='dateModified' content='2024-03-28T08:41:30Z'> <span itemprop='position'>3</span> </span> </div> <div class='post' itemprop='text'> <p>Hi <a class="mention" href="/u/pheakdey_tes">@Pheakdey_Tes</a></p> <p>Thanks for your response… it’s very encouraging <img src="https://discuss.frappe.io/images/emoji/twitter/slight_smile.png?v=12" title=":slight_smile:" class="emoji" alt=":slight_smile:" loading="lazy" width="20" height="20"></p> <p>Could you pls give some more specific details on steps you took to achieve this and possibly the content of the css file ?</p> <p>Thanks</p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="0" /> <span class='post-likes'></span> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/CommentAction"/> <meta itemprop="userInteractionCount" content="0" /> </div> </div> <div id='post_4' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" href='https://discuss.frappe.io/u/jameelfullstackdev'><span itemprop='name'>jameelfullstackdev</span></a> </span> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2025-03-22T07:05:51Z' class='post-time'> March 22, 2025, 7:05am </time> <meta itemprop='dateModified' content='2025-03-22T07:05:51Z'> <span itemprop='position'>4</span> </span> </div> <div class='post' itemprop='text'> <p>can you show us the example please? i hope that would help us a lot</p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="0" /> <span class='post-likes'></span> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/CommentAction"/> <meta itemprop="userInteractionCount" content="0" /> </div> </div> </div> </div> <footer class="container wrap"> <nav class='crawler-nav'> <ul> <li itemscope itemtype='http://schema.org/SiteNavigationElement'> <span itemprop='name'> <a href='/' itemprop="url">Home </a> </span> </li> <li itemscope itemtype='http://schema.org/SiteNavigationElement'> <span itemprop='name'> <a href='/categories' itemprop="url">Categories </a> </span> </li> <li itemscope itemtype='http://schema.org/SiteNavigationElement'> <span itemprop='name'> <a href='/guidelines' itemprop="url">FAQ/Guidelines </a> </span> </li> <li itemscope itemtype='http://schema.org/SiteNavigationElement'> <span itemprop='name'> <a href='/tos' itemprop="url">Terms of Service </a> </span> </li> <li itemscope itemtype='http://schema.org/SiteNavigationElement'> <span itemprop='name'> <a href='/privacy' itemprop="url">Privacy Policy </a> </span> </li> </ul> </nav> <p class='powered-by-link'>Powered by <a href="https://www.discourse.org">Discourse</a>, best viewed with JavaScript enabled</p> </footer> <div class="erpnext-footer"> <a href="https://frappe.io">Frappe</a> </div> <div class="buorg"><div>Unfortunately, <a href="https://www.discourse.org/faq/#browser">your browser is unsupported</a>. Please <a href="https://browsehappy.com">switch to a supported browser</a> to view rich content, log in and reply.</div></div> </body> </html>