Badge colour in sidebar2

[curtic00]

In the sidebar, the top area where you have the badge text, etc...

Is it possible to change the colour from the default blue?

[gvreddy04]

@curtic00 Thank you for using BlazorBootstrap. Here is the example:

Sample Code

<style>
	:root {
		--bb-sidebar2-width: 270px;
		--bb-sidebar2-collapsed-width: 50px;
		--bb-sidebar2-background-color: rgba(234, 234, 234, 1);
		--bb-sidebar2-top-row-background-color: rgba(0,0,0,0.08);
		--bb-sidebar2-top-row-border-color: rgb(194,192,192);
		--bb-sidebar2-title-text-color: rgb(0,0,0);
		--bb-sidebar2-brand-icon-color: #6f42c1;
		--bb-sidebar2-brand-image-width: 24px;
		--bb-sidebar2-brand-image-height: 24px;
		--bb-sidebar2-title-badge-text-color: rgb(255,255,255);
		--bb-sidebar2-title-badge-background-color: rgba(25,135,84,var(--bs-bg-opacity,1));
		--bb-sidebar2-navbar-toggler-icon-color: rgb(0,0,0);
		--bb-sidebar2-navbar-toggler-background-color: rgba(0,0,0,0.08);
		--bb-sidebar2-content-border-color: rgb(194,192,192);
		--bb-sidebar2-nav-item-text-color: rgba(0,0,0,0.9);
		--bb-sidebar2-nav-item-text-active-color-rgb: 0,0,0;
		--bb-sidebar2-nav-item-text-hover-color: rgba(var(--bb-sidebar-nav-item-text-active-color-rgb),0.9);
		--bb-sidebar2-nav-item-text-active-color: rgba(var(--bb-sidebar-nav-item-text-active-color-rgb),0.9);
		--bb-sidebar2-nav-item-background-hover-color: rgba(var(--bb-sidebar-nav-item-text-active-color-rgb),0.08);
		--bb-sidebar2-nav-item-group-background-color: rgba(var(--bb-sidebar-nav-item-text-active-color-rgb),0.08);
	}
</style>

Screenshot

[curtic00]

Thanks vikram Works once I realised where it needed to go. Charlie

…

Charlie Curtis Worthing, West Sussex BN133AB. MCSD, MCSA, MCRDBA, Azure administrator Mobile: 0777 254 5516 LinkedIn: https://uk.linkedin.com/in/charlieecharlie On 2 Aug 2024, at 17:29, Vikram Reddy ***@***.***> wrote:  @curtic00 Thank you for using BlazorBootstrap. Here is the example: Sample Code <style> :root { --bb-sidebar2-width: 270px; --bb-sidebar2-collapsed-width: 50px; --bb-sidebar2-background-color: rgba(234, 234, 234, 1); --bb-sidebar2-top-row-background-color: rgba(0,0,0,0.08); --bb-sidebar2-top-row-border-color: rgb(194,192,192); --bb-sidebar2-title-text-color: rgb(0,0,0); --bb-sidebar2-brand-icon-color: #6f42c1; --bb-sidebar2-brand-image-width: 24px; --bb-sidebar2-brand-image-height: 24px; --bb-sidebar2-title-badge-text-color: rgb(255,255,255); --bb-sidebar2-title-badge-background-color: rgba(25,135,84,var(--bs-bg-opacity,1)); --bb-sidebar2-navbar-toggler-icon-color: rgb(0,0,0); --bb-sidebar2-navbar-toggler-background-color: rgba(0,0,0,0.08); --bb-sidebar2-content-border-color: rgb(194,192,192); --bb-sidebar2-nav-item-text-color: rgba(0,0,0,0.9); --bb-sidebar2-nav-item-text-active-color-rgb: 0,0,0; --bb-sidebar2-nav-item-text-hover-color: rgba(var(--bb-sidebar-nav-item-text-active-color-rgb),0.9); --bb-sidebar2-nav-item-text-active-color: rgba(var(--bb-sidebar-nav-item-text-active-color-rgb),0.9); --bb-sidebar2-nav-item-background-hover-color: rgba(var(--bb-sidebar-nav-item-text-active-color-rgb),0.08); --bb-sidebar2-nav-item-group-background-color: rgba(var(--bb-sidebar-nav-item-text-active-color-rgb),0.08); } </style> Screenshot image.png (view on web) — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.