{"id":53359,"date":"2026-10-12T14:28:45","date_gmt":"2026-10-12T04:28:45","guid":{"rendered":"https:\/\/www.cloudproinc.com.au\/?p=53359"},"modified":"2026-10-12T14:28:45","modified_gmt":"2026-10-12T04:28:45","slug":"customizing-a-blazor-9-web-app-add-a-logo-and-change-the-sidebar-color","status":"publish","type":"post","link":"https:\/\/www.cloudproinc.com.au\/index.php\/2026\/10\/12\/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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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-1\"><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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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-2\"><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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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-3\"><code>.sidebar {\n    \/* Cleared styles *\/\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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-4\"><code>&lt;div class=\"sidebar bg-dark\"><\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/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":{"_et_pb_use_builder":"off","_et_pb_old_content":"","_et_gb_content_width":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"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"],"jetpack-related-posts":[{"id":53378,"url":"https:\/\/www.cloudproinc.com.au\/index.php\/2026\/10\/12\/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":"October 12, 2026","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:\/\/www.cloudproinc.com.au\/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:\/\/www.cloudproinc.com.au\/index.php\/2026\/10\/12\/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":"October 12, 2026","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:\/\/www.cloudproinc.com.au\/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:\/\/www.cloudproinc.com.au\/index.php\/2026\/10\/12\/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":"October 12, 2026","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:\/\/www.cloudproinc.com.au\/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:\/\/www.cloudproinc.com.au\/index.php\/2026\/10\/12\/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":"October 12, 2026","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:\/\/www.cloudproinc.com.au\/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:\/\/www.cloudproinc.com.au\/index.php\/2026\/10\/12\/containerize-a-blazor-net-application\/","url_meta":{"origin":53359,"position":4},"title":"Containerize a Blazor .NET Application","author":"CPI Staff","date":"October 12, 2026","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:\/\/www.cloudproinc.com.au\/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:\/\/www.cloudproinc.com.au\/index.php\/2026\/10\/12\/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":"October 12, 2026","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:\/\/www.cloudproinc.com.au\/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,"jetpack_featured_media_url":"\/wp-content\/uploads\/2025\/05\/Add-bootstrap-logo.png","_links":{"self":[{"href":"https:\/\/www.cloudproinc.com.au\/index.php\/wp-json\/wp\/v2\/posts\/53359","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cloudproinc.com.au\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cloudproinc.com.au\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cloudproinc.com.au\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cloudproinc.com.au\/index.php\/wp-json\/wp\/v2\/comments?post=53359"}],"version-history":[{"count":1,"href":"https:\/\/www.cloudproinc.com.au\/index.php\/wp-json\/wp\/v2\/posts\/53359\/revisions"}],"predecessor-version":[{"id":53363,"href":"https:\/\/www.cloudproinc.com.au\/index.php\/wp-json\/wp\/v2\/posts\/53359\/revisions\/53363"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cloudproinc.com.au\/index.php\/wp-json\/wp\/v2\/media\/53376"}],"wp:attachment":[{"href":"https:\/\/www.cloudproinc.com.au\/index.php\/wp-json\/wp\/v2\/media?parent=53359"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cloudproinc.com.au\/index.php\/wp-json\/wp\/v2\/categories?post=53359"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cloudproinc.com.au\/index.php\/wp-json\/wp\/v2\/tags?post=53359"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}