{"id":53359,"date":"2025-05-05T11:52:55","date_gmt":"2025-05-05T01:52:55","guid":{"rendered":"https:\/\/www.cloudproinc.com.au\/?p=53359"},"modified":"2025-05-05T16:03:55","modified_gmt":"2025-05-05T06:03:55","slug":"customizing-a-blazor-9-web-app-add-a-logo-and-change-the-sidebar-color","status":"publish","type":"post","link":"https:\/\/cloudproinc.azurewebsites.net\/index.php\/2025\/05\/05\/customizing-a-blazor-9-web-app-add-a-logo-and-change-the-sidebar-color\/","title":{"rendered":"Customizing a Blazor 9 Web App: Add a Logo and Change the Sidebar Color"},"content":{"rendered":"\n<p>Blazor 9 introduces a powerful, component-driven architecture that makes it easier than ever to build interactive and modern web applications using .NET. In this tutorial, we&#8217;ll walk you through how to personalize your Blazor web app by <strong>adding a custom logo<\/strong> and <strong>changing the sidebar color<\/strong> to give your app a fresh, branded look.<\/p>\n\n\n\n<!--more-->\n\n\n\n<div class=\"wp-block-yoast-seo-table-of-contents yoast-table-of-contents\"><h2>Table of contents<\/h2><ul><li><a href=\"#h-before-customization\" data-level=\"2\">Before Customization<\/a><\/li><li><a href=\"#h-step-1-add-a-logo-to-your-app\" data-level=\"2\">Step 1: Add a Logo to Your App<\/a><\/li><li><a href=\"#h-step-2-style-the-logo-with-css\" data-level=\"2\">Step 2: Style the Logo with CSS<\/a><\/li><li><a href=\"#h-step-3-clean-up-sidebar-styling\" data-level=\"2\">Step 3: Clean Up Sidebar Styling<\/a><\/li><li><a href=\"#h-step-4-set-a-dark-background-for-the-sidebar\" data-level=\"2\">Step 4: Set a Dark Background for the Sidebar<\/a><\/li><\/ul><\/div>\n\n\n\n<p>Whether you&#8217;re building an internal tool or a customer-facing solution, making small UI enhancements can go a long way in delivering a professional experience.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-before-customization\">Before Customization<\/h2>\n\n\n\n<p>Here&#8217;s an example of the default layout in a <a href=\"https:\/\/www.cloudproinc.com.au\/index.php\/category\/blazor\/\">Blazor<\/a> 9 web app created using the standard template. As you can see, it comes with basic styling and a placeholder sidebar.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"694\" height=\"556\" data-src=\"\/wp-content\/uploads\/2025\/05\/image-5.png\" alt=\"\" class=\"wp-image-53360 lazyload\" data-srcset=\"\/wp-content\/uploads\/2025\/05\/image-5.png 694w, \/wp-content\/uploads\/2025\/05\/image-5-300x240.png 300w, \/wp-content\/uploads\/2025\/05\/image-5-480x385.png 480w\" data-sizes=\"(max-width: 694px) 100vw, 694px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 694px; --smush-placeholder-aspect-ratio: 694\/556;\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-step-1-add-a-logo-to-your-app\">Step 1: Add a Logo to Your App<\/h2>\n\n\n\n<p>First, choose your logo image and copy it into the <code>wwwroot<\/code> folder of your Blazor project. This is the root folder where all static assets like images and CSS files are stored.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Update <code>NavMenu.razor<\/code><\/h3>\n\n\n\n<p>Next, open the <code>NavMenu.razor<\/code> file and replace the first <code>&lt;div&gt;<\/code> inside the top row with the following code:<\/p>\n\n\n\n<pre class=\"wp-block-code has-white-color has-black-background-color has-text-color has-background has-link-color wp-elements-38ceb18476c650833c2caa35d62e8446\"><code>&lt;div class=\"top-row ps-3 navbar navbar-dark\">\n    &lt;div class=\"container-fluid d-flex justify-content-center align-items-center\">\n        &lt;a class=\"navbar-brand\" href=\"\">&lt;\/a>\n        &lt;img src=\"logo.jpg\" class=\"logo\" \/>\n        &lt;div style=\"color: white; text-align: center;\">CPI Consulting&lt;\/div>\n    &lt;\/div>\n&lt;\/div>\n<\/code><\/pre>\n\n\n\n<p>This code centers the logo and company name in the top navigation bar.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-step-2-style-the-logo-with-css\">Step 2: Style the Logo with CSS<\/h2>\n\n\n\n<p>Open the <code>NavMenu.razor.css<\/code> file and add the following CSS class to style the logo:<\/p>\n\n\n\n<pre class=\"wp-block-code has-white-color has-black-background-color has-text-color has-background has-link-color wp-elements-46c3fd2aa7738b826456649861edf9dc\"><code>.logo {\n    height: 120px;\n    width: 120px;\n    margin: 0 auto;\n    display: block;\n    margin-top: 1rem;\n    margin-bottom: 1rem;\n}<\/code><\/pre>\n\n\n\n<p>Feel free to adjust the dimensions and margins based on your design preferences.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-step-3-clean-up-sidebar-styling\">Step 3: Clean Up Sidebar Styling<\/h2>\n\n\n\n<p>To ensure your custom sidebar color appears as expected, remove any conflicting styles. Open the <code>MainLayout.razor.css<\/code> file and clear out the <code>.sidebar<\/code> class so it looks like this:<\/p>\n\n\n\n<pre class=\"wp-block-code has-white-color has-black-background-color has-text-color has-background has-link-color wp-elements-f77217cc72eb5d1fdfe1b6b75957ce24\"><code>.sidebar {\n    \/* Cleared styles *\/\n}<\/code><\/pre>\n\n\n\n<p>This allows the new styling you apply in the next step to take effect without being overridden.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-step-4-set-a-dark-background-for-the-sidebar\">Step 4: Set a Dark Background for the Sidebar<\/h2>\n\n\n\n<p>To change the sidebar&#8217;s background color to dark, open the <code>MainLayout.razor<\/code> file and modify the sidebar <code>div<\/code> like this:<\/p>\n\n\n\n<pre class=\"wp-block-code has-white-color has-black-background-color has-text-color has-background has-link-color wp-elements-0f146353f1d02031430bc1584381fdd5\"><code>&lt;div class=\"sidebar bg-dark\"><\/code><\/pre>\n\n\n\n<p>The <code>bg-dark<\/code> class uses Bootstrap&#8217;s built-in dark background styling. You can also define a custom background color using inline styles or custom CSS if you prefer a different shade.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Optional: Customize Home Page Text<\/h2>\n\n\n\n<p>To personalize your application even more, you can edit the content on the <code>Home.razor<\/code> page to reflect your branding, such as a custom welcome message or product description.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Final Result<\/h2>\n\n\n\n<p>After applying all these changes, your Blazor 9 web app will have a clean, branded sidebar and logo in the top navigation. Here&#8217;s what the updated layout looks like:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"823\" height=\"451\" data-src=\"\/wp-content\/uploads\/2025\/05\/image-6.png\" alt=\"\" class=\"wp-image-53361 lazyload\" data-srcset=\"\/wp-content\/uploads\/2025\/05\/image-6.png 823w, \/wp-content\/uploads\/2025\/05\/image-6-300x164.png 300w, \/wp-content\/uploads\/2025\/05\/image-6-768x421.png 768w, \/wp-content\/uploads\/2025\/05\/image-6-480x263.png 480w\" data-sizes=\"(max-width: 823px) 100vw, 823px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 823px; --smush-placeholder-aspect-ratio: 823\/451;\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Customizing your Blazor application\u2019s UI is a great way to align your project with your brand identity. With just a few changes to HTML and CSS, you can significantly improve the look and feel of your app. Stay tuned for more Blazor tips and UI enhancement guides!<\/p>\n\n\n\n<p>Please visit our YouTube <a href=\"https:\/\/www.youtube.com\/@CPIConsultingPtyLtd\">channel<\/a><\/p>\n\n\n\n<ul class=\"wp-block-yoast-seo-related-links yoast-seo-related-links\">\n<li><a href=\"https:\/\/www.cloudproinc.com.au\/index.php\/automate-your-outlook-calendar-colors\/\">Bring Color and Clarity to Your Calendar<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.cloudproinc.com.au\/index.php\/2025\/05\/01\/building-a-blazor-net-app-that-recognizes-images-with-openai\/\">Building a Blazor .NET App that Recognizes Images with OpenAI<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/cloudproinc.com.au\/index.php\/2025\/02\/15\/how-to-add-bootstrap-to-a-net-blazor-9-web-application\/\">How to Add Bootstrap to a .NET Blazor 9 Web Application<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.cloudproinc.com.au\/index.php\/2024\/07\/08\/creating-custom-error-pages-in-azure-web-app\/\">Creating Custom Error Pages in Azure Web App<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.cloudproinc.com.au\/index.php\/2024\/09\/13\/effortless-web-app-deployment-with-azure-cli\/\">Effortless Web App Deployment with Azure CLI<\/a><\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Blazor 9 introduces a powerful, component-driven architecture that makes it easier than ever to build interactive and modern web applications using .NET. In this tutorial, we&#8217;ll walk you through how to personalize your Blazor web app by adding a custom logo and changing the sidebar color to give your app a fresh, branded look.<\/p>\n","protected":false},"author":1,"featured_media":53376,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_yoast_wpseo_focuskw":"Customizing a Blazor 9 Web App: Add a Logo and Change the Sidebar Color","_yoast_wpseo_title":"Customizing a Blazor 9 Web App: Add a Logo and Change the Sidebar Color%%page%% %%sep%% %%sitename%%","_yoast_wpseo_metadesc":"Learn how to customize a Blazor 9 web app by adding a logo and changing the sidebar color for a professional look.","_yoast_wpseo_opengraph-title":"","_yoast_wpseo_opengraph-description":"","_yoast_wpseo_twitter-title":"","_yoast_wpseo_twitter-description":"","_et_pb_use_builder":"off","_et_pb_old_content":"","_et_gb_content_width":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[27,67,13],"tags":[],"class_list":["post-53359","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-net","category-blazor","category-blog"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.3 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Customizing a Blazor 9 Web App: Add a Logo and Change the Sidebar Color - CPI Consulting<\/title>\n<meta name=\"description\" content=\"Learn how to customize a Blazor 9 web app by adding a logo and changing the sidebar color for a professional look.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudproinc.azurewebsites.net\/index.php\/2025\/05\/05\/customizing-a-blazor-9-web-app-add-a-logo-and-change-the-sidebar-color\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Customizing a Blazor 9 Web App: Add a Logo and Change the Sidebar Color\" \/>\n<meta property=\"og:description\" content=\"Learn how to customize a Blazor 9 web app by adding a logo and changing the sidebar color for a professional look.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudproinc.azurewebsites.net\/index.php\/2025\/05\/05\/customizing-a-blazor-9-web-app-add-a-logo-and-change-the-sidebar-color\/\" \/>\n<meta property=\"og:site_name\" content=\"CPI Consulting\" \/>\n<meta property=\"article:published_time\" content=\"2025-05-05T01:52:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-05T06:03:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cloudproinc.azurewebsites.net\/wp-content\/uploads\/2025\/05\/Add-bootstrap-logo-1024x683.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"683\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"CPI Staff\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"CPI Staff\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/cloudproinc.azurewebsites.net\\\/index.php\\\/2025\\\/05\\\/05\\\/customizing-a-blazor-9-web-app-add-a-logo-and-change-the-sidebar-color\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/cloudproinc.azurewebsites.net\\\/index.php\\\/2025\\\/05\\\/05\\\/customizing-a-blazor-9-web-app-add-a-logo-and-change-the-sidebar-color\\\/\"},\"author\":{\"name\":\"CPI Staff\",\"@id\":\"https:\\\/\\\/cloudproinc.azurewebsites.net\\\/#\\\/schema\\\/person\\\/192eeeb0ce91062126ce3822ae88fe6e\"},\"headline\":\"Customizing a Blazor 9 Web App: Add a Logo and Change the Sidebar Color\",\"datePublished\":\"2025-05-05T01:52:55+00:00\",\"dateModified\":\"2025-05-05T06:03:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/cloudproinc.azurewebsites.net\\\/index.php\\\/2025\\\/05\\\/05\\\/customizing-a-blazor-9-web-app-add-a-logo-and-change-the-sidebar-color\\\/\"},\"wordCount\":518,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/cloudproinc.azurewebsites.net\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/cloudproinc.azurewebsites.net\\\/index.php\\\/2025\\\/05\\\/05\\\/customizing-a-blazor-9-web-app-add-a-logo-and-change-the-sidebar-color\\\/#primaryimage\"},\"thumbnailUrl\":\"\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/Add-bootstrap-logo.png\",\"articleSection\":[\".NET\",\"Blazor\",\"Blog\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/cloudproinc.azurewebsites.net\\\/index.php\\\/2025\\\/05\\\/05\\\/customizing-a-blazor-9-web-app-add-a-logo-and-change-the-sidebar-color\\\/#respond\"]}],\"accessibilityFeature\":[\"tableOfContents\"]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/cloudproinc.azurewebsites.net\\\/index.php\\\/2025\\\/05\\\/05\\\/customizing-a-blazor-9-web-app-add-a-logo-and-change-the-sidebar-color\\\/\",\"url\":\"https:\\\/\\\/cloudproinc.azurewebsites.net\\\/index.php\\\/2025\\\/05\\\/05\\\/customizing-a-blazor-9-web-app-add-a-logo-and-change-the-sidebar-color\\\/\",\"name\":\"Customizing a Blazor 9 Web App: Add a Logo and Change the Sidebar Color - CPI Consulting\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/cloudproinc.azurewebsites.net\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/cloudproinc.azurewebsites.net\\\/index.php\\\/2025\\\/05\\\/05\\\/customizing-a-blazor-9-web-app-add-a-logo-and-change-the-sidebar-color\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/cloudproinc.azurewebsites.net\\\/index.php\\\/2025\\\/05\\\/05\\\/customizing-a-blazor-9-web-app-add-a-logo-and-change-the-sidebar-color\\\/#primaryimage\"},\"thumbnailUrl\":\"\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/Add-bootstrap-logo.png\",\"datePublished\":\"2025-05-05T01:52:55+00:00\",\"dateModified\":\"2025-05-05T06:03:55+00:00\",\"description\":\"Learn how to customize a Blazor 9 web app by adding a logo and changing the sidebar color for a professional look.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/cloudproinc.azurewebsites.net\\\/index.php\\\/2025\\\/05\\\/05\\\/customizing-a-blazor-9-web-app-add-a-logo-and-change-the-sidebar-color\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/cloudproinc.azurewebsites.net\\\/index.php\\\/2025\\\/05\\\/05\\\/customizing-a-blazor-9-web-app-add-a-logo-and-change-the-sidebar-color\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/cloudproinc.azurewebsites.net\\\/index.php\\\/2025\\\/05\\\/05\\\/customizing-a-blazor-9-web-app-add-a-logo-and-change-the-sidebar-color\\\/#primaryimage\",\"url\":\"\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/Add-bootstrap-logo.png\",\"contentUrl\":\"\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/Add-bootstrap-logo.png\",\"width\":1536,\"height\":1024},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/cloudproinc.azurewebsites.net\\\/index.php\\\/2025\\\/05\\\/05\\\/customizing-a-blazor-9-web-app-add-a-logo-and-change-the-sidebar-color\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.cloudproinc.com.au\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Customizing a Blazor 9 Web App: Add a Logo and Change the Sidebar Color\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/cloudproinc.azurewebsites.net\\\/#website\",\"url\":\"https:\\\/\\\/cloudproinc.azurewebsites.net\\\/\",\"name\":\"Cloud Pro Inc - CPI Consulting Pty Ltd\",\"description\":\"Cloud, AI &amp; Cybersecurity Consulting | Melbourne\",\"publisher\":{\"@id\":\"https:\\\/\\\/cloudproinc.azurewebsites.net\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/cloudproinc.azurewebsites.net\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/cloudproinc.azurewebsites.net\\\/#organization\",\"name\":\"Cloud Pro Inc - Cloud Pro Inc - CPI Consulting Pty Ltd\",\"url\":\"https:\\\/\\\/cloudproinc.azurewebsites.net\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/cloudproinc.azurewebsites.net\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/favfinalfile.png\",\"contentUrl\":\"\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/favfinalfile.png\",\"width\":500,\"height\":500,\"caption\":\"Cloud Pro Inc - Cloud Pro Inc - CPI Consulting Pty Ltd\"},\"image\":{\"@id\":\"https:\\\/\\\/cloudproinc.azurewebsites.net\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/cloudproinc.azurewebsites.net\\\/#\\\/schema\\\/person\\\/192eeeb0ce91062126ce3822ae88fe6e\",\"name\":\"CPI Staff\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2d96eeb53b791d92c8c50dd667e3beec92c93253bb6ff21c02cfa8ca73665c70?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2d96eeb53b791d92c8c50dd667e3beec92c93253bb6ff21c02cfa8ca73665c70?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2d96eeb53b791d92c8c50dd667e3beec92c93253bb6ff21c02cfa8ca73665c70?s=96&d=mm&r=g\",\"caption\":\"CPI Staff\"},\"sameAs\":[\"http:\\\/\\\/www.cloudproinc.com.au\"],\"url\":\"https:\\\/\\\/cloudproinc.azurewebsites.net\\\/index.php\\\/author\\\/cpiadmin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Customizing a Blazor 9 Web App: Add a Logo and Change the Sidebar Color - CPI Consulting","description":"Learn how to customize a Blazor 9 web app by adding a logo and changing the sidebar color for a professional look.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudproinc.azurewebsites.net\/index.php\/2025\/05\/05\/customizing-a-blazor-9-web-app-add-a-logo-and-change-the-sidebar-color\/","og_locale":"en_US","og_type":"article","og_title":"Customizing a Blazor 9 Web App: Add a Logo and Change the Sidebar Color","og_description":"Learn how to customize a Blazor 9 web app by adding a logo and changing the sidebar color for a professional look.","og_url":"https:\/\/cloudproinc.azurewebsites.net\/index.php\/2025\/05\/05\/customizing-a-blazor-9-web-app-add-a-logo-and-change-the-sidebar-color\/","og_site_name":"CPI Consulting","article_published_time":"2025-05-05T01:52:55+00:00","article_modified_time":"2025-05-05T06:03:55+00:00","og_image":[{"width":1024,"height":683,"url":"https:\/\/cloudproinc.azurewebsites.net\/wp-content\/uploads\/2025\/05\/Add-bootstrap-logo-1024x683.png","type":"image\/png"}],"author":"CPI Staff","twitter_card":"summary_large_image","twitter_misc":{"Written by":"CPI Staff","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/cloudproinc.azurewebsites.net\/index.php\/2025\/05\/05\/customizing-a-blazor-9-web-app-add-a-logo-and-change-the-sidebar-color\/#article","isPartOf":{"@id":"https:\/\/cloudproinc.azurewebsites.net\/index.php\/2025\/05\/05\/customizing-a-blazor-9-web-app-add-a-logo-and-change-the-sidebar-color\/"},"author":{"name":"CPI Staff","@id":"https:\/\/cloudproinc.azurewebsites.net\/#\/schema\/person\/192eeeb0ce91062126ce3822ae88fe6e"},"headline":"Customizing a Blazor 9 Web App: Add a Logo and Change the Sidebar Color","datePublished":"2025-05-05T01:52:55+00:00","dateModified":"2025-05-05T06:03:55+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudproinc.azurewebsites.net\/index.php\/2025\/05\/05\/customizing-a-blazor-9-web-app-add-a-logo-and-change-the-sidebar-color\/"},"wordCount":518,"commentCount":0,"publisher":{"@id":"https:\/\/cloudproinc.azurewebsites.net\/#organization"},"image":{"@id":"https:\/\/cloudproinc.azurewebsites.net\/index.php\/2025\/05\/05\/customizing-a-blazor-9-web-app-add-a-logo-and-change-the-sidebar-color\/#primaryimage"},"thumbnailUrl":"\/wp-content\/uploads\/2025\/05\/Add-bootstrap-logo.png","articleSection":[".NET","Blazor","Blog"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/cloudproinc.azurewebsites.net\/index.php\/2025\/05\/05\/customizing-a-blazor-9-web-app-add-a-logo-and-change-the-sidebar-color\/#respond"]}],"accessibilityFeature":["tableOfContents"]},{"@type":"WebPage","@id":"https:\/\/cloudproinc.azurewebsites.net\/index.php\/2025\/05\/05\/customizing-a-blazor-9-web-app-add-a-logo-and-change-the-sidebar-color\/","url":"https:\/\/cloudproinc.azurewebsites.net\/index.php\/2025\/05\/05\/customizing-a-blazor-9-web-app-add-a-logo-and-change-the-sidebar-color\/","name":"Customizing a Blazor 9 Web App: Add a Logo and Change the Sidebar Color - CPI Consulting","isPartOf":{"@id":"https:\/\/cloudproinc.azurewebsites.net\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudproinc.azurewebsites.net\/index.php\/2025\/05\/05\/customizing-a-blazor-9-web-app-add-a-logo-and-change-the-sidebar-color\/#primaryimage"},"image":{"@id":"https:\/\/cloudproinc.azurewebsites.net\/index.php\/2025\/05\/05\/customizing-a-blazor-9-web-app-add-a-logo-and-change-the-sidebar-color\/#primaryimage"},"thumbnailUrl":"\/wp-content\/uploads\/2025\/05\/Add-bootstrap-logo.png","datePublished":"2025-05-05T01:52:55+00:00","dateModified":"2025-05-05T06:03:55+00:00","description":"Learn how to customize a Blazor 9 web app by adding a logo and changing the sidebar color for a professional look.","breadcrumb":{"@id":"https:\/\/cloudproinc.azurewebsites.net\/index.php\/2025\/05\/05\/customizing-a-blazor-9-web-app-add-a-logo-and-change-the-sidebar-color\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudproinc.azurewebsites.net\/index.php\/2025\/05\/05\/customizing-a-blazor-9-web-app-add-a-logo-and-change-the-sidebar-color\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudproinc.azurewebsites.net\/index.php\/2025\/05\/05\/customizing-a-blazor-9-web-app-add-a-logo-and-change-the-sidebar-color\/#primaryimage","url":"\/wp-content\/uploads\/2025\/05\/Add-bootstrap-logo.png","contentUrl":"\/wp-content\/uploads\/2025\/05\/Add-bootstrap-logo.png","width":1536,"height":1024},{"@type":"BreadcrumbList","@id":"https:\/\/cloudproinc.azurewebsites.net\/index.php\/2025\/05\/05\/customizing-a-blazor-9-web-app-add-a-logo-and-change-the-sidebar-color\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.cloudproinc.com.au\/"},{"@type":"ListItem","position":2,"name":"Customizing a Blazor 9 Web App: Add a Logo and Change the Sidebar Color"}]},{"@type":"WebSite","@id":"https:\/\/cloudproinc.azurewebsites.net\/#website","url":"https:\/\/cloudproinc.azurewebsites.net\/","name":"Cloud Pro Inc - CPI Consulting Pty Ltd","description":"Cloud, AI &amp; Cybersecurity Consulting | Melbourne","publisher":{"@id":"https:\/\/cloudproinc.azurewebsites.net\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudproinc.azurewebsites.net\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudproinc.azurewebsites.net\/#organization","name":"Cloud Pro Inc - Cloud Pro Inc - CPI Consulting Pty Ltd","url":"https:\/\/cloudproinc.azurewebsites.net\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudproinc.azurewebsites.net\/#\/schema\/logo\/image\/","url":"\/wp-content\/uploads\/2022\/01\/favfinalfile.png","contentUrl":"\/wp-content\/uploads\/2022\/01\/favfinalfile.png","width":500,"height":500,"caption":"Cloud Pro Inc - Cloud Pro Inc - CPI Consulting Pty Ltd"},"image":{"@id":"https:\/\/cloudproinc.azurewebsites.net\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/cloudproinc.azurewebsites.net\/#\/schema\/person\/192eeeb0ce91062126ce3822ae88fe6e","name":"CPI Staff","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/2d96eeb53b791d92c8c50dd667e3beec92c93253bb6ff21c02cfa8ca73665c70?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/2d96eeb53b791d92c8c50dd667e3beec92c93253bb6ff21c02cfa8ca73665c70?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2d96eeb53b791d92c8c50dd667e3beec92c93253bb6ff21c02cfa8ca73665c70?s=96&d=mm&r=g","caption":"CPI Staff"},"sameAs":["http:\/\/www.cloudproinc.com.au"],"url":"https:\/\/cloudproinc.azurewebsites.net\/index.php\/author\/cpiadmin\/"}]}},"jetpack_featured_media_url":"\/wp-content\/uploads\/2025\/05\/Add-bootstrap-logo.png","jetpack-related-posts":[{"id":53378,"url":"https:\/\/cloudproinc.azurewebsites.net\/index.php\/2025\/05\/13\/publish-a-blazor-net-app-with-vs-code-to-azure\/","url_meta":{"origin":53359,"position":0},"title":"Publish a Blazor .NET App With VS Code to Azure","author":"CPI Staff","date":"May 13, 2025","format":false,"excerpt":"In this Microsoft Azure blog post, we\u2019ll walk through how to publish a Blazor .NET app using Visual Studio Code (VS Code) to Azure. VS Code, with its rich ecosystem of extensions and integrations, is more than just a code editor. It enables developers to build, test, integrate, and deploy\u2026","rel":"","context":"In &quot;.NET&quot;","block_context":{"text":".NET","link":"https:\/\/cloudproinc.azurewebsites.net\/index.php\/category\/net\/"},"img":{"alt_text":"","src":"\/wp-content\/uploads\/2025\/05\/publish-blazor-app-with-VS-code.png","width":350,"height":200,"srcset":"\/wp-content\/uploads\/2025\/05\/publish-blazor-app-with-VS-code.png 1x, \/wp-content\/uploads\/2025\/05\/publish-blazor-app-with-VS-code.png 1.5x, \/wp-content\/uploads\/2025\/05\/publish-blazor-app-with-VS-code.png 2x"},"classes":[]},{"id":53101,"url":"https:\/\/cloudproinc.azurewebsites.net\/index.php\/2025\/02\/15\/how-to-add-bootstrap-to-a-net-blazor-9-web-application\/","url_meta":{"origin":53359,"position":1},"title":"How to Add Bootstrap to a .NET Blazor 9 Web Application","author":"CPI Staff","date":"February 15, 2025","format":false,"excerpt":"In this Blazor .NET blog post, we will show how to add Bootstrap to a .NET 9 Blazor application and leverage the most popular CSS framework. Adding Bootstrap to .NET Blazor 9 Web Application can enhance your development experience. What is Bootstrap? Bootstrap is a powerful, open-source front-end framework developed\u2026","rel":"","context":"In &quot;.NET&quot;","block_context":{"text":".NET","link":"https:\/\/cloudproinc.azurewebsites.net\/index.php\/category\/net\/"},"img":{"alt_text":"","src":"\/wp-content\/uploads\/2025\/02\/How-to-Add-Bootstrap-to-a-.NET-Blazor-9-Web-Application.webp","width":350,"height":200,"srcset":"\/wp-content\/uploads\/2025\/02\/How-to-Add-Bootstrap-to-a-.NET-Blazor-9-Web-Application.webp 1x, \/wp-content\/uploads\/2025\/02\/How-to-Add-Bootstrap-to-a-.NET-Blazor-9-Web-Application.webp 1.5x, \/wp-content\/uploads\/2025\/02\/How-to-Add-Bootstrap-to-a-.NET-Blazor-9-Web-Application.webp 2x, \/wp-content\/uploads\/2025\/02\/How-to-Add-Bootstrap-to-a-.NET-Blazor-9-Web-Application.webp 3x, \/wp-content\/uploads\/2025\/02\/How-to-Add-Bootstrap-to-a-.NET-Blazor-9-Web-Application.webp 4x"},"classes":[]},{"id":53365,"url":"https:\/\/cloudproinc.azurewebsites.net\/index.php\/2025\/05\/05\/add-bootstrap-icons-to-a-blazor-net-web-app\/","url_meta":{"origin":53359,"position":2},"title":"Add Bootstrap Icons to a Blazor .NET Web App","author":"CPI Staff","date":"May 5, 2025","format":false,"excerpt":"In this blog post, we\u2019ll show you how to add Bootstrap Icons to a Blazor .NET Web App to create visually appealing and consistent UI elements. Bootstrap Icons is a free, open-source library that provides over 1,800 scalable vector icons designed to integrate seamlessly with Bootstrap-based interfaces. These icons are\u2026","rel":"","context":"In &quot;.NET&quot;","block_context":{"text":".NET","link":"https:\/\/cloudproinc.azurewebsites.net\/index.php\/category\/net\/"},"img":{"alt_text":"","src":"\/wp-content\/uploads\/2025\/05\/Add-Bootstrap-icons-dc.png","width":350,"height":200,"srcset":"\/wp-content\/uploads\/2025\/05\/Add-Bootstrap-icons-dc.png 1x, \/wp-content\/uploads\/2025\/05\/Add-Bootstrap-icons-dc.png 1.5x, \/wp-content\/uploads\/2025\/05\/Add-Bootstrap-icons-dc.png 2x, \/wp-content\/uploads\/2025\/05\/Add-Bootstrap-icons-dc.png 3x, \/wp-content\/uploads\/2025\/05\/Add-Bootstrap-icons-dc.png 4x"},"classes":[]},{"id":53341,"url":"https:\/\/cloudproinc.azurewebsites.net\/index.php\/2025\/05\/01\/building-a-blazor-net-app-that-recognizes-images-with-openai\/","url_meta":{"origin":53359,"position":3},"title":"Building a Blazor .NET App that Recognizes Images with OpenAI","author":"CPI Staff","date":"May 1, 2025","format":false,"excerpt":"In this blog post, we\u2019ll show you how to Build a Blazor .NET App that Recognizes Images with OpenAI. You\u2019ll see how we securely upload image files, send them to OpenAI\u2019s API, and return a natural-language response\u2014seamlessly integrated into a modern web interface. This example highlights how CPI Consulting applies\u2026","rel":"","context":"In &quot;.NET&quot;","block_context":{"text":".NET","link":"https:\/\/cloudproinc.azurewebsites.net\/index.php\/category\/net\/"},"img":{"alt_text":"","src":"\/wp-content\/uploads\/2025\/05\/Building-a-Blazor-NET-App-that-Recognizes-Images-with-OpenAI-e1746073555343.png","width":350,"height":200,"srcset":"\/wp-content\/uploads\/2025\/05\/Building-a-Blazor-NET-App-that-Recognizes-Images-with-OpenAI-e1746073555343.png 1x, \/wp-content\/uploads\/2025\/05\/Building-a-Blazor-NET-App-that-Recognizes-Images-with-OpenAI-e1746073555343.png 1.5x, \/wp-content\/uploads\/2025\/05\/Building-a-Blazor-NET-App-that-Recognizes-Images-with-OpenAI-e1746073555343.png 2x"},"classes":[]},{"id":53420,"url":"https:\/\/cloudproinc.azurewebsites.net\/index.php\/2025\/06\/25\/containerize-a-blazor-net-application\/","url_meta":{"origin":53359,"position":4},"title":"Containerize a Blazor .NET Application","author":"CPI Staff","date":"June 25, 2025","format":false,"excerpt":"In this blog post, we will show you how to containerize a Blazor .NET application using native tools\u2014without relying on third-party scripts or complex setups. Microsoft .NET is one of the most popular development frameworks today, offering a wide range of deployment options. Running applications in containers and adopting microservices\u2026","rel":"","context":"In &quot;.NET&quot;","block_context":{"text":".NET","link":"https:\/\/cloudproinc.azurewebsites.net\/index.php\/category\/net\/"},"img":{"alt_text":"","src":"\/wp-content\/uploads\/2025\/02\/How-to-Add-Bootstrap-to-a-.NET-Blazor-9-Web-Application.webp","width":350,"height":200,"srcset":"\/wp-content\/uploads\/2025\/02\/How-to-Add-Bootstrap-to-a-.NET-Blazor-9-Web-Application.webp 1x, \/wp-content\/uploads\/2025\/02\/How-to-Add-Bootstrap-to-a-.NET-Blazor-9-Web-Application.webp 1.5x, \/wp-content\/uploads\/2025\/02\/How-to-Add-Bootstrap-to-a-.NET-Blazor-9-Web-Application.webp 2x, \/wp-content\/uploads\/2025\/02\/How-to-Add-Bootstrap-to-a-.NET-Blazor-9-Web-Application.webp 3x, \/wp-content\/uploads\/2025\/02\/How-to-Add-Bootstrap-to-a-.NET-Blazor-9-Web-Application.webp 4x"},"classes":[]},{"id":53240,"url":"https:\/\/cloudproinc.azurewebsites.net\/index.php\/2025\/04\/22\/build-a-blazor-web-app-to-translate-text-with-openai-gpt-4o\/","url_meta":{"origin":53359,"position":5},"title":"Build a Blazor Web App to Translate Text with OpenAI GPT-4o","author":"CPI Staff","date":"April 22, 2025","format":false,"excerpt":"In this OpenAI .NET blog post, we will demonstrate how to create a web application running on Blazor that translates text using GPT-4o. With the official OpenAI .NET library, it is possible to leverage the entire OpenAI API, including the latest Responses API. This post will guide you in creating\u2026","rel":"","context":"In &quot;Blazor&quot;","block_context":{"text":"Blazor","link":"https:\/\/cloudproinc.azurewebsites.net\/index.php\/category\/blazor\/"},"img":{"alt_text":"","src":"\/wp-content\/uploads\/2025\/04\/Translate-Text-With-OpenAI-and-Blazor-.NET-WebApp.png","width":350,"height":200,"srcset":"\/wp-content\/uploads\/2025\/04\/Translate-Text-With-OpenAI-and-Blazor-.NET-WebApp.png 1x, \/wp-content\/uploads\/2025\/04\/Translate-Text-With-OpenAI-and-Blazor-.NET-WebApp.png 1.5x, \/wp-content\/uploads\/2025\/04\/Translate-Text-With-OpenAI-and-Blazor-.NET-WebApp.png 2x, \/wp-content\/uploads\/2025\/04\/Translate-Text-With-OpenAI-and-Blazor-.NET-WebApp.png 3x, \/wp-content\/uploads\/2025\/04\/Translate-Text-With-OpenAI-and-Blazor-.NET-WebApp.png 4x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/cloudproinc.azurewebsites.net\/index.php\/wp-json\/wp\/v2\/posts\/53359","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudproinc.azurewebsites.net\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudproinc.azurewebsites.net\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudproinc.azurewebsites.net\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudproinc.azurewebsites.net\/index.php\/wp-json\/wp\/v2\/comments?post=53359"}],"version-history":[{"count":1,"href":"https:\/\/cloudproinc.azurewebsites.net\/index.php\/wp-json\/wp\/v2\/posts\/53359\/revisions"}],"predecessor-version":[{"id":53363,"href":"https:\/\/cloudproinc.azurewebsites.net\/index.php\/wp-json\/wp\/v2\/posts\/53359\/revisions\/53363"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudproinc.azurewebsites.net\/index.php\/wp-json\/wp\/v2\/media\/53376"}],"wp:attachment":[{"href":"https:\/\/cloudproinc.azurewebsites.net\/index.php\/wp-json\/wp\/v2\/media?parent=53359"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudproinc.azurewebsites.net\/index.php\/wp-json\/wp\/v2\/categories?post=53359"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudproinc.azurewebsites.net\/index.php\/wp-json\/wp\/v2\/tags?post=53359"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}