From 5bf57bee6efc57fabe8c16a88dd23c50e2306443 Mon Sep 17 00:00:00 2001 From: erdemcaygor Date: Tue, 25 Nov 2025 11:09:13 +0300 Subject: [PATCH 1/3] docs update --- .../ui/angular/modifying-the-menu.md | 25 ++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/docs/en/framework/ui/angular/modifying-the-menu.md b/docs/en/framework/ui/angular/modifying-the-menu.md index 75da5169cb..18f9f01e36 100644 --- a/docs/en/framework/ui/angular/modifying-the-menu.md +++ b/docs/en/framework/ui/angular/modifying-the-menu.md @@ -44,7 +44,30 @@ export const appConfig: ApplicationConfig = { Notes - This approach works across themes. If you are using LeptonX, the brand logo component reads these values automatically; you don't need any theme-specific code. -- You can still override visuals with CSS variables if desired. See the LeptonX section for CSS overrides. +- The `name` property is used for the **brand/logo display** in the UI. For the **browser page title**, ABP uses the `::AppName` localization key from your Domain.Shared layer (`Localization/[ProjectName]/en.json`). +- You can still override visuals with CSS variables if desired. See the alternative approach below. + +### Alternative: Using CSS Variables (LeptonX Theme) + +If you're using the LeptonX theme, you can also configure the logo using CSS variables in your `styles.scss` file. This approach is specific to LeptonX and provides direct control over the logo styling. + +Add the following to your `src/styles.scss`: + +```scss +:root { + --lpx-logo: url('/assets/images/logo/logo-light.png'); + --lpx-logo-icon: url('/assets/images/logo/logo-light-thumbnail.png'); +} +``` + +**When to use each approach:** + +| Approach | Use Case | Theme Support | +|----------|----------|---------------| +| **provideLogo** (recommended) | Cross-theme compatibility, environment-based configuration | All themes (Basic, LeptonX, custom) | +| **CSS Variables** | LeptonX-specific styling, fine-grained CSS control | LeptonX only | + +**Recommendation:** Use the `provideLogo` approach for most cases as it's theme-independent and follows ABP's standard configuration pattern. Use CSS variables only when you need LeptonX-specific styling control or have existing CSS-based theme customizations. ## How to Add a Navigation Element From 4f3ccfbbd9dbd4c337a5235765185e97b7f255d4 Mon Sep 17 00:00:00 2001 From: erdemcaygor Date: Tue, 25 Nov 2025 11:11:31 +0300 Subject: [PATCH 2/3] docs update --- docs/en/framework/ui/angular/modifying-the-menu.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/en/framework/ui/angular/modifying-the-menu.md b/docs/en/framework/ui/angular/modifying-the-menu.md index 18f9f01e36..16e3c30476 100644 --- a/docs/en/framework/ui/angular/modifying-the-menu.md +++ b/docs/en/framework/ui/angular/modifying-the-menu.md @@ -63,8 +63,8 @@ Add the following to your `src/styles.scss`: **When to use each approach:** | Approach | Use Case | Theme Support | -|----------|----------|---------------| -| **provideLogo** (recommended) | Cross-theme compatibility, environment-based configuration | All themes (Basic, LeptonX, custom) | +|----------|----------|-------------| +| **provideLogo** (recommended) | Cross-theme compatibility, environment-based configuration | All themes | | **CSS Variables** | LeptonX-specific styling, fine-grained CSS control | LeptonX only | **Recommendation:** Use the `provideLogo` approach for most cases as it's theme-independent and follows ABP's standard configuration pattern. Use CSS variables only when you need LeptonX-specific styling control or have existing CSS-based theme customizations. From ef591af0ade7ee07f234b773fc620465c83dff21 Mon Sep 17 00:00:00 2001 From: erdemcaygor Date: Tue, 25 Nov 2025 11:17:22 +0300 Subject: [PATCH 3/3] docs update --- docs/en/framework/ui/angular/modifying-the-menu.md | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/en/framework/ui/angular/modifying-the-menu.md b/docs/en/framework/ui/angular/modifying-the-menu.md index 16e3c30476..eec9e79ba0 100644 --- a/docs/en/framework/ui/angular/modifying-the-menu.md +++ b/docs/en/framework/ui/angular/modifying-the-menu.md @@ -44,7 +44,6 @@ export const appConfig: ApplicationConfig = { Notes - This approach works across themes. If you are using LeptonX, the brand logo component reads these values automatically; you don't need any theme-specific code. -- The `name` property is used for the **brand/logo display** in the UI. For the **browser page title**, ABP uses the `::AppName` localization key from your Domain.Shared layer (`Localization/[ProjectName]/en.json`). - You can still override visuals with CSS variables if desired. See the alternative approach below. ### Alternative: Using CSS Variables (LeptonX Theme)